diff --git a/src/components/PieCharts/index.tsx b/src/components/PieCharts/index.tsx
index e81d626d8989383ab9671928d139078bca8c80a9..1ee61a9ddc05b79c483dd359b19708fa1017029e 100644
--- a/src/components/PieCharts/index.tsx
+++ b/src/components/PieCharts/index.tsx
@@ -1,59 +1,50 @@
+import { useMemo, useRef } from 'react'
 import ReactEcharts from 'echarts-for-react';
-import { useRef } from 'react';
-export default ({
-  data = [],
-
+const PieCharts = ({
   style,
+  color,
 }: {
-  data?: any[];
   style?: React.CSSProperties;
+  color?: string[]
 }) => {
-  const ref = useRef(null);
-  const option = {
-    tooltip: {
-      trigger: 'item',
-    },
-    color:['#ffb15c','#789efe','#fee98d'],
-    grid: {
+
+  const ref = useRef(null)
+
+  const option = useMemo(() => {
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      color: color ?? ['#E16598','#AF6CF1','#67C1E2', '#EDA368'],
+      grid: {
         x: 0,
         y: 5,
         x2: 0,
         y2: 10,
       },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          //   borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2,
-        },
-        label: {
-          show: false,
-          position: 'center',
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          padAngle: 5,
+          label: {
+            show: false,
+            position: 'center',
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+          ],
         },
-        // emphasis: {
-        //   label: {
-        //     show: true,
-        //     fontSize: 10,
-          
-        //   },
-        // },
-        labelLine: {
-          show: false,
-        },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-         
-        ],
-      },
-    ],
-  };
+      ],
+    }
+  }, [])
 
   return (
     <ReactEcharts
@@ -65,3 +56,6 @@ export default ({
     />
   );
 };
+
+export default PieCharts;
+
diff --git a/src/components/Tabs/index.less b/src/components/Tabs/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f64070dbb99994e881dda48f5a9488457a86d6c0
--- /dev/null
+++ b/src/components/Tabs/index.less
@@ -0,0 +1,36 @@
+.tabWrap {
+  width: fit-content;
+  height: 40px;
+  border-radius: 25px;
+  background: rgb(18, 61, 102);
+  display: flex;
+
+  > div {
+    min-width: 44px;
+    padding: 0 18px;
+    font-weight: 500;
+    font-size: 16px;
+    color: #6194C7;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    white-space: nowrap;
+    font-family: DingTalk JinBuTi;
+    > span {
+      line-height: normal;
+
+    }
+  }
+
+  .active {
+    border-radius: 25px;
+    background: linear-gradient(
+      180deg,
+      rgb(28, 192, 255),
+      rgb(82, 148, 255) 100%
+    ) !important;
+    color: #ffffff;
+  }
+}
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f86e6cea352d372e277bb3096544b432f8ec64eb
--- /dev/null
+++ b/src/components/Tabs/index.tsx
@@ -0,0 +1,86 @@
+import { useDebounceFn } from 'ahooks';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import styles from './index.less';
+
+interface TabsProps {
+  onChange?: (type: string) => void;
+  items?: TabItem[];
+  defaultValue?: string;
+  style?: React.CSSProperties; //父元素属性
+  itemStyle?: React.CSSProperties; //每个item的属性
+  itemkey?: string; //指定 key 值
+}
+/**
+ * @description: tabs组件
+ */
+export interface TabItem {
+  label: string | React.ReactNode;
+  key?: string;
+  icon?: string;
+  [key: string]: any;
+}
+const Tabs = (props: TabsProps) => {
+  const { onChange, items, defaultValue, style, itemStyle, itemkey } = props;
+  const [active, setActive] = useState(defaultValue);
+  const initStatus = useRef(true);
+
+  useEffect(() => {
+    if (initStatus.current) {
+      if (items && items.length > 0) {
+        let type = itemkey ? items[0][itemkey] : items[0].key;
+        setActive(defaultValue || type);
+        initStatus.current = false;
+      }
+    }
+  }, [items]);
+
+  const handleChange = async (type: string) => {
+    onChange && onChange(type);
+  };
+
+  //函数防抖
+  const { run } = useDebounceFn(
+    (type: string) => {
+      handleChange(type);
+    },
+    {
+      wait: 500,
+      leading: true,
+    },
+  );
+
+  return (
+    <div
+      className={styles.tabWrap}
+      style={{ ...style, borderRadius: itemStyle?.borderRadius || 20 }}
+    >
+      {items?.map((v, index) => (
+        <div
+          key={'tabs_' + index}
+          style={itemStyle}
+          className={classNames({
+            [styles.active]: active === v[itemkey as any] || active === v.key,
+          })}
+          onClick={(e) => {
+            e.stopPropagation();
+            let type = itemkey ? v[itemkey] : v.key;
+            setActive(type);
+            run(type);
+          }}
+        >
+          {v.icon && (
+            <img
+              src={v.icon}
+              alt=""
+              style={{ marginRight: 5, width: 24, height: 24 }}
+            />
+          )}
+          <span>{v.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Tabs;
diff --git a/src/pages/Common/Event/CommonList/LineCharts/index.tsx b/src/pages/Common/Event/CommonList/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6220b607307eb6073520a95926ac14820445495
--- /dev/null
+++ b/src/pages/Common/Event/CommonList/LineCharts/index.tsx
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import ReactEcharts from 'echarts-for-react';
+const LineCharts = () => {
+
+  const option = useMemo(() => {
+    const data: any = [100, 50, 60, 70, 50]
+    const showXAis = true
+    return {
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: showXAis,
+        data: showXAis ? ['09:15', '09:15', '09:15', '09:15', '09:15'] : [],
+        axisLabel: {
+          color: '#CBEDFF',
+          interval: 0 // 设置为0以显示所有坐标点  
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+      },
+      grid: {
+        left: '5%',  // 左边距
+        right: '5%', // 右边距
+        top: '10%',   // 上边距
+        bottom: '30%' // 下边距
+      },
+      series: [
+        {
+          data: data,
+          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.36)', // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        },
+      ],
+    }
+  }, [])
+
+  return (
+    <ReactEcharts
+      option={option} // option：图表配置项
+      style={{ width: '100%', height: '100px', margin: '0 auto' }}
+    />
+  )
+}
+
+export default LineCharts
\ No newline at end of file
diff --git a/src/pages/Common/Event/CommonList/index.less b/src/pages/Common/Event/CommonList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8e58712af3d63668a1467adc01c1cfdf898a6f6e
--- /dev/null
+++ b/src/pages/Common/Event/CommonList/index.less
@@ -0,0 +1,29 @@
+.wrap {
+  width: 100%;
+  .left {
+    width: 440px;
+    .top {
+      font-size: 18px;
+      color: #fff;
+      padding: 0 20px 15px 20px;
+      .num {
+        background: linear-gradient(
+          180deg,
+          rgb(170, 255, 246),
+          rgb(37, 187, 255)
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-family: D-DIN;
+        font-size: 42px;
+        font-weight: 700;
+        line-height: normal;
+        margin-right: 5px;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+  }
+}
diff --git a/src/pages/Common/Event/CommonList/index.tsx b/src/pages/Common/Event/CommonList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1364357f21e6a2dfb3c735673aeaafef30c56d6a
--- /dev/null
+++ b/src/pages/Common/Event/CommonList/index.tsx
@@ -0,0 +1,167 @@
+import { Flex, Space } from 'antd'
+import styles from './index.less'
+import ListTabs from '@/pages/Common/components/ListTabs'
+import IssueDescription from '@/pages/Common/components/IssueDescription'
+import ProcessCard from '@/pages/Common/components/ProcessCard'
+import BaseCard from '@/pages/Common/components/BaseCard'
+import LineCharts from './LineCharts'
+import Tabs from '@/components/Tabs';
+
+const CommonList = () => {
+
+  const changeListTab = () => {
+
+  }
+
+  const onChangeCategory = () => {
+
+  }
+
+  const areas = [
+    {
+      name: '高新区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '新都区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '龙泉驿区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    }
+  ]
+
+  const category = [
+    {
+      name: '类别一',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '类别二',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '类别三',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    }
+  ]
+
+  return (
+    <Flex gap={30} className={styles.wrap}>
+      <Space direction='vertical' size={15} className={styles.left}>
+
+        <BaseCard
+          style={{
+            paddingTop: 15
+          }}
+        >
+          <Flex justify='space-between' className={styles.top}>
+            <Space direction='vertical' >
+              <span>
+                <span className={styles.num}>56</span>
+                <span>件</span>
+              </span>
+              <span>处置中</span>
+            </Space>
+            <Space direction='vertical' >
+              <span>
+                <span className={styles.num}>56</span>
+                <span>件</span>
+              </span>
+              <span>已办结</span>
+            </Space>
+            <Space direction='vertical' >
+              <span>
+                <span className={styles.num}>89.6</span>
+                <span>%</span>
+              </span>
+              <span>办结率</span>
+            </Space>
+          </Flex>
+        </BaseCard>
+
+        <BaseCard
+          title='趋势（近30天）'
+          style={{
+            paddingTop: 20
+          }}
+        >
+          <div style={{ padding: '15px' }}>
+            <LineCharts />
+          </div>
+        </BaseCard>
+
+        <ProcessCard
+          title='高发类别'
+          extra={
+            <Tabs
+              style={{
+                background: 'transparent',
+                height: '30px'
+              }}
+              itemStyle={{
+                borderRadius: '25px',
+                background: 'rgba(7, 50, 93, 0.8)',
+                fontSize: '16px',
+                marginLeft: 8
+              }}
+              onChange={onChangeCategory}
+              itemkey={'key'}
+              items={[
+                {
+                  key: '1',
+                  label: '大类'
+                },
+                {
+                  key: '2',
+                  label: '小类'
+                },
+                {
+                  key: '3',
+                  label: '细类'
+                }
+              ]}
+            />
+          }
+          data={category}
+          strokeColor={{
+            '0%': '#38F2E3',
+            '100%': '#3DC3FF',
+          }}
+        />
+
+        <ProcessCard
+          title='高发区域'
+          data={areas}
+          strokeColor={{
+            '0%': '#FFCCCC',
+            '100%': '#EEFFEB',
+          }}
+        />
+      </Space>
+      <div className={styles.right}>
+        <Flex justify='flex-end'>
+          <div>
+            <ListTabs onChange={changeListTab} />
+          </div>
+        </Flex>
+        <IssueDescription />
+      </div>
+    </Flex>
+  )
+}
+
+export default CommonList;
\ No newline at end of file
diff --git a/src/pages/Common/Event/GeneralSituation/LineCharts/index.tsx b/src/pages/Common/Event/GeneralSituation/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6220b607307eb6073520a95926ac14820445495
--- /dev/null
+++ b/src/pages/Common/Event/GeneralSituation/LineCharts/index.tsx
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import ReactEcharts from 'echarts-for-react';
+const LineCharts = () => {
+
+  const option = useMemo(() => {
+    const data: any = [100, 50, 60, 70, 50]
+    const showXAis = true
+    return {
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: showXAis,
+        data: showXAis ? ['09:15', '09:15', '09:15', '09:15', '09:15'] : [],
+        axisLabel: {
+          color: '#CBEDFF',
+          interval: 0 // 设置为0以显示所有坐标点  
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+      },
+      grid: {
+        left: '5%',  // 左边距
+        right: '5%', // 右边距
+        top: '10%',   // 上边距
+        bottom: '30%' // 下边距
+      },
+      series: [
+        {
+          data: data,
+          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.36)', // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        },
+      ],
+    }
+  }, [])
+
+  return (
+    <ReactEcharts
+      option={option} // option：图表配置项
+      style={{ width: '100%', height: '100px', margin: '0 auto' }}
+    />
+  )
+}
+
+export default LineCharts
\ No newline at end of file
diff --git a/src/pages/Common/Event/GeneralSituation/index.less b/src/pages/Common/Event/GeneralSituation/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..168d2cd8714c0cb2c9cc58fec7831ab674797178
--- /dev/null
+++ b/src/pages/Common/Event/GeneralSituation/index.less
@@ -0,0 +1,44 @@
+.wrap {
+  width: 100%;
+  position: relative;
+  .left {
+    width: 440px;
+    .top {
+      font-size: 18px;
+      color: #fff;
+      padding: 0 20px 15px 20px;
+      .num {
+        background: linear-gradient(
+          180deg,
+          rgb(170, 255, 246),
+          rgb(37, 187, 255)
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-family: D-DIN;
+        font-size: 34px;
+        font-weight: 700;
+        line-height: normal;
+        margin:0 5px;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+  }
+
+  .searchBox {
+    position: absolute;
+    top: -75px;
+    left: 300px;
+    :global {
+      .ant-select-selector {
+        background: transparent !important;
+        border: none !important;
+        color: #FFFFFF;
+        font-size: 20px;
+      }
+    }
+  }
+}
diff --git a/src/pages/Common/Event/GeneralSituation/index.tsx b/src/pages/Common/Event/GeneralSituation/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..95a73c69238109f7fba510f6c20c1e73f8ac1d69
--- /dev/null
+++ b/src/pages/Common/Event/GeneralSituation/index.tsx
@@ -0,0 +1,196 @@
+import { Flex, Space, Select } from 'antd'
+import styles from './index.less'
+import ListTabs from '@/pages/Common/components/ListTabs'
+import IssueDescription from '@/pages/Common/components/IssueDescription'
+import ProcessCard from '@/pages/Common/components/ProcessCard'
+import BaseCard from '@/pages/Common/components/BaseCard'
+import LineCharts from './LineCharts'
+import Tabs from '@/components/Tabs';
+import { CaretDownOutlined } from '@ant-design/icons'
+
+const GeneralSituation = () => {
+
+  const changeListTab = () => {
+
+  }
+
+  const onChangeCategory = () => {
+
+  }
+
+  const areas = [
+    {
+      name: '高新区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '新都区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '龙泉驿区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    }
+  ]
+
+  const category = [
+    {
+      name: '类别一',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '类别二',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '类别三',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    }
+  ]
+
+  return (
+    <Flex gap={30} className={styles.wrap}>
+
+      <div className={styles.searchBox}>
+        <Select
+          defaultValue="1"
+          options={[{ value: '1', label: '全部来源' }]}
+          style={{ width: '150px' }}
+          suffixIcon={<CaretDownOutlined style={{ fontSize: 20, color: '#fff' }} />}
+        />
+      </div>
+
+      <Space direction='vertical' size={15} className={styles.left}>
+        <BaseCard
+          style={{
+            paddingTop: 15
+          }}
+        >
+          <Flex justify='space-between' className={styles.top}>
+            <span>
+              <span>总计</span>
+              <span className={styles.num}>56</span>
+              <span>件</span>
+            </span>
+            <span>
+              <span>自闭环</span>
+              <span className={styles.num}>56</span>
+              <span>件</span>
+            </span>
+            <span>
+              <span>提级事件</span>
+              <span className={styles.num}>65</span>
+              <span>件</span>
+            </span>
+          </Flex>
+
+          <Flex 
+            justify='space-between' 
+            className={styles.top} 
+            style={{
+            background:'rgba(57, 122, 183, 0.2)',
+            borderRadius: '20px',
+            padding: '10px 15px'
+          }}>
+            <span>
+              <span>处置中</span>
+              <span className={styles.num} style={{ fontSize: '24px'}}>56</span>
+              <span>件</span>
+            </span>
+            <span>
+              <span>已办结</span>
+              <span className={styles.num} style={{ fontSize: '24px'}}>56</span>
+              <span>件</span>
+            </span>
+            <span>
+              <span>办结率</span>
+              <span className={styles.num} style={{ fontSize: '24px'}}>89.9</span>
+              <span>%</span>
+            </span>
+          </Flex>
+        </BaseCard>
+
+        <BaseCard
+          title='趋势（近30天）'
+          style={{
+            paddingTop: 20
+          }}
+        >
+          <div style={{ padding: '15px' }}>
+            <LineCharts />
+          </div>
+        </BaseCard>
+
+        <ProcessCard
+          title='高发类别'
+          extra={
+            <Tabs
+              style={{
+                background: 'transparent',
+                height: '30px'
+              }}
+              itemStyle={{
+                borderRadius: '25px',
+                background: 'rgba(7, 50, 93, 0.8)',
+                fontSize: '16px',
+                marginLeft: 8
+              }}
+              onChange={onChangeCategory}
+              itemkey={'key'}
+              items={[
+                {
+                  key: '1',
+                  label: '大类'
+                },
+                {
+                  key: '2',
+                  label: '小类'
+                },
+                {
+                  key: '3',
+                  label: '细类'
+                }
+              ]}
+            />
+          }
+          data={category}
+          strokeColor={{
+            '0%': '#38F2E3',
+            '100%': '#3DC3FF',
+          }}
+        />
+
+        <ProcessCard
+          title='高发区域'
+          data={areas}
+          strokeColor={{
+            '0%': '#FFCCCC',
+            '100%': '#EEFFEB',
+          }}
+        />
+      </Space>
+      <div className={styles.right}>
+        <Flex justify='flex-end'>
+          <div>
+            <ListTabs onChange={changeListTab} />
+          </div>
+        </Flex>
+        <IssueDescription />
+      </div>
+    </Flex>
+  )
+}
+
+export default GeneralSituation;
\ No newline at end of file
diff --git a/src/pages/Common/Event/ImportantEvents/CategoryItem/index.less b/src/pages/Common/Event/ImportantEvents/CategoryItem/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..d18cf0ec070035d5cd59e3196f1913e55041562b
--- /dev/null
+++ b/src/pages/Common/Event/ImportantEvents/CategoryItem/index.less
@@ -0,0 +1,36 @@
+.container {
+  width: 249px;
+  height: 41px;
+  border-radius: 7px;
+  background: rgba(41, 181, 255, 0.12);
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #BCCEE9;
+  margin-bottom: 10px;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    .dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+
+    span {
+      margin-left: 5px;
+    }
+  }
+
+  .count {
+    font-family: PingFang SC;
+    font-weight: 800;
+    font-size: 18px;
+  }
+}
diff --git a/src/pages/Common/Event/ImportantEvents/CategoryItem/index.tsx b/src/pages/Common/Event/ImportantEvents/CategoryItem/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7ccdcbe43efa280f8436348c7e02848f809e78ed
--- /dev/null
+++ b/src/pages/Common/Event/ImportantEvents/CategoryItem/index.tsx
@@ -0,0 +1,16 @@
+import styles from './index.less';
+
+const OutTimeItem = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <div className={styles.dot} style={{ backgroundColor: '#F4A348' }}></div>
+        <span>类型一</span>
+      </div>
+      <span><span className={styles.count}>15</span>件</span>
+      <span><span className={styles.count}>33</span>%</span>
+    </div>
+  );
+}
+
+export default OutTimeItem
\ No newline at end of file
diff --git a/src/pages/Common/Event/ImportantEvents/index.less b/src/pages/Common/Event/ImportantEvents/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..9362ce352e6aa6271866c6a2190537b08ad265f7
--- /dev/null
+++ b/src/pages/Common/Event/ImportantEvents/index.less
@@ -0,0 +1,91 @@
+.wrap {
+  width: 100%;
+  .left {
+    width: 440px;
+    .top {
+      height: 119px;
+      border-radius: 20px;
+      background: rgba(57, 122, 183, 0.2);
+      padding: 0 15px;
+
+      .status {
+        font-size: 18px;
+        color: #fff;
+        .num {
+          background: linear-gradient(
+            180deg,
+            rgb(170, 255, 246),
+            rgb(37, 187, 255)
+          );
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          font-family: D-DIN;
+          font-size: 34px;
+          font-weight: 700;
+        }
+      }
+      .rate {
+        height: 46px;
+        border-radius: 20px;
+        background: rgba(157, 255, 145, 0.12);
+        padding-left: 18px;
+        margin: 0 10px;
+        color: #78cf8a;
+        font-size: 18px;
+        span {
+          &:last-child {
+            font-size: 26px;
+            font-weight: 700;
+            margin-left: 10px;
+            vertical-align: -2px;
+          }
+        }
+      }
+    }
+    .middle {
+      height: 374px;
+      border-radius: 20px;
+      background: rgba(57, 122, 183, 0.2);
+      padding: 20px 27px;
+      .title {
+        color: #CBEDFF;
+        font-size: 20px;
+        font-weight: 700;
+      }
+      .content {
+        padding-top: 58px;
+      }
+    }
+    .bottom {
+      height: 188px;
+      border-radius: 20px;
+      background: rgba(57, 122, 183, 0.2);
+      padding: 20px 27px;
+      .title {
+        color: #CBEDFF;
+        font-size: 20px;
+        font-weight: 700;
+      }
+      .content {
+        font-size: 16px;
+        color: #CBEDFF;
+        padding-top: 20px;
+        .area {
+          min-width: 80px;
+        }
+        .numBox {
+          margin-left: 20px;
+          .num {
+            color: #fff;
+            font-size: 18px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    flex: 1;
+  }
+}
diff --git a/src/pages/Common/Event/ImportantEvents/index.tsx b/src/pages/Common/Event/ImportantEvents/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..412cf77d8c0e8c7c58f9cea09c8c3a4915ce8b53
--- /dev/null
+++ b/src/pages/Common/Event/ImportantEvents/index.tsx
@@ -0,0 +1,119 @@
+import { Flex, Space, Progress } from 'antd'
+import styles from './index.less'
+import PieCharts from '@/components/PieCharts'
+import CategoryItem from './CategoryItem'
+import ListTabs from '@/pages/Common/components/ListTabs'
+import IssueDescription from '@/pages/Common/components/IssueDescription' 
+
+const ImportantEvents = () => {
+
+  const changeListTab = () => {
+
+  }
+
+  const areas = [
+    {
+      name: '高新区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '新都区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    },
+    {
+      name: '龙泉驿区',
+      progress: 50,
+      value: 300,
+      rate: 30.6
+    }
+  ]
+
+  return (
+    <Flex gap={30} className={styles.wrap}>
+      <Space direction='vertical' size={15} className={styles.left}>
+        <div className={styles.top}>
+          <Flex justify='space-between' className={styles.status}>
+            <Space>
+              <span>待办理</span>
+              <span className={styles.num}>68</span>
+              <span>件</span>
+            </Space>
+            <Space>
+              <span>处置中</span>
+              <span className={styles.num}>68</span>
+              <span>件</span>
+            </Space>
+            <Space>
+              <span>已结案</span>
+              <span className={styles.num}>68</span>
+              <span>件</span>
+            </Space>
+          </Flex>
+          <div className={styles.rate}>
+            <span>较传统通道处置时效提升</span>
+            <span>150%</span>
+          </div>
+        </div>
+        <div className={styles.middle}>
+          <div className={styles.title}>主要处理类型（近30天）</div>
+          <Flex className={styles.content}>
+            <div>
+              <PieCharts style={{ width: 120, height: 150 }} />
+            </div>
+            <div>
+              <CategoryItem />
+              <CategoryItem />
+              <CategoryItem />
+            </div>
+          </Flex>
+        </div>
+        <div className={styles.bottom}>
+          <div className={styles.title}>高发区域</div>
+          <div className={styles.content}>
+            {
+              areas.map((item, index) => (
+                <Flex key={index} align='center'>
+                  <div className={styles.area}>{item.name}</div>
+                  <Progress
+                    size={[160, 20]}
+                    percent={item.progress}
+                    showInfo={false}
+                    style={{ width: 160, marginTop: 10 }}
+                    strokeColor={{
+                      '0%': '#FFCCCC',
+                      '100%': '#EEFFEB',
+                    }}
+                  />
+                  <Space size={10} className={styles.numBox}>
+                    <span>
+                      <span className={styles.num}>{item.value}</span>
+                      <span>件</span>
+                    </span>
+                    <span>
+                      <span className={styles.num}>{item.rate}</span>
+                      <span>%</span>
+                    </span>
+                  </Space>
+                </Flex>
+              ))
+            }
+          </div>
+        </div>
+      </Space>
+      <div className={styles.right}>
+        <Flex justify='flex-end'>
+          <div>
+            <ListTabs onChange={changeListTab} />
+          </div>
+        </Flex>
+        <IssueDescription />
+      </div>
+    </Flex>
+  )
+}
+
+export default ImportantEvents
\ No newline at end of file
diff --git a/src/pages/Common/Event/ToDisposed/CategoryItem/index.less b/src/pages/Common/Event/ToDisposed/CategoryItem/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..d18cf0ec070035d5cd59e3196f1913e55041562b
--- /dev/null
+++ b/src/pages/Common/Event/ToDisposed/CategoryItem/index.less
@@ -0,0 +1,36 @@
+.container {
+  width: 249px;
+  height: 41px;
+  border-radius: 7px;
+  background: rgba(41, 181, 255, 0.12);
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #BCCEE9;
+  margin-bottom: 10px;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    .dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+
+    span {
+      margin-left: 5px;
+    }
+  }
+
+  .count {
+    font-family: PingFang SC;
+    font-weight: 800;
+    font-size: 18px;
+  }
+}
diff --git a/src/pages/Common/Event/ToDisposed/CategoryItem/index.tsx b/src/pages/Common/Event/ToDisposed/CategoryItem/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86c7ef53493074995718fda417216b6ad7fab3d2
--- /dev/null
+++ b/src/pages/Common/Event/ToDisposed/CategoryItem/index.tsx
@@ -0,0 +1,16 @@
+import styles from './index.less';
+
+const OutTimeItem = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <div className={styles.dot} style={{ backgroundColor: '#F4A348' }}></div>
+        <span>xxxx</span>
+      </div>
+      <span><span className={styles.count}>15</span>件</span>
+      <span><span className={styles.count}>33</span>%</span>
+    </div>
+  );
+}
+
+export default OutTimeItem
\ No newline at end of file
diff --git a/src/pages/Common/Event/ToDisposed/index.less b/src/pages/Common/Event/ToDisposed/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e8574e443aa9b847d105734ad90cf7f79a3caa7c
--- /dev/null
+++ b/src/pages/Common/Event/ToDisposed/index.less
@@ -0,0 +1,12 @@
+.wrap {
+  width: 100%;
+  .left {
+    width: 440px;
+    .content {
+      padding: 75px 0;
+    }
+  }
+  .right {
+    flex: 1;
+  }
+}
diff --git a/src/pages/Common/Event/ToDisposed/index.tsx b/src/pages/Common/Event/ToDisposed/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..647bf82cb851234efee2346de51ffc2d42eb1c91
--- /dev/null
+++ b/src/pages/Common/Event/ToDisposed/index.tsx
@@ -0,0 +1,83 @@
+import { Flex, Space } from 'antd'
+import styles from './index.less'
+import PieCharts from '@/components/PieCharts'
+import CategoryItem from './CategoryItem'
+import ListTabs from '@/pages/Common/components/ListTabs'
+import IssueDescription from '@/pages/Common/components/IssueDescription'
+import BaseCard from '@/pages/Common/components/BaseCard'
+
+const ImportantEvents = () => {
+
+  const changeListTab = () => {
+
+  }
+
+
+  return (
+    <Flex gap={30} className={styles.wrap}>
+      <Space direction='vertical' size={0} className={styles.left}>
+        <BaseCard
+          title='来源分布'
+          style={{
+            paddingTop: 20,
+            borderRadius: '20px 20px 0 0'
+          }}
+        >
+          <Flex className={styles.content}>
+            <div>
+              <PieCharts style={{ width: 120, height: 150 }} color={['#29B5FF','#FF9B5D','#FFE335']} />
+            </div>
+            <div>
+              <CategoryItem />
+              <CategoryItem />
+              <CategoryItem />
+            </div>
+          </Flex>
+        </BaseCard>
+        <BaseCard
+          title='区县分布'
+          style={{
+            paddingTop: 20,
+            borderRadius: '0 0 20px 20px'
+          }}
+        >
+          <Flex className={styles.content}>
+            <div>
+              <PieCharts style={{ width: 120, height: 150 }}  color={['#FFFCA1','#85E979','#52F9FF']} />
+            </div>
+            <div>
+              <CategoryItem />
+              <CategoryItem />
+              <CategoryItem />
+            </div>
+          </Flex>
+        </BaseCard>
+        {/* <Space direction='vertical' size={15} className={styles.left}>
+          <div className={styles.middle}>
+            <div className={styles.title}>主要处理类型（近30天）</div>
+            <Flex className={styles.content}>
+              <div>
+                <PieCharts style={{ width: 120, height: 150 }} />
+              </div>
+              <div>
+                <CategoryItem />
+                <CategoryItem />
+                <CategoryItem />
+              </div>
+            </Flex>
+          </div>
+        </Space> */}
+      </Space>
+      <div className={styles.right}>
+        <Flex justify='flex-end'>
+          <div>
+            <ListTabs onChange={changeListTab} />
+          </div>
+        </Flex>
+        <IssueDescription />
+      </div>
+    </Flex >
+  )
+}
+
+export default ImportantEvents
\ No newline at end of file
diff --git a/src/pages/Common/InfluenceSign/index.tsx b/src/pages/Common/InfluenceSign/index.tsx
index df3e6b6a0089284e453fdf4b6115baaa6ce3d50b..086c5d718fafb45f1bb842b56760743c4b73e58b 100644
--- a/src/pages/Common/InfluenceSign/index.tsx
+++ b/src/pages/Common/InfluenceSign/index.tsx
@@ -1,7 +1,7 @@
 import { Divider, Space } from 'antd';
 
 import styles from './index.less'
-import IssueDescription from '@/pages/Common/Quality/Category/IssueDescription'
+import IssueDescription from '@/pages/Common/components/IssueDescription'
 
 /**
  * 
diff --git a/src/pages/Common/Quality/Category/index.tsx b/src/pages/Common/Quality/Category/index.tsx
index 1aa88782a15ca1e06b811c55e21d5a9a6b184f0d..478c5b5bc7190dc88d5c58d320e418735e8072dd 100644
--- a/src/pages/Common/Quality/Category/index.tsx
+++ b/src/pages/Common/Quality/Category/index.tsx
@@ -2,7 +2,7 @@ import DepartmentSankey from '@/components/DepartmentSankey';
 import TreeCharts from '@/components/TreeCharts';
 import { Tabs, Flex } from 'antd';
 import { useMemo } from 'react';
-import IssueDescription from './IssueDescription';
+import IssueDescription from '@/pages/Common/components/IssueDescription';
 import SignLeft from './SignLeft';
 import SignTop5 from './SignTop';
 import styles from './index.less';
@@ -13,7 +13,6 @@ const Category = ({ item }: { item: any }) => {
         label: `影响体征TOP5`,
         key: '1',
         children: <SignTop5 items={item} />,
-        // children: <></>,
       },
       {
         label: `失分溯源`,
diff --git a/src/pages/Common/Quality/Modal/index.tsx b/src/pages/Common/Quality/Modal/index.tsx
index da0685d0891ac03f15e8bfeba22a743bd5b8f08e..86abd81d333ea71a7e0bfc9921cffab319581099 100644
--- a/src/pages/Common/Quality/Modal/index.tsx
+++ b/src/pages/Common/Quality/Modal/index.tsx
@@ -33,16 +33,15 @@ const QualityModal = () => {
     }
   }, [modalOpt]);
 
-  const handleRender = (index) => {
+  const handleRender = (index: number) => {
     if(modalOpt.length - 1 !== index) {
+      console.log(index + 1, modalOpt.length - 1)
       const newModalOpt = [...modalOpt]
-      newModalOpt.splice(index + 1, modalOpt.length - index)
+      newModalOpt.splice(index + 1, modalOpt.length - 1)
       setModalOpt(newModalOpt);
     }
   }
 
-  console.log(modalOpt)
-
   return (
     <Modal
         open={modalOpen}
diff --git a/src/pages/Common/components/BaseCard/index.less b/src/pages/Common/components/BaseCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..43435e69575c26686e2a5e063affed6c85d90174
--- /dev/null
+++ b/src/pages/Common/components/BaseCard/index.less
@@ -0,0 +1,13 @@
+.wrap {
+  border-radius: 20px;
+  background: rgba(57, 122, 183, 0.2);
+  .header {
+    padding: 0 20px;
+    .title {
+      font-family: DingTalk JinBuTi;
+      font-size: 22px;
+      font-weight: 400;
+      color: #cbedff;
+    }
+  }
+}
diff --git a/src/pages/Common/components/BaseCard/index.tsx b/src/pages/Common/components/BaseCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce64ab68197db7d40fa68fe1eda38410bda318b4
--- /dev/null
+++ b/src/pages/Common/components/BaseCard/index.tsx
@@ -0,0 +1,35 @@
+import { Flex } from 'antd'
+import { PropsWithChildren, ReactNode } from 'react';
+import styles from './index.less'
+
+/**
+ * @description 基础卡片
+ */
+
+interface BaseCardProps {
+  title?: string;
+  width?: React.CSSProperties['width'];
+  style?: React.CSSProperties;
+  extra?: ReactNode,
+  className?: string;
+}
+
+const BaseCard: React.FC<PropsWithChildren<BaseCardProps>> = (props) => {
+  const { width, style, children, title, extra } = props
+
+  return (
+    <div className={styles.wrap} style={{ width, ...style }}>
+      {
+        title && (
+          <Flex justify='space-between' className={styles.header}>
+            <span className={styles.title}>{title}</span>
+            { extra }
+          </Flex>
+        )
+      }
+      {children}
+    </div>
+  )
+}
+
+export default BaseCard
\ No newline at end of file
diff --git a/src/pages/Common/components/EventPicList/index.less b/src/pages/Common/components/EventPicList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..21deaffa9484198500320a9b162aa21320612e35
--- /dev/null
+++ b/src/pages/Common/components/EventPicList/index.less
@@ -0,0 +1,69 @@
+.cardWrap {
+  width: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 0px 6px 10px 0px rgba(173, 217, 255, 0.3);
+  border-radius: 20px;
+  border: 2px solid #ffffff;
+
+  > .info {
+    padding: 15px 22px 10px;
+  }
+
+  .tag {
+    position: absolute;
+    left: 16px;
+    top: 12px;
+    z-index: 3;
+    min-width: 60px;
+    padding: 0 10px;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 13px;
+
+    font-size: 14px;
+    color: #ffffff;
+  }
+}
+
+.cardText {
+  line-height: normal;
+  font-weight: 800;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 20px;
+  color: #45596d;
+}
+
+.status {
+  display: inline-block;
+  min-width: 80px;
+  padding: 0 4px;
+  height: 26px;
+  background: #418cfa;
+  border-radius: 13px;
+  text-align: center;
+  line-height: 26px;
+  font-size: 14px;
+  color: #ffffff;
+  margin: 12px 0;
+}
+
+.type {
+  display: inline-block;
+  min-width: 80px;
+  padding: 0 4px;
+  height: 26px;
+  background: #BFC6CE;
+  border-radius: 13px;
+  text-align: center;
+  line-height: 26px;
+  font-size: 14px;
+  color: #ffffff;
+  margin: 12px 0;
+  margin-left: 10px;
+}
diff --git a/src/pages/Common/components/EventPicList/index.tsx b/src/pages/Common/components/EventPicList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..265a4317347eeb0ce1d7b82b62b11b721ae58967
--- /dev/null
+++ b/src/pages/Common/components/EventPicList/index.tsx
@@ -0,0 +1,84 @@
+//公用事件列表
+import LabelImgText from '@/components/LabelImgText';
+import { imageOptions } from '@/utils/comm';
+import { Image, List, Spin } from 'antd';
+import React, { useRef } from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import styles from './index.less';
+interface EventPicListProps {
+  listData: any;
+  setParams: (params: any) => void;
+  listHeight?: number;//高度
+}
+const EventPicList: React.FC<EventPicListProps> = ({ listData, listHeight = 700, setParams }) => {
+
+  const page = useRef({
+    page: 1,
+  })
+
+  //下一页
+  const loadMoreData = () => {
+    page.current.page++
+    setParams(page)
+  };
+
+
+  return (
+    <div
+      style={{
+        height: listHeight,
+        overflow: 'auto',
+      }}
+    >
+      <InfiniteScroll
+        style={{ overflow: 'hidden' }}
+        loadMore={loadMoreData}
+        hasMore={listData?.hasNext}
+        useWindow={false}
+        loader={
+          <div style={{ textAlign: 'center' }}>
+            <Spin />
+          </div>
+        }
+      >
+        <List
+          grid={{ column: 4, gutter: 20 }}
+          dataSource={listData.items}
+          loading={false}
+          renderItem={(item: any) => (
+            <List.Item key={item.eventId}>
+              <div className={styles.cardWrap}>
+                <Image
+                  {...imageOptions}
+                  src={item.disposePicPath}
+                  width={'100%'}
+                  height={'160px'}
+                  style={{ objectFit: 'cover' }}
+                />
+                <div className={styles.info}>
+                  <p className={styles.cardText}>
+                    {item.standardEventTitle ?? '无标题'}
+                  </p>
+                  <span className={styles.status}>{item.caseStatusText}</span>
+                  <span className={styles.type}>{item.eventTypeName}</span>
+                  <LabelImgText
+                    value={item.reportTime}
+                    icon="event/time"
+                    valueStyle={{ color: '#6A738E', fontSize: '14px' }}
+                  />
+                  <LabelImgText
+                    value={item.address}
+                    icon="event/location"
+                    valueStyle={{ color: '#6A738E', fontSize: '14px' }}
+                  />
+                </div>
+              </div>
+            </List.Item>
+          )}
+        />
+      </InfiniteScroll>
+    </div>
+  );
+};
+
+export default EventPicList;
diff --git a/src/pages/Common/Quality/Category/IssueDescription/IssueCard/index.less b/src/pages/Common/components/IssueDescription/IssueCard/index.less
similarity index 97%
rename from src/pages/Common/Quality/Category/IssueDescription/IssueCard/index.less
rename to src/pages/Common/components/IssueDescription/IssueCard/index.less
index b1b1bb0e7ff2a3d886fcdd3aaffb257dc1ba6577..116d7a37eaba2c5b9726c1b012ef0dd5515c6336 100644
--- a/src/pages/Common/Quality/Category/IssueDescription/IssueCard/index.less
+++ b/src/pages/Common/components/IssueDescription/IssueCard/index.less
@@ -1,9 +1,10 @@
 .container {
-  width: 320px;
+  width: 300px;
   height: 315px;
   border-radius: 20px;
   background: rgba(57, 122, 183, 0.5);
   margin-bottom: 30px;
+  margin-right: 30px;
 
   .img {
     height: 159px;
diff --git a/src/pages/Common/Quality/Category/IssueDescription/IssueCard/index.tsx b/src/pages/Common/components/IssueDescription/IssueCard/index.tsx
similarity index 100%
rename from src/pages/Common/Quality/Category/IssueDescription/IssueCard/index.tsx
rename to src/pages/Common/components/IssueDescription/IssueCard/index.tsx
diff --git a/src/pages/Common/Quality/Category/IssueDescription/index.less b/src/pages/Common/components/IssueDescription/index.less
similarity index 92%
rename from src/pages/Common/Quality/Category/IssueDescription/index.less
rename to src/pages/Common/components/IssueDescription/index.less
index 3794a41ef651046de9394c145ba7aac9a89a0c08..52df32565733855093e64ce68523491b9bb8745a 100644
--- a/src/pages/Common/Quality/Category/IssueDescription/index.less
+++ b/src/pages/Common/components/IssueDescription/index.less
@@ -17,7 +17,7 @@
     height: 600px;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    // justify-content: space-between;
     // display: grid;
     // grid-template-columns: 1fr 1fr 1fr;
     // grid-row-gap: 16px;
diff --git a/src/pages/Common/Quality/Category/IssueDescription/index.tsx b/src/pages/Common/components/IssueDescription/index.tsx
similarity index 100%
rename from src/pages/Common/Quality/Category/IssueDescription/index.tsx
rename to src/pages/Common/components/IssueDescription/index.tsx
diff --git a/src/pages/Common/components/ListTabs/index.less b/src/pages/Common/components/ListTabs/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/Common/components/ListTabs/index.tsx b/src/pages/Common/components/ListTabs/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e08d47a733533f8e782fc76945c99703d2853d1
--- /dev/null
+++ b/src/pages/Common/components/ListTabs/index.tsx
@@ -0,0 +1,28 @@
+import Tabs from '@/components/Tabs';
+
+interface Props {
+  type?: string;
+  onChange: (value: string) => void;
+}
+const ListTabs = (props: Props) => {
+  const { onChange } = props;
+
+  const items = [
+    {
+      key: '1',
+      label: '全部'
+    },
+    {
+      key: '2',
+      label: '处置中'
+    },
+    {
+      key: '3',
+      label: '已办结'
+    }
+  ]
+
+  return <Tabs onChange={onChange} itemkey={'key'} items={items} />;
+};
+
+export default ListTabs;
diff --git a/src/pages/Common/components/ListView/index.less b/src/pages/Common/components/ListView/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..5c9cd9982f90592a5c79146a00c5dd2b0c220513
--- /dev/null
+++ b/src/pages/Common/components/ListView/index.less
@@ -0,0 +1,11 @@
+.status {
+  display: inline-block;
+  width: 68px;
+  height: 26px;
+  background: #66A4FF;
+  border-radius: 13px;
+  font-size: 12px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 26px;
+}
\ No newline at end of file
diff --git a/src/pages/Common/components/ListView/index.tsx b/src/pages/Common/components/ListView/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c5c9f43e76088b72fefa973379d247f86786de3
--- /dev/null
+++ b/src/pages/Common/components/ListView/index.tsx
@@ -0,0 +1,78 @@
+//列表展示
+import BlueTable from '@/components/BlueTable';
+import { Button, Space, type TableColumnsType } from 'antd';
+import { useLayoutEffect } from 'react';
+import styles from './index.less';
+interface ListViewProps {
+  listData: any;
+  setParams: (params: any) => void;
+  listHeight?:number;
+}
+const ListView: React.FC<ListViewProps> = ({ listData,listHeight, setParams }) => {
+
+  useLayoutEffect(() => {}, []);
+
+  const handleDetail = (record: any) => {
+    console.log('details record', record)
+  }
+
+  const columns: TableColumnsType<any> = [
+    {
+      title: '事件描述',
+      
+      dataIndex: 'standardEventTitle',
+      ellipsis:true,
+    },
+    {
+      title: '事件地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '事件上报时间',
+      dataIndex: 'reportTime',
+      width:200,
+    },
+    {
+      title: '状态',
+      dataIndex: 'caseStatusText',
+      width:260,
+      align: 'center',
+      render: (t, r) => (
+        <Space>
+          <span>{t}</span>
+          <span className={styles.status}>{r.timeDescription}</span>
+        </Space>
+      ),
+    },
+    {
+      title: '操作',
+      dataIndex: 'industry',
+      width:150,
+      align: 'center',
+      render: (t, record) => <Button type="link" onClick={() => handleDetail(record)}>查看</Button>
+    },
+  ];
+
+  return (
+    <BlueTable
+      style={{ height: '580px' }}
+      scroll={{y:listHeight}}
+      rowKey={'id'}
+      columns={columns}
+      serial
+      serialName="序号"
+      dataSource={listData.items}
+      pagination={{
+        total: listData?.total,
+        showSizeChanger: true,
+        showTotal: (total) => `共 ${total} 条`,
+        onChange: (pageNum, pageSize) => {
+          setParams({ pageNum, pageSize, type: 'list'});
+        },
+        current: listData.page,
+      }}
+    />
+  );
+};
+
+export default ListView;
diff --git a/src/pages/Common/components/ProcessCard/index.less b/src/pages/Common/components/ProcessCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..46382bf4da7d407b0e104837d72291957fca5496
--- /dev/null
+++ b/src/pages/Common/components/ProcessCard/index.less
@@ -0,0 +1,17 @@
+.wrap {
+  font-size: 16px;
+  color: #cbedff;
+  padding: 0 20px;
+  margin-top: 10px;
+  .name {
+    min-width: 80px;
+  }
+  .numBox {
+    margin-left: 20px;
+    .num {
+      color: #fff;
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+}
diff --git a/src/pages/Common/components/ProcessCard/index.tsx b/src/pages/Common/components/ProcessCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb3d761faefe340ccca72ffd3cb315def0aa8b52
--- /dev/null
+++ b/src/pages/Common/components/ProcessCard/index.tsx
@@ -0,0 +1,56 @@
+import { ReactNode } from 'react'
+import { Flex, Progress, Space } from 'antd'
+import type { ProgressProps } from 'antd';
+import styles from './index.less'
+import BaseCard from '@/pages/Common/components/BaseCard';
+
+interface Props {
+  data: any[];
+  title: string;
+  extra?: ReactNode;
+  style?: React.CSSProperties,
+  strokeColor?: ProgressProps['strokeColor']
+}
+
+const ProcessCard = (props: Props) => {
+  const { title, extra, data, strokeColor } = props
+
+  return (
+    <BaseCard
+      title={title}
+      extra={extra}
+      style={{
+        padding: '15px 0'
+      }}
+    >
+      <div className={styles.wrap}>
+        {
+          data.map((item, index) => (
+            <Flex key={index} align='center' justify='space-between'>
+              <div className={styles.name}>{item.name}</div>
+              <Progress
+                size={[160, 20]}
+                percent={item.progress}
+                showInfo={false}
+                style={{ width: 160, marginTop: 10 }}
+                strokeColor={strokeColor}
+              />
+              <Space size={10} className={styles.numBox}>
+                <span>
+                  <span className={styles.num}>{item.value}</span>
+                  <span>件</span>
+                </span>
+                <span>
+                  <span className={styles.num}>{item.rate}</span>
+                  <span>%</span>
+                </span>
+              </Space>
+            </Flex>
+          ))
+        }
+      </div>
+    </BaseCard>
+  )
+}
+
+export default ProcessCard
\ No newline at end of file
diff --git a/src/pages/UrbanSituation/Problem/index.less b/src/pages/UrbanSituation/Problem/index.less
index c2e521675f99411c05b5501992c6a76cfd4abc2b..04de6ac5fe683748bb9c07d3900483eda7998303 100644
--- a/src/pages/UrbanSituation/Problem/index.less
+++ b/src/pages/UrbanSituation/Problem/index.less
@@ -31,6 +31,7 @@
       background: rgba(67, 113, 180, 0.3);
       text-align: center;
       color: #bccee9;
+      cursor: pointer;
       .name {
         font-size: 18px;
         font-weight: 700;
@@ -57,7 +58,7 @@
 
   .unit {
     font-weight: 400;
-    color: #BCCEE9;
+    color: #bccee9;
   }
 
   :global {
diff --git a/src/pages/UrbanSituation/Problem/index.tsx b/src/pages/UrbanSituation/Problem/index.tsx
index 8ec5fead594efa69243160c8dc0be55171ab249a..0a9ae5efe0764042254da63385cbdcc4844d8abb 100644
--- a/src/pages/UrbanSituation/Problem/index.tsx
+++ b/src/pages/UrbanSituation/Problem/index.tsx
@@ -1,9 +1,16 @@
+import { ReactNode, useState, useMemo } from 'react';
 import { Space, Statistic, Flex } from 'antd';
 import type { StatisticProps } from 'antd';
 import CountUp from 'react-countup';
 import styles from './index.less'
 import upIcon from '@/assets/images/urbanSituation/up.png'
 import bottom from '@/assets/images/urbanSituation/bottom.png'
+import Modal from '@/components/HncyModal';
+import ImportantEvents from '@/pages/Common/Event/ImportantEvents';
+import CommonList from '@/pages/Common/Event/CommonList';
+import GeneralSituation from '@/pages/Common/Event/GeneralSituation';
+import ToDisposed from '@/pages/Common/Event/ToDisposed';
+
 
 const formatter: StatisticProps['formatter'] = (value) => (
   <CountUp end={value as number} separator="" />
@@ -11,22 +18,60 @@ const formatter: StatisticProps['formatter'] = (value) => (
 
 const Problem = () => {
 
+  const [modalOpt, setModalOpt] = useState<{
+    open: boolean;
+    title: string;
+    type: string; // 弹窗类型：todayNum 今日事件数，disposalNum 待处理事件数
+  }>({
+    open: false,
+    title: '',
+    type: ''
+  })
+
+  // 渲染弹窗内容
+  const renderModal: ReactNode = useMemo(() => {
+    let comp: any = {
+      '1': <ImportantEvents />,
+      '2': <CommonList />,
+      '3': <GeneralSituation />,
+      '4': <ToDisposed />
+    };
+    return comp[modalOpt?.type] || <></>;
+  }, [modalOpt]);
+
+
   const topCard = [
     {
       name: '重要事件',
       value: 1208,
+      modalConf: {
+        type: '1',
+        title: '事件已推送至重要事件（城管24高速通道高效处置）'
+      },
     },
     {
       name: '多跨事件',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '事件已推送至多跨事件（市城运平台协调处置）'
+      },
     },
     {
       name: '应急事件',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '事件已推送至应急事件（综合指挥调度应急处置）'
+      },
     },
     {
       name: '其它',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '常规处置事件'
+      },
     }
   ]
 
@@ -34,18 +79,34 @@ const Problem = () => {
     {
       name: '市民投诉',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '市民投诉事件'
+      },
     },
     {
       name: '物联感知',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '物联感知事件'
+      },
     },
     {
       name: '人工巡查',
       value: 1208,
+      modalConf: {
+        type: '2',
+        title: '人工巡查事件'
+      },
     },
     {
       name: '其它',
       value: 0,
+      modalConf: {
+        type: '2',
+        title: '其它渠道上报事件'
+      },
     }
   ]
 
@@ -53,22 +114,38 @@ const Problem = () => {
     {
       name: '待处置',
       value: 25,
-      unit: '件'
+      unit: '件',
+      modalConf: {
+        type: '4',
+        title: '待处置事件'
+      },
     },
     {
       name: '办结率',
       value: 75,
-      unit: '%'
+      unit: '%',
+      modalConf: {
+        type: '5',
+        title: '办结率分析'
+      },
     },
     {
       name: '委内疑难案件',
       value: 125,
-      unit: '件'
+      unit: '件',
+      modalConf: {
+        type: '6',
+        title: '疑难案件'
+      },
     },
     {
       name: '委外疑难案件',
       value: 125,
-      unit: '件'
+      unit: '件',
+      modalConf: {
+        type: '6',
+        title: '疑难案件'
+      },
     }
   ]
 
@@ -82,7 +159,7 @@ const Problem = () => {
           {
             topCard.map((item) => (
               <div className={styles.card} key={item.name}>
-                <div className={styles.numCard}>
+                <div className={styles.numCard} onClick={() => setModalOpt({ open: true, ...item.modalConf })}>
                   <Space>
                     <Statistic value={item.value} formatter={formatter} />
                     <span>件</span>
@@ -95,7 +172,14 @@ const Problem = () => {
           }
         </Flex>
         <div className={styles.center}>
-          <Space>
+          <Space
+            style={{ cursor: 'pointer' }}
+            onClick={() => setModalOpt({
+              open: true,
+              type: '3',
+              title: '事件总体情况',
+            })}
+          >
             <span>事件总量</span>
             <Statistic value={450000} formatter={formatter} />
             <span>件</span>
@@ -103,7 +187,7 @@ const Problem = () => {
           <Flex justify='space-around'>
             {
               centerStatistic.map((item) => (
-                <div key={item.name}>
+                <div key={item.name} style={{ cursor: 'pointer'}} onClick={() => setModalOpt({ open: true, ...item.modalConf })}>
                   <Space>
                     <Statistic value={item.value} />
                     <span className={styles.unit}>{item.unit}</span>
@@ -121,7 +205,7 @@ const Problem = () => {
           {
             bottomCard.map((item) => (
               <div className={styles.card} key={item.name}>
-                <div className={styles.numCard}>
+                <div className={styles.numCard} onClick={() => setModalOpt({ open: true, ...item.modalConf })}>
                   <Space>
                     <Statistic value={item.value} formatter={formatter} />
                     <span>件</span>
@@ -133,6 +217,17 @@ const Problem = () => {
           }
         </Flex>
       </div>
+
+      <Modal
+        open={modalOpt?.open}
+        title={modalOpt?.title}
+        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
+        width={1772}
+        height={846}
+        mask={false}
+      >
+        {renderModal}
+      </Modal>
     </div>
   )
 }
diff --git a/src/pages/UrbanSituation/Quality/InfluenceIndex/index.less b/src/pages/UrbanSituation/Quality/InfluenceIndex/index.less
index 12aff7dd8bbd6a3d907215d480e71bd6b1e03d63..7ddb4de8b968de7973bfd8072ad744504e7afac6 100644
--- a/src/pages/UrbanSituation/Quality/InfluenceIndex/index.less
+++ b/src/pages/UrbanSituation/Quality/InfluenceIndex/index.less
@@ -5,6 +5,7 @@
   background: rgba(57, 122, 183, 0.2);
   padding: 17px 37px 13px 23px;
   margin-top: 20px;
+  cursor: pointer;
 
   .rankTag {
     width: 58px;
diff --git a/src/pages/UrbanSituation/Quality/InfluenceIndex/index.tsx b/src/pages/UrbanSituation/Quality/InfluenceIndex/index.tsx
index cf35d58e531d8d68b55c353ea412fbbaf7edf7a3..29f6da32f830cba333f2a128c5b6cde480e5c415 100644
--- a/src/pages/UrbanSituation/Quality/InfluenceIndex/index.tsx
+++ b/src/pages/UrbanSituation/Quality/InfluenceIndex/index.tsx
@@ -1,8 +1,13 @@
+import { useState } from 'react';
 import { Flex } from 'antd'
 import styles from './index.less'
+import Modal from '@/components/HncyModal';
+import InfluenceSign from '@/pages/Common/InfluenceSign'
 
 const InfluenceIndex = () => {
 
+  const [modalOpen, setModalOpen] = useState(false)
+
   const ranks = [
     {
       title: '公共广场私搭乱建',
@@ -22,7 +27,7 @@ const InfluenceIndex = () => {
     <div>
       {
         ranks.map((item, index) => (
-          <Flex className={styles.listCard} justify='space-between' align='center' key={item.title}>
+          <Flex className={styles.listCard} justify='space-between' align='center' key={item.title} onClick={() => setModalOpen(true)}>
             <Flex gap={25} align='center'>
               <div className={styles.rankTag}>TOP{index + 1}</div>
               <div className={styles.desc}>
@@ -38,6 +43,17 @@ const InfluenceIndex = () => {
           </Flex>
         ))
       }
+
+      <Modal
+        open={modalOpen}
+        title={'影响指标'}
+        onCancel={() => setModalOpen(false)}
+        width={1470}
+        height={846}
+        mask={false}
+      >
+        <InfluenceSign />
+      </Modal>
     </div>
   )
 }