diff --git a/src/assets/images/imgs/carImg.png b/src/assets/images/imgs/carImg.png
index 075642afc70c642086812d973c82943c5621ffaf..c4eaf8cff297f514ac033ecc8af1890d09cbba33 100644
Binary files a/src/assets/images/imgs/carImg.png and b/src/assets/images/imgs/carImg.png differ
diff --git a/src/assets/images/imgs/mapIcon.png b/src/assets/images/imgs/mapIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6740a8f31805486d12f441ad38fa1728d8c5a620
Binary files /dev/null and b/src/assets/images/imgs/mapIcon.png differ
diff --git a/src/assets/images/imgs/testImg1.png b/src/assets/images/imgs/testImg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee2e2adc03da0a0188ce13632bb86d3d1ac6320c
Binary files /dev/null and b/src/assets/images/imgs/testImg1.png differ
diff --git a/src/assets/images/imgs/testImg2.png b/src/assets/images/imgs/testImg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d699978c1c54c0c1ca7307a3e13225ade5eca900
Binary files /dev/null and b/src/assets/images/imgs/testImg2.png differ
diff --git a/src/components/Modal1/Modal1.module.less b/src/components/Modal1/Modal1.module.less
new file mode 100644
index 0000000000000000000000000000000000000000..655f640c8b615c2d0770af8f41363b1cb5f5d5d4
--- /dev/null
+++ b/src/components/Modal1/Modal1.module.less
@@ -0,0 +1,27 @@
+.close {
+    width: 76px;
+    height: 76px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    opacity: 0.5;
+    color: #fff;
+    font-size: 70px;
+}
+
+.modalBox {
+    border-radius: 30px;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+
+    .header {
+        width: 100%;
+        height: 110px;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        padding: 0 60px;
+        font-weight: 400;
+        font-size: 56px;
+        color: #FFFFFF;
+        font-family: YouSheBiaoTiYuan;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Modal1/Modal1.tsx b/src/components/Modal1/Modal1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..31a2a132837bfaa52685fcd9cd7c308ea2cd9b61
--- /dev/null
+++ b/src/components/Modal1/Modal1.tsx
@@ -0,0 +1,55 @@
+import { CSSProperties, FC, ReactNode } from "react"
+import BasicsModal from "../BasicsModal/BasicsModal"
+import styles from './Modal1.module.less'
+import { Flex } from "antd"
+import headUlr3 from '@/assets/images/bg/head3.png'
+import headUlr2 from '@/assets/images/bg/head2.png'
+
+
+type Modal1Props = {
+    open: boolean
+    onCancel: () => void
+    title: ReactNode
+    children: ReactNode
+    type?: 'green' | 'red'
+    width?: CSSProperties['width']
+}
+
+const bgTypes = {
+    green: {
+        headUlr: headUlr3,
+        // bgColor: 'rgba(123, 199, 204, 0.5)',
+        bgColor: '#010D1C50',
+        borderColor: '#0DFFB8'
+    },
+    red: {
+        headUlr: headUlr2,
+        bgColor: ' rgba(255, 151, 151, 0.2)',
+        borderColor: '#FF9797'
+    }
+}
+
+const Modal1: FC<Modal1Props> = (props) => {
+    const { open, onCancel, children, title, type = 'green', width = 'auto' } = props
+    // @ts-ignore
+    const { headUlr, bgColor, borderColor } = bgTypes[type]
+
+    return <BasicsModal
+        open={open}
+        onCancel={onCancel}
+        width={width}
+        closeIcon={<Flex className={styles.close} justify="center" align="center">×</Flex>}
+    >
+        <div className={styles.modalBox} style={{
+            background: bgColor,
+            border: `2px solid ${borderColor}`
+        }}>
+            <Flex className={styles.header} style={{ backgroundImage: `url(${headUlr})` }} align="center">
+                {title}
+            </Flex>
+            {children}
+        </div>
+    </BasicsModal>
+}
+
+export default Modal1
\ No newline at end of file
diff --git a/src/pages/IntegratedCommand/components/ImgAndValue/index.tsx b/src/pages/IntegratedCommand/components/ImgAndValue/index.tsx
index ae7287d68bdd5cac3b7edfa0a46e0f7b91e55ad9..b42eaca34af9f358bccfb55394237ef21a67f2c4 100644
--- a/src/pages/IntegratedCommand/components/ImgAndValue/index.tsx
+++ b/src/pages/IntegratedCommand/components/ImgAndValue/index.tsx
@@ -9,11 +9,12 @@ interface PropsTypes {
   gap?: number;
   iconStyle?: CSSProperties;
   valueStyle?: CSSProperties;
+  onClick?:()=>void
 }
 export default function (props: PropsTypes) {
-  const { icon, title, value, gap = 24, valueStyle = {}, unit } = props;
+  const { icon, title, value, gap = 24, valueStyle = {}, unit,onClick } = props;
   return (
-    <div>
+    <div onClick={onClick}>
       <Flex gap={gap}>
         <div>
           <img src={icon} alt="" style={props.iconStyle}></img>
diff --git a/src/pages/IntegratedCommand/pages/BaseElement/index.module.css b/src/pages/IntegratedCommand/pages/BaseElement/index.module.css
index eed9d4540361731a0ad77893773a90fbb2207d01..53ddd550ebbebdbf2ed80cea8394571521d6d0ab 100644
--- a/src/pages/IntegratedCommand/pages/BaseElement/index.module.css
+++ b/src/pages/IntegratedCommand/pages/BaseElement/index.module.css
@@ -1,4 +1,6 @@
 .container {
+    position: relative;
+    z-index: 20;
   padding: 34px;
 }
 
diff --git a/src/pages/IntegratedCommand/pages/BaseElement/index.tsx b/src/pages/IntegratedCommand/pages/BaseElement/index.tsx
index 00634b695bf8cdf981afed29a93abc140720e328..a973df61f46066cff00aa99fc2f15fb1fdec1812 100644
--- a/src/pages/IntegratedCommand/pages/BaseElement/index.tsx
+++ b/src/pages/IntegratedCommand/pages/BaseElement/index.tsx
@@ -230,13 +230,13 @@ export default function () {
                 {
                     icon: icon8,
                     name: "一线管理人员",
-                    total: 1,
+                    total: '0',
                     value: 0,
                 },
                 {
                     icon: icon8,
                     name: "环卫工人",
-                    total: 1,
+                    total: '0',
                     value: 0,
                 },
             ],
@@ -254,7 +254,7 @@ export default function () {
                 obj.list.push({
                     icon: icon12,
                     name: carTypeName,
-                    total: carTotalCount,
+                    total: carTotalCount + '',
                     value: carOnlineCount,
                 })
             })
@@ -267,7 +267,7 @@ export default function () {
                 obj2.list.push({
                     icon: icon12,
                     name: carTypeName,
-                    total: carTotalCount,
+                    total: carTotalCount + '',
                     value: carOnlineCount,
                 })
             })
diff --git a/src/pages/IntegratedCommand/pages/CarDetail/CarDetail.tsx b/src/pages/IntegratedCommand/pages/CarDetail/CarDetail.tsx
index 3dc130b8ce2227ea4dd16286fa99493a321fbf7a..2a4b1016d46da36c5c748b9b1188c7bc28701ec3 100644
--- a/src/pages/IntegratedCommand/pages/CarDetail/CarDetail.tsx
+++ b/src/pages/IntegratedCommand/pages/CarDetail/CarDetail.tsx
@@ -20,10 +20,19 @@ const CarDetail: FC<CarDetailProps> = (props) => {
 
     const [cameraList, setCameraList] = useState<any[]>([])
     const getCamera = async () => {
-        // const res = await carCamera(carId)
-        // if (res.code === 0) {
-        //     setCameraList(res.data)
-        // }
+        const res = await carCamera(carId)
+        if (res.code === 0) {
+            // setCameraList([
+            //     {
+            //         url: 'http://49.232.205.236:60019/video',
+            //         playInstructUrl: 'http://49.232.205.236:60017/gps/handler.jsp',
+            //         c: 'send9101',
+            //         tid: '014060461333',
+            //         tdh: '4'
+            //     }
+            // ])
+            setCameraList(res.data)
+        }
     }
 
     const [baseInfo, setBaseInfo] = useState<any>({})
@@ -102,7 +111,7 @@ const CarDetail: FC<CarDetailProps> = (props) => {
                         </Flex>
                         <Flex vertical align='center'>
                             <InstrumentpanelChart style={{ width: 260, height: 200 }} value={Number(realTimeInfo.weight)} colors={['#2CA3FF', '#1d70b2']} />
-                            <div className={styles.desc}>水量(L)</div>
+                            <div className={styles.desc}>重量(kg)</div>
                             <div className={styles.num} style={{ color: '#2CA3FF' }}>{realTimeInfo.weight}</div>
                         </Flex>
                     </Flex>
@@ -191,7 +200,7 @@ const CarDetail: FC<CarDetailProps> = (props) => {
                                     <span>20%</span>
                                 </Flex>
                             </Flex>
-                            <Flex className={styles.cell}>
+                            {/* <Flex className={styles.cell}>
                                 <span>左前喷头：</span>
                                 <span>关</span>
                             </Flex>
@@ -206,7 +215,7 @@ const CarDetail: FC<CarDetailProps> = (props) => {
                             <Flex className={styles.cell}>
                                 <span>右扫盘：</span>
                                 <span>关</span>
-                            </Flex>
+                            </Flex> */}
                             <Flex className={styles.cell}>
                                 <span>垃圾重量：</span>
                                 <span>{sprayerData.weight || 0}</span>
diff --git a/src/pages/IntegratedCommand/pages/CompletePeriod/index.tsx b/src/pages/IntegratedCommand/pages/CompletePeriod/index.tsx
index 5df41b4b39bc1f2e77bb3648e82ba10e65bdd57f..b9046ac84281f77531480769361f25c50e8f60b6 100644
--- a/src/pages/IntegratedCommand/pages/CompletePeriod/index.tsx
+++ b/src/pages/IntegratedCommand/pages/CompletePeriod/index.tsx
@@ -5,7 +5,7 @@ import icon19 from "@/assets/images/icon/icon19.png";
 import Tabs from "../../components/Tabs";
 import SubTitle from "../../components/SubTitle";
 import styles from "./index.module.css";
-import { Col, Flex, Row } from "antd";
+import { Col, Flex, Row, Image } from "antd";
 import ImgAndValue from "../../components/ImgAndValue";
 import icon20 from "@/assets/images/icon/icon20.png";
 import icon21 from "@/assets/images/icon/icon21.png";
@@ -13,125 +13,152 @@ import icon22 from "@/assets/images/icon/icon22.png";
 import icon23 from "@/assets/images/icon/icon23.png";
 import icon24 from "@/assets/images/icon/icon24.png";
 import icon25 from "@/assets/images/icon/icon25.png";
+import testImg1 from '@/assets/images/imgs/testImg1.png'
+import testImg2 from '@/assets/images/imgs/testImg2.png'
+import { useState } from "react";
 
 export default function () {
-  return (
-    <GlassCard width={784} height={863} size="small" style={{ padding: 30 }}>
-      <Title
-        title="垃圾全周期监管"
-        rightIcon={() => (
-          <img alt="" src={icon19} style={{ width: 56, height: 46 }}></img>
-        )}
-        extra={<Tabs></Tabs>}
-      ></Title>
-      <SubTitle>
-        <div>
-          垃圾总量<span className={styles.value}>0</span>T
-        </div>
-      </SubTitle>
-      <Row style={{ margin: "16px 0" }}>
-        <Col span={12} style={{ marginBottom: 20 }}>
-          <ImgAndValue
-            icon={icon20}
-            title={"其它垃圾"}
-            value={0}
-            unit={"T"}
-          />
-        </Col>
-        <Col span={12}>
-          <ImgAndValue
-            icon={icon21}
-            title={"餐厨垃圾"}
-            value={0}
-            unit={"T"}
-          />
-        </Col>
-        <Col span={12}>
-          <ImgAndValue
-            icon={icon22}
-            title={"可回收物"}
-            value={0}
-            unit={"T"}
-          />
-        </Col>
-        <Col span={12}>
-          <ImgAndValue
-            icon={icon23}
-            title={"有害垃圾"}
-            value={0}
-            unit={"T"}
-          />
-        </Col>
-      </Row>
-      <SubTitle title="垃圾流转"></SubTitle>
-      <Flex align="center" style={{ margin: "16px 0" }}>
-        <div className={styles.flowItem}>
-          <div className={styles.value_1}>
-            0<span className={styles.unit}>T</span>
-          </div>
-          <div className={styles.desc}>垃圾收集点</div>
-        </div>
-        <div>
-          <img src={icon24} alt=""></img>
-        </div>
-        <div className={styles.flowItem}>
-          <div className={styles.value_2}>
-            0<span className={styles.unit}>T</span>
-          </div>
-          <div className={styles.desc}>收运车辆 </div>
-        </div>
-        <div>
-          <img src={icon24} alt=""></img>
-        </div>
-        <div className={styles.flowItem}>
-          <div className={styles.value_3}>
-            0<span className={styles.unit}>T</span>
-          </div>
-          <div className={styles.desc}>转运站 </div>
-        </div>
-        <div>
-          <img src={icon24} alt=""></img>
-        </div>
-        <div className={styles.flowItem}>
-          <div className={styles.value_4}>
-            0<span className={styles.unit}>T</span>
-          </div>
-          <div className={styles.desc}>末端处置厂</div>
-        </div>
-      </Flex>
-      <SubTitle title="收运作业问题"></SubTitle>
-      <Row style={{ margin: "16px 0" }}>
-        <Col span={8}>
-          <ImgAndValue
-            icon={icon25}
-            title={"混装混运"}
-            gap={6}
-            value={0}
-            valueStyle={{ color: "#fff" }}
-            unit={"次"}
-          />
-        </Col>
-        <Col span={8}>
-          <ImgAndValue
-            icon={icon25}
-            title={"跨区域收运"}
-            value={0}
-            gap={6}
-            valueStyle={{ color: "#fff" }}
-            unit={"次"}
-          />
-        </Col>
-        <Col span={8}>
-          <ImgAndValue
-            icon={icon25}
-            title={"跑冒滴漏"}
-            value={0}
-            valueStyle={{ color: "#fff" }}
-            gap={6}
-            unit={"次"}
-          />
-        </Col>
-      </Row>
-    </GlassCard>
-  );
+    const [prevShow, setPrevShow] = useState(false)
+    const [prevUrl, setPrevUrl] = useState('')
+
+    return (
+        <GlassCard width={784} height={863} size="small" style={{ padding: 30, position: 'relative', zIndex: 20 }}>
+            <Title
+                title="垃圾全周期监管"
+                rightIcon={() => (
+                    <img alt="" src={icon19} style={{ width: 56, height: 46 }}></img>
+                )}
+                extra={<Tabs></Tabs>}
+            ></Title>
+            <SubTitle>
+                <div>
+                    垃圾总量<span className={styles.value}>0</span>T
+                </div>
+            </SubTitle>
+            <Row style={{ margin: "16px 0" }}>
+                <Col span={12} style={{ marginBottom: 20 }}>
+                    <ImgAndValue
+                        icon={icon20}
+                        title={"其它垃圾"}
+                        value={0}
+                        unit={"T"}
+                    />
+                </Col>
+                <Col span={12}>
+                    <ImgAndValue
+                        icon={icon21}
+                        title={"餐厨垃圾"}
+                        value={0}
+                        unit={"T"}
+                    />
+                </Col>
+                <Col span={12}>
+                    <ImgAndValue
+                        icon={icon22}
+                        title={"可回收物"}
+                        value={0}
+                        unit={"T"}
+                    />
+                </Col>
+                <Col span={12}>
+                    <ImgAndValue
+                        icon={icon23}
+                        title={"有害垃圾"}
+                        value={0}
+                        unit={"T"}
+                    />
+                </Col>
+            </Row>
+            <SubTitle title="垃圾流转"></SubTitle>
+            <Flex align="center" style={{ margin: "16px 0" }}>
+                <div className={styles.flowItem}>
+                    <div className={styles.value_1}>
+                        0<span className={styles.unit}>T</span>
+                    </div>
+                    <div className={styles.desc}>垃圾收集点</div>
+                </div>
+                <div>
+                    <img src={icon24} alt=""></img>
+                </div>
+                <div className={styles.flowItem}>
+                    <div className={styles.value_2}>
+                        0<span className={styles.unit}>T</span>
+                    </div>
+                    <div className={styles.desc}>收运车辆 </div>
+                </div>
+                <div>
+                    <img src={icon24} alt=""></img>
+                </div>
+                <div className={styles.flowItem}>
+                    <div className={styles.value_3}>
+                        0<span className={styles.unit}>T</span>
+                    </div>
+                    <div className={styles.desc}>转运站 </div>
+                </div>
+                <div>
+                    <img src={icon24} alt=""></img>
+                </div>
+                <div className={styles.flowItem}>
+                    <div className={styles.value_4}>
+                        0<span className={styles.unit}>T</span>
+                    </div>
+                    <div className={styles.desc}>末端处置厂</div>
+                </div>
+            </Flex>
+            <SubTitle title="收运作业问题"></SubTitle>
+            <Image
+                width={200}
+                style={{ display: 'none' }}
+                src={prevUrl}
+                preview={{
+                    visible: prevShow,
+                    scaleStep: 0.5,
+                    src: prevUrl,
+                    onVisibleChange: (value) => {
+                        setPrevShow(value);
+                    },
+                }}
+            />
+            <Row style={{ margin: "16px 0" }}>
+                <Col span={8} style={{ cursor: 'pointer' }}>
+                    <ImgAndValue
+                        icon={icon25}
+                        title={"混装混运"}
+                        gap={6}
+                        value={1}
+                        valueStyle={{ color: "#fff" }}
+                        unit={"次"}
+                        onClick={() => {
+                            setPrevUrl(testImg1)
+                            setPrevShow(true)
+                        }}
+                    />
+                </Col>
+                {/* <Col span={8}>
+                    <ImgAndValue
+                        icon={icon25}
+                        title={"跨区域收运"}
+                        value={0}
+                        gap={6}
+                        valueStyle={{ color: "#fff" }}
+                        unit={"次"}
+                    />
+                </Col> */}
+                <Col span={8} style={{ cursor: 'pointer' }}>
+                    <ImgAndValue
+                        icon={icon25}
+                        title={"抛洒滴漏"}
+                        value={1}
+                        valueStyle={{ color: "#fff" }}
+                        gap={6}
+                        unit={"次"}
+                        onClick={() => {
+                            setPrevUrl(testImg2)
+                            setPrevShow(true)
+                        }}
+                    />
+                </Col>
+            </Row>
+        </GlassCard>
+    );
 }
diff --git a/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.module.less b/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.module.less
index 52eb79bfd8c50cd451b95f2b6fd64db64774f116..7a84e71db6662c8f76800c4483fea565cd4595c0 100644
--- a/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.module.less
+++ b/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.module.less
@@ -8,6 +8,23 @@
     font-size: 70px;
 }
 
+.mapIcon {
+    width: 116px;
+    height: 126px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+
+    .txt {
+        font-weight: bold;
+        font-size: 50px;
+        color: #FFEC91;
+        text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.68);
+        background: linear-gradient(180deg, #FFEC91 0%, #FF4027 98.6328125%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
 .modalBox {
     background: rgba(255, 151, 151, 0.2);
     border: 2px solid #FF9797;
diff --git a/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.tsx b/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.tsx
index 5567a4df6d0906026d567214722e0b6dbec9f8ae..ca7e6a247e4e0df8f1ef77e04eea8d5dbfb587d3 100644
--- a/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.tsx
+++ b/src/pages/IntegratedCommand/pages/RealtimeWarning/IllegalDrivingModal/IllegalDrivingModal.tsx
@@ -9,6 +9,8 @@ import PersonnelDetail from "../PersonnelDetail/PersonnelDetail"
 import { debounce } from 'lodash'
 import { warnInfo } from "@/api"
 import dayjs from "dayjs"
+import mapIcon from '@/assets/images/imgs/mapIcon.png'
+import IssueDetail from "../IssueDetail/IssueDetail"
 
 
 type IllegalDrivingModalProps = {
@@ -18,17 +20,26 @@ type IllegalDrivingModalProps = {
 const IllegalDrivingModal: FC<IllegalDrivingModalProps> = (props) => {
     const { open, onCancel } = props
     const mapRef = useRef<BMapGL.Map>(null);
-    const scrollRef = useRef<HTMLDivElement | null>(null);
 
-    const [list, setList] = useState<any[]>([])
-    const [total, setTotal] = useState(0)
+    const [list, setList] = useState({
+        alarmList: [] as any[],
+        pointList: [] as any[]
+    })
 
     const [month, setMonth] = useState(dayjs().format('YYYY-MM'))
     const getData = async () => {
-        // const res = await warnInfo(month)
-        // if (res.code === 200) {
-        //     console.log(res);
-        // }
+        const res = await warnInfo(month)
+        if (res.code === 0) {
+            setList(res.data)
+            const points = res.data.pointList.map((v: any) => {
+                const { latitude, longitude } = v
+                const point = new BMapGL.Point(longitude, latitude)
+                return point
+            })
+            console.log(points);
+
+            mapRef.current?.setViewport(points, {})
+        }
     }
     useEffect(() => {
         if (open) {
@@ -36,18 +47,10 @@ const IllegalDrivingModal: FC<IllegalDrivingModalProps> = (props) => {
         }
     }, [open, month])
 
-    // 触底加载
-    const boxScroll = debounce(() => {
-        if (scrollRef.current) {
-            const { scrollTop, clientHeight, scrollHeight } = scrollRef.current;
-            const isBottom = scrollTop + clientHeight >= scrollHeight - 50
-            if (isBottom && list.length < total) {
-
-            }
-        }
-    }, 300)
-
     const [personShow, setPersonShow] = useState(false)
+
+    const [issueShow, setIssueShow] = useState(false)
+    const [issueDetail, setIssueDetail] = useState<any>({})
     return <BasicsModal
         open={open}
         onCancel={onCancel}
@@ -56,13 +59,14 @@ const IllegalDrivingModal: FC<IllegalDrivingModalProps> = (props) => {
     >
         <div className={styles.modalBox} style={{}}>
             <Flex className={styles.header} style={{ backgroundImage: `url(${head})` }} align="center">
-                <div className={styles.title}>车辆超速报警</div>
+                <div className={styles.title}>违规驾驶报警</div>
                 <div className={styles.type}>当前</div>
                 <div className={styles.tag}>历史</div>
                 <DatePicker className={styles.dateBox} picker="month" defaultValue={dayjs()} onChange={(_, data) => setMonth(data as string)} />
             </Flex>
             <Flex className={styles.contentBox} gap={35}>
                 <div className={styles.mapBox}>
+                    {/* @ts-ignore */}
                     <Map
                         style={{ width: '100%', height: "100%" }}
                         center={new BMapGL.Point(104.32730973764755, 30.799183766314435)}
@@ -72,39 +76,58 @@ const IllegalDrivingModal: FC<IllegalDrivingModalProps> = (props) => {
                         enableScrollWheelZoom
                         zoom={13.6}
                         mapStyleV2={{ styleJson }}
-                    ></Map>
+                    >
+                        {list.pointList.map((v) => {
+                            const { latitude, longitude, serialNumber } = v
+                            const point = new BMapGL.Point(longitude, latitude)
+                            // @ts-ignore
+                            return <CustomOverlay
+                                map={mapRef.current as BMapGL.Map}
+                                position={point}
+                                key={serialNumber}
+                            >
+                                <Flex className={styles.mapIcon} style={{ backgroundImage: `url(${mapIcon})` }} align="center" justify="center">
+                                    <div className={styles.txt}>
+                                        {serialNumber}
+                                    </div>
+                                </Flex>
+                            </CustomOverlay>
+                        })}
+                    </Map>
                 </div>
-                <Flex className={styles.scrollBox} vertical gap={20} onScrollCapture={boxScroll} ref={scrollRef}>
-                    {new Array(10).fill('').map((_, i) => {
-                        return <Flex className={styles.item} key={i} gap={40} onClick={() => {
-                            setPersonShow(true)
+                <Flex className={styles.scrollBox} vertical gap={20}>
+                    {list.alarmList.map((v) => {
+                        const { plateNumber, alarmDescribe, happenPosition, pictures = [], serialNumber, happenTime, driverName, orgName } = v
+                        return <Flex className={styles.item} key={serialNumber} gap={40} onClick={() => {
+                            // setPersonShow(true)
+                            setIssueDetail(v)
+                            setIssueShow(true)
                         }}>
-                            <Image src='' width={230} height={230} />
+                            <Image src={pictures[0]} width={230} height={230} />
                             <Flex className={styles.txtBox} vertical flex={1}>
                                 <Flex className={styles.title} justify='space-between'>
-                                    <div>川A01024</div>
-                                    <div>超速预警</div>
+                                    <div>{plateNumber}</div>
+                                    <div>违规预警</div>
                                 </Flex>
                                 <div className={styles.txt}>
                                     <Flex justify='space-between'>
-                                        <div>驾驶员：张三</div>
-                                        <div>所属单位：绿洲</div>
+                                        <div>驾驶员：{driverName || '暂无'}</div>
+                                        <div>所属单位：{orgName || '暂无'}</div>
                                     </Flex>
-                                    <div>车辆超过80km/h的安全限速，持续10分钟</div>
-                                    <div>成都市高新区天府大道666号希顿国际东</div>
-                                    <div>2024-05-25 10:20:20</div>
+                                    <div>{alarmDescribe}</div>
+                                    <div>{happenPosition}</div>
+                                    <div>{happenTime}</div>
                                 </div>
                             </Flex>
 
-                            <Flex className={styles.footTag} justify='center'>
-                                {i + 1}
-                            </Flex>
+                            <Flex className={styles.footTag} justify='center'>{serialNumber}</Flex>
                         </Flex>
                     })}
                 </Flex>
             </Flex>
         </div>
         <PersonnelDetail open={personShow} onCancel={() => setPersonShow(false)} />
+        <IssueDetail open={issueShow} onCancel={() => setIssueShow(false)} detailData={issueDetail} />
     </BasicsModal>
 }
 
diff --git a/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.module.less b/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.module.less
new file mode 100644
index 0000000000000000000000000000000000000000..6732bdefb80eb125885da17f133daa8a15a3f644
--- /dev/null
+++ b/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.module.less
@@ -0,0 +1,44 @@
+.contentBox {
+    padding: 45px 40px;
+
+    .img {
+        width: 1350px;
+        height: 1200px;
+        border-radius: 20px;
+    }
+
+    .title {
+        font-weight: 400;
+        font-size: 40px;
+        color: #FFFFFF;
+    }
+
+    .cell {
+        margin-top: 30px;
+
+        span {
+            font-weight: 400;
+            font-size: 32px;
+            color: #82A3B6;
+        }
+
+        span:last-child {
+            color: #fff;
+            padding-left: 5px;
+            flex: 1;
+        }
+    }
+
+    .cell2 {
+        margin-top: 30px;
+        div {
+            font-weight: 400;
+            font-size: 28px;
+            color: #82A3B6;
+        }
+
+        div:last-child {
+            color: #fff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.tsx b/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..257dab9078a62b5d2d225d3fc60ebe2b529f64a2
--- /dev/null
+++ b/src/pages/IntegratedCommand/pages/RealtimeWarning/IssueDetail/IssueDetail.tsx
@@ -0,0 +1,72 @@
+import { FC } from "react"
+import styles from './IssueDetail.module.less'
+import Modal1 from "@/components/Modal1/Modal1"
+import { Flex, Image } from "antd"
+
+type IssueDetailProps = {
+    open: boolean
+    onCancel: () => void
+    detailData: any
+}
+
+const IssueDetail: FC<IssueDetailProps> = (props) => {
+    const { open, onCancel, detailData } = props
+    // const { } = detailData
+    const { plateNumber, alarmDescribe, happenPosition, pictures = [], serialNumber, happenTime, driverName, orgName } = detailData
+
+
+    return <Modal1 type="green" open={open} onCancel={onCancel} title={'问题详情'}>
+        <Flex className={styles.contentBox} gap={75}>
+            <Image className={styles.img} src={pictures[0]} />
+            <Flex vertical flex={1}>
+                <div className={styles.title}>道路不洁</div>
+                <Flex className={styles.cell}>
+                    <span>问题大类：</span>
+                    <span>违规驾驶预警</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>问题来源：</span>
+                    <span>智能巡检</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>上报车辆：</span>
+                    <span>{plateNumber}</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>上报时间：</span>
+                    <span>{happenTime}</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>问题地点：</span>
+                    <span>{happenPosition}</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>问题描述：</span>
+                    <span>{alarmDescribe}</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>责任单位：</span>
+                    <span>{orgName}</span>
+                </Flex>
+                <Flex className={styles.cell}>
+                    <span>责任人：</span>
+                    <span>{driverName||'暂无'}</span>
+                </Flex>
+                {/* <Flex className={styles.cell}>
+                    <span>路段作业要素：</span>
+                    <span>要素111</span>
+                </Flex>
+                <div className={styles.cell2}>
+                    <div>日常保洁计划（09：00 - 18：00）</div>
+                    <div>张三三、李四、王五</div>
+                </div>
+                <div className={styles.cell2}>
+                    <div>机械普扫计划（09：00 - 18：00）</div>
+                    <div>保洁1、保洁2</div>
+                </div> */}
+            </Flex>
+        </Flex>
+    </Modal1>
+}
+
+export default IssueDetail
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 976a905591c0636de28d05d4c01d26848abff46b..68110e6efc4ef72f695041178c4fcebd80b41c97 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,8 +24,8 @@ export default defineConfig({
         host: '0.0.0.0',
         proxy: {
             "/api": {
-                // target: "http://172.23.0.140:15999",  // 唐
-                target: "http://171.217.92.33:58089/element",  // 测试服务
+                target: "http://172.23.0.140:15999",  // 唐
+                // target: "http://171.217.92.33:58089/element",  // 测试服务
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/api/, ""),
             }