diff --git a/src/api/monitor.js b/src/api/monitor.js
index f38c57e..f907bc5 100644
--- a/src/api/monitor.js
+++ b/src/api/monitor.js
@@ -1,5 +1,30 @@
 import request from './request'
 
+export function getTrafficEventsApi() {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/monitor/trafficEvents',
+    method: 'get'
+  })
+}
+export function getVideoEventApi(scenicSpotId) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/monitor/videoEvents?scenicSpotId='+scenicSpotId,
+    method: 'get'
+  })
+}
+export function getVideoEventObjImgApi(objId) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/monitor/videoEventsImg/'+objId,
+    method: 'get'
+  })
+}
+export function getPreviewUrlSubApi(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/video/getPreviewUrlSub',
+    method: 'post',
+    data
+  })
+}
 // 安全页面视频类型
 export function getVideoTypeApi(data) {
   return request({
diff --git a/src/assets/images/imgloading.png b/src/assets/images/imgloading.png
new file mode 100644
index 0000000..9c4a0bc
Binary files /dev/null and b/src/assets/images/imgloading.png differ
diff --git a/src/components/ImageDialog/index.vue b/src/components/ImageDialog/index.vue
new file mode 100644
index 0000000..15c9dce
--- /dev/null
+++ b/src/components/ImageDialog/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      v-model="modelValue"
+      align-center
+      :modal="false"
+      :show-close="false"
+      :z-index="9999"
+      destroy-on-close
+    >
+      <div class="dialog-box">
+        <div class="video">
+          <img style="width: 100%;height: 100%;" :src="src" />
+        </div>
+      </div>
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: ''
+    }
+  })
+  let modelValue = defineModel()
+  watch(
+    () =>modelValue.value,
+    (val) => {
+
+    },
+    {
+      immediate: true
+    }
+  )
+  const handleClose = () => {
+    modelValue.value = false
+  }
+  onMounted(()=>{
+
+  })
+</script>
+
+<style scoped lang="scss">
+  .dialog {
+    z-index: 9999;
+    .action {
+      &-box {
+        margin-top: vh(16);
+        gap: vw(20);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &-item {
+        padding: vw(16);
+        display: flex;
+        align-items: center;
+        background: #0a4190;
+        border-radius: vw(8);
+        > img {
+          cursor: pointer;
+          width: vw(34);
+          height: auto;
+        }
+        > span {
+          margin: 0 vw(16);
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .pause {
+          margin: 0 vw(10);
+        }
+      }
+    }
+    .none {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: vw(1814);
+      height: vw(980);
+      color: #fff;
+      font-weight: bold;
+      font-size: vw(30);
+      transform: translate(-50%, -50%);
+      z-index: 999;
+    }
+    :deep(.el-dialog) {
+      position: relative;
+      width: vw(1940);
+      background: transparent !important;
+    }
+    .dialog-box {
+      padding: vw(40) vw(30) vw(30) vw(30);
+      background-image: url('@/assets/images/video-bg.png');
+      background-size: 100% 100%;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+    .video {
+      width: vw(1814);
+      height: vw(920);
+      object-fit: contain;
+      background-color: #062b57;
+    }
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: vw(70);
+      top: vw(80);
+      width: vw(60);
+      z-index: 9999;
+    }
+  }
+</style>
diff --git a/src/utils/config.js b/src/utils/config.js
index 0bfb1e5..50bf75e 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,7 +1,7 @@
-export const baseUrl = 'http://192.168.77.209:81'
+export const baseUrl = 'http://127.0.0.1:81'
 export const proBaseUrl = 'http://192.168.77.200'
 
-export const socketBaseUrl = 'ws://192.168.77.209:81/fjtcc-api'
+export const socketBaseUrl = 'ws://127.0.0.1:81/fjtcc-api'
 export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
 
 export const mode = 'pro' // 测试 dev  正式 pro
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index a863f39..bbb5197 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -47,85 +47,73 @@
         </ul>
       </div>
       <div class="map" id="map" />
-      <!-- <div class="spot-wrap">
-        <ul class="spot-list">
-          <li
-            class="spot-item"
-            v-for="(item, index) in spotList"
-            :key="index"
-            @click="handleMap(item.scenicSpotId)"
-          >
-            <img :src="`http://36.138.38.16:8001/fjtcc-api${item.img}`" />
-          </li>
-        </ul>
-      </div> -->
     </div>
-<!--    <div class="footer">-->
-<!--      <div class="left">-->
-<!--        <div>-->
-<!--          <div class="flex justify-center pt-10">-->
-<!--            <div class="item">-->
-<!--              <p class="label">今日工单总条数</p>-->
-<!--              <countup :end-val="homeStore.wordkOrderData.toDayData.count" />-->
-<!--            </div>-->
-<!--            <div class="item">-->
-<!--              <p class="label">工单完成数</p>-->
-<!--              <countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div class="progress-box">-->
-<!--            <span class="text">工单完成数</span>-->
-<!--            <div class="progress-1">-->
-<!--              <el-progress-->
-<!--                :percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"-->
-<!--                :show-text="false"-->
-<!--              />-->
-<!--            </div>-->
-<!--            <span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        <div>-->
-<!--          <div class="flex justify-center pt-10">-->
-<!--            <div class="item">-->
-<!--              <p class="label">紧急工单数</p>-->
-<!--              <countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />-->
-<!--            </div>-->
-<!--            <div class="item">-->
-<!--              <p class="label">紧急工单完成数</p>-->
-<!--              <countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div class="progress-box">-->
-<!--            <span class="text">工单完成数</span>-->
-<!--            <div class="progress-2">-->
-<!--              <el-progress-->
-<!--                :percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"-->
-<!--                :show-text="false"-->
-<!--              />-->
-<!--            </div>-->
-<!--            <span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div>-->
-<!--        <vue3-seamless-scroll-->
-<!--          class="right"-->
-<!--          :list="homeStore.wordkOrderList"-->
-<!--          :limitScrollNum="3"-->
-<!--          :hover="true"-->
-<!--          :step="0.2"-->
-<!--          :wheel="true"-->
-<!--          :isWatch="true"-->
-<!--        >-->
-<!--          <div class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">-->
-<!--            <span :class="`item-tag&#45;&#45;${item.level}`">{{ item.level_text }}</span>-->
-<!--            <p class="content">-->
-<!--              {{ item.title }}-->
-<!--            </p>-->
-<!--          </div>-->
-<!--        </vue3-seamless-scroll>-->
-<!--      </div>-->
-<!--    </div>-->
+    <div class="footer">
+      <div class="left">
+        <div>
+          <div class="flex justify-center pt-10">
+            <div class="item">
+              <p class="label">今日工单总条数</p>
+              <countup :end-val="homeStore.wordkOrderData.toDayData.count" />
+            </div>
+            <div class="item">
+              <p class="label">工单完成数</p>
+              <countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />
+            </div>
+          </div>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress-1">
+              <el-progress
+                :percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"
+                :show-text="false"
+              />
+            </div>
+            <span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>
+          </div>
+        </div>
+        <div>
+          <div class="flex justify-center pt-10">
+            <div class="item">
+              <p class="label">紧急工单数</p>
+              <countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />
+            </div>
+            <div class="item">
+              <p class="label">紧急工单完成数</p>
+              <countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />
+            </div>
+          </div>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress-2">
+              <el-progress
+                :percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"
+                :show-text="false"
+              />
+            </div>
+            <span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <vue3-seamless-scroll
+          class="right"
+          :list="homeStore.wordkOrderList"
+          :limitScrollNum="3"
+          :hover="true"
+          :step="0.2"
+          :wheel="true"
+          :isWatch="true"
+        >
+          <div class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">
+            <span :class="`item-tag--${item.level}`">{{ item.level_text }}</span>
+            <p class="content">
+              {{ item.title }}
+            </p>
+          </div>
+        </vue3-seamless-scroll>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -169,22 +157,114 @@
     map.value.setMapStyleV2({
       styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF
     })
-    map.value.setTrafficOn()
-    // res.data.list.map((item) => {
-    //   item.map((i) => {
-    //     // 创建折线
-    //     let arr = []
-    //     i.path.map((j) => {
-    //       arr.push(new BMapGL.Point(j[0], j[1]))
-    //     })
-    //     var polyline = new BMapGL.Polyline(arr, {
-    //       strokeColor: '#9AFF02',
-    //       strokeWeight: 8,
-    //       strokeOpacity: 0.8
-    //     })
-    //     map.value.addOverlay(polyline)
-    //   })
-    // })
+    const allData = [
+      [
+        109.57843364485261,31.050783420337332
+      ],
+      [
+        109.5763185309496,31.042512315044785
+      ],
+      [
+        109.578438523583,31.041253717253543
+      ],
+      [
+        109.58480087476947,31.041557307017047
+      ],
+      [
+        109.58971689758278,31.04091104021125
+      ],
+      [
+        109.59452326321068,31.04025926587977
+      ],
+      [
+        109.60838415909252,31.035555713566687
+      ],
+      [
+        109.60995055557738,31.032199123538422
+      ],
+      [
+        109.62156263671656,31.018465302840454
+      ],
+      [
+        109.62534994444817,31.016071773573458
+      ],
+      [
+        109.62877486684926,31.01814529506191
+      ],
+      [
+        109.63464468590746,31.027249858930684
+      ],
+      [
+        109.6405129788155,31.029770289201934
+      ],
+      [
+        109.65561363054604,31.038740966425156
+      ],
+      [
+        109.65665229650565,31.042456954560258
+      ],
+      [
+        109.65365673982508,31.045094749902372
+      ],
+      [
+        109.65079175912291,31.04683943792912
+      ],
+      [
+        109.6471467686651,31.04454011173439
+      ],
+      [
+        109.64258701251156,31.04402745793725
+      ],
+      [
+        109.63436954572919,31.043833122861844
+      ],
+      [
+        109.6279668506477,31.044815504006518
+      ],
+      [
+        109.6198507320364,31.046067463158575
+      ],
+      [
+        109.61224510312262,31.045350944237523
+      ],
+      [
+        109.60633406560694,31.05148153531427
+      ],
+      [
+        109.6048887477277,31.052512113965893
+      ],
+      [
+        109.59660938015361,31.050968484315057
+      ],
+      [
+        109.590694912004,31.050620057176253
+      ],
+      [
+        109.58255014801492,31.053206076638133
+      ],
+      [
+        109.58176241763722,31.05377630574891
+      ],
+      [
+        109.57821941737987,31.053703848067492
+      ],
+      [
+        109.57848246902094,31.050563464855543
+      ]
+    ];
+    let arr = []
+    allData.map((item) => {
+      // 创建折线
+      arr.push(new BMapGL.Point(item[0], item[1]))
+    })
+    console.log(arr)
+    var polyline = new BMapGL.Polyline(arr, {
+      strokeColor: '#9C9C9C',
+      strokeStyle: 'dashed',
+      strokeWeight: 3,
+      strokeOpacity: 0.8
+    })
+    map.value.addOverlay(polyline)
     // timter = setInterval(() => {
     //   getBaiduMapCrowded()
     // }, 5000)
@@ -270,7 +350,7 @@
 
   onMounted(() => {
     getSpotList()
-	
+
   })
 </script>
 
@@ -291,7 +371,7 @@
   }
   .map {
     width: 100%;
-    height: vh(810);
+    height: vh(710);
     background-color: transparent;
   }
   .box-3 {
diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue
index 100ecb8..a369649 100644
--- a/src/views/monitor/components/box-1.vue
+++ b/src/views/monitor/components/box-1.vue
@@ -17,8 +17,8 @@
             :end-val="aiAnalyzeData.allAnalysisPoints"
           />
         </div>
-        <div class="traffic-item">
-          <span class="traffic-item__title">异常点位 </span>
+        <div class="traffic-item" @click="showAbnormalList">
+          <span class="traffic-item__title">异常点位</span>
           <countup :class="aiAnalyzeData.abnormalPoints>0?'traffic-item__value--error':'traffic-item__value--success'" :end-val="aiAnalyzeData.abnormalPoints" />
         </div>
       </div>
@@ -28,11 +28,11 @@
           <span class="scenic-item__label">核心景区分析点位</span>
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
         </div>
-        <div class="scenic-item">
+        <div class="scenic-item" @click="showAbnormalList" style="cursor: pointer;" >
           <span class="scenic-item__label">异常点位</span>
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalPoints" />
         </div>
-        <div class="scenic-item">
+        <div class="scenic-item" @click="showAbnormalList" style="cursor: pointer;" >
           <span class="scenic-item__label">异常告警</span>
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
         </div>
@@ -67,11 +67,11 @@
             :end-val="trafficAiAnalyzeData.coreMonitoringPoints"
           />
         </div>
-        <div class="scenic-item">
+        <div class="scenic-item" style="cursor: pointer" @click="showTrafficEvent">
           <span class="scenic-item__label">拥堵点位</span>
           <countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalPoints" />
         </div>
-        <div class="scenic-item">
+        <div class="scenic-item" style="cursor: pointer" @click="showTrafficEvent">
           <span class="scenic-item__label">拥堵告警</span>
           <countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalWarnings" />
         </div>
@@ -130,7 +130,7 @@
                 :end-val="pointAlarmData.analysisPoints"
               />
             </div>
-            <div class="monitor-statistics-item">
+            <div class="monitor-statistics-item" @click="showAbnormalList" style="cursor: pointer;" >
               <span class="monitor-statistics-item__label">异常点位</span>
               <countup
 			  class="monitor-statistics-item__value"
@@ -139,8 +139,8 @@
               />
             </div>
           </div>
-          <div class="bg">
-            <Title3 title="今日异常告警" />
+          <div class="bg" style="cursor: pointer;" >
+            <Title3 title="今日异常告警" @click="showAbnormalList" />
             <Line
               :width="370"
               :height="180"
@@ -155,7 +155,7 @@
           </div>
           <div class="traffic-alarm-statistics">
             <img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
-            <div class="traffic-alarm-statistics-item">
+            <div class="traffic-alarm-statistics-item" @click="showAbnormalList" style="cursor: pointer;">
               <span class="traffic-alarm-statistics-item__label">当前告警</span>
               <countup
                 :class="pointAlarmData.abnormalAlarm>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
@@ -164,16 +164,14 @@
             </div>
             <div class="traffic-alarm-statistics-item">
               <span class="traffic-alarm-statistics-item__label">异常告警</span>
-              <countup
-                  :class="pointAlarmData.allAbnormalAlarm>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
+              <countup class="traffic-alarm-statistics-item__value"
                 :end-val="pointAlarmData.allAbnormalAlarm"
               />
             </div>
             <div class="traffic-alarm-statistics-item">
               <span class="traffic-alarm-statistics-item__label">已解除告警</span>
               <countup
-			  class="traffic-alarm-statistics-item__value"
-                  :class="pointAlarmData.handled>0?'traffic-alarm-statistics-item__error':'traffic-alarm-statistics-item__value'"
+			  class="traffic-alarm-statistics-item__value traffic-alarm-statistics-item__value"
                 :end-val="pointAlarmData.handled"
               />
             </div>
@@ -190,13 +188,16 @@
     </template>
   </div>
   <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
+  <warn-list v-model="warnShow" :scenicSpotId="scenicSpotId" />
+  <traffic-list v-model="trafficEventShow" />
 </template>
 
 <script setup>
   import countup from 'vue-countup-v3'
   import alarmRate from './alarmRate'
   import alarmList from './alarmList'
-  import alarmToday from './alarmToday'
+  import warnList from './warnList.vue'
+  import trafficList from './trafficList.vue'
   import trafficJam from './traffic-jam'
   import { useWebSocket } from '@/hooks/socket'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
@@ -245,6 +246,14 @@
   let src = ref('')
   let cameraIndexCode = ref('')
   let videoShow = ref(false)
+  let warnShow = ref(false)
+  let trafficEventShow = ref(false)
+  const showAbnormalList = function (){
+    warnShow.value = true;
+  }
+  const showTrafficEvent = function(){
+    trafficEventShow.value = true;
+  }
   window.addEventListener("message", async(e) => {
     let {code,data} = await getPreviewUrlApi({
       type: 'hls',
diff --git a/src/views/monitor/components/trafficList.vue b/src/views/monitor/components/trafficList.vue
new file mode 100644
index 0000000..5ad3898
--- /dev/null
+++ b/src/views/monitor/components/trafficList.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="z-dialog">
+    <el-dialog title="核心路段拥堵告警" v-model="modelValue" align-center :modal="false" :show-close="false">
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+	  <div class="no-data" v-if="cond&&!list.length">
+		  暂无拥堵告警
+	  </div>
+	  <div v-else>
+		  <ul class="list" >
+		    <li
+		      class="item"
+		      v-for="(item, index) in list"
+		      :key="index"
+		    >
+          <span> {{item.congestTailDesc}}{{item.direction}}发生{{item.extraEventStatus}}，平均车速{{item.speed}}KM/H</span>
+          <span>{{timestampToTime(item.startTime)}}</span>
+		    </li>
+		  </ul>
+	  </div>
+    </el-dialog>
+  </div>
+  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
+  <image-dialog v-model="imageShow" :src="imgSrc"/>
+</template>
+
+<script setup>
+  import { getTrafficEventsApi,getPreviewUrlSubApi } from '@/api/monitor'
+
+  import primary from '@/assets/images/item-primary.png'
+
+  import imageEmpty from '@/assets/images/imgloading.png'
+  import pubSub from 'pubsub-js'
+
+  let props = defineProps({
+    events: {
+      type: String,
+      default: ''
+    },
+  })
+  let modelValue = defineModel()
+  let isCollect = ref(0)
+  let list = ref([])
+  let hlsRefs = []
+  let total = ref(0)
+  let src = ref('')
+  let imgSrc = ref('')
+  let imageShow = ref(false)
+  let cameraIndexCode = ref('')
+  let videoShow = ref(false)
+  let isDiy = ref(0)
+  let params = reactive({
+    pageNum: 1,
+    pageSize: 6,
+	businessScenicArea:'',
+  })
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+		  params.pageNum = 1
+		  cond.value = false
+		  params.businessScenicArea = props.events
+		  list.value = []
+        setTimeout(() => {
+          getVideoList()
+        }, 1000)
+      }
+    }
+  )
+  const onVideoCollect = () => {
+    pubSub.subscribe('videoCollect', () => {
+      clearHlsRefs()
+  	  getVideoList()
+    })
+  }
+  const handleImage = (item) => {
+    getVideoEventObjImgApi(item.objId).then(res=>{
+      imgSrc.value = res.data.url
+      imageShow.value = true
+    });
+  }
+  const handleItem =  async (id) => {
+    let {code,data} = await getPreviewUrlSubApi({
+      type: 'hls',
+      cameraIndexCode:id
+    })
+    if(code===200){
+      src.value = data.url
+      isCollect.value = data.isCollect
+      isDiy.value = data.isDiy
+      cameraIndexCode.value = id
+      videoShow.value = true
+    }
+  }
+  const timestampToTime = (timestamp)=>{
+    var date = new Date(timestamp*1000);
+    return date.toLocaleString();
+  }
+  const handleCollect = async (id, status) => {
+    await postVideoCollectApi({
+      cameraIndexCode:id,
+      isCollect: status == 0 ? 1 : 0
+    })
+    clearHlsRefs()
+    params.pageNum = 1
+    getVideoList()
+    pubSub.publish('videoCollect')
+  }
+  const handleClose = () => {
+    clearHlsRefs()
+    modelValue.value = false
+  }
+  const clearHlsRefs = () => {
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+      hlsRefs = []
+    }
+  }
+  const pageNumChange = () => {
+	  cond.value = false
+    clearHlsRefs()
+    list.value = []
+    getVideoList()
+  }
+  let cond = ref(false)
+  const getVideoList = async () => {
+    let res = await getTrafficEventsApi();
+    list.value = res.data
+	setTimeout(()=>{cond.value = true},1500)
+  }
+
+  onMounted(() => {
+	  onVideoCollect()
+  })
+  onUnmounted(() => {})
+</script>
+
+<style scoped lang="scss">
+  .z-dialog {
+    :deep(.el-dialog) {
+      width: vw(2100);
+      padding: vw(8);
+      background-image: url('@/assets/images/dialog-bg.png') !important;
+      background-size: 100% 100%;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: vw(4); /* 滚动条的宽度 */
+      }
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
+      }
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+      margin-top: vw(10);
+      text-align: center;
+    }
+    :deep(.el-dialog__title) {
+      color: #fff;
+      font-weight: bold;
+    }
+  }
+  .item-title{
+    font-weight: 400;
+    z-index: 99;
+    height: vw(50);
+    padding: vw(10);
+    font-size: vw(24);
+    color: #ffffff;
+    position: absolute;
+    left: 3%;
+    background-image: url('@/assets/images/unfollow.png');
+    background-size: 100% 100%;
+  }
+  .no-data{
+	  height:vh(860);
+	  line-height: vh(860);
+	  text-align: center;
+	  font-size:vw(30);
+	  color:#02f9fa;
+  }
+  .cursorPointer{
+    cursor: pointer
+  }
+  .list {
+    overflow-y: auto;
+    margin-top: vh(50);
+    height: vh(590);
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: vw(4); /* 滚动条的宽度 */
+    }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: 'transparent'; /* 轨道的背景色 */
+    }
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+      border-radius: 5px; /* 滑块的圆角 */
+    }
+    .item {
+      height: vh(80);
+      line-height: vh(80);
+      font-weight: 400;
+      font-size: vw(25);
+      color: #f1f7ff;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 vw(10);
+      &:nth-child(2n + 1) {
+        background: linear-gradient(
+                90deg,
+                rgba(0, 150, 255, 0) 0%,
+                rgba(0, 150, 255, 0.22) 100%
+        );
+      }
+      & > div {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap; /* 保证文本在一行内显示 */
+        overflow: hidden; /* 隐藏溢出的内容 */
+        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+      }
+    }
+  }
+  .pagination {
+    padding-top: vw(20);
+    margin-right: vw(20);
+    padding-bottom: vw(20);
+    display: flex;
+    justify-content: flex-end;
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vw(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>
diff --git a/src/views/monitor/components/warnList.vue b/src/views/monitor/components/warnList.vue
new file mode 100644
index 0000000..e16223c
--- /dev/null
+++ b/src/views/monitor/components/warnList.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="z-dialog">
+    <el-dialog title="异常点位告警" v-model="modelValue" align-center :modal="false" :show-close="false">
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+	  <div class="no-data" v-if="cond&&!list.length">
+		  暂无异常情况
+	  </div>
+	  <div v-else>
+		  <ul class="list" >
+		    <li
+		      class="item"
+		      :style="{ backgroundImage: `url(${primary})` }"
+		      v-for="(item, index) in list"
+		      :key="index"
+		      @click="handleImage(item)"
+		    >
+		      <div
+			  class="item-title"
+			 >{{ item.analyzeTypeName}}</div>
+
+			  <img style="width: 100%;height: 100%;" :src="item.imgurl || imageEmpty">
+		      <p style="display: flex;justify-content: space-between;">
+		        <span> {{ item.cameraName || item.cameraIndexCode }}</span>
+            <span class="cursorPointer" @click.stop="handleItem(item.cameraIndexCode)">查看监控></span>
+		      </p>
+		    </li>
+		  </ul>
+	  </div>
+    </el-dialog>
+  </div>
+  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
+  <image-dialog v-model="imageShow" :src="imgSrc"/>
+</template>
+
+<script setup>
+  import { getVideoEventApi,getVideoEventObjImgApi,getPreviewUrlSubApi } from '@/api/monitor'
+
+  import primary from '@/assets/images/item-primary.png'
+
+  import imageEmpty from '@/assets/images/imgloading.png'
+  import pubSub from 'pubsub-js'
+
+  let props = defineProps({
+    scenicSpotId: {
+      type: String,
+      default: ''
+    },
+    events: {
+      type: String,
+      default: ''
+    },
+  })
+  let modelValue = defineModel()
+  let isCollect = ref(0)
+  let list = ref([])
+  let hlsRefs = []
+  let total = ref(0)
+  let src = ref('')
+  let imgSrc = ref('')
+  let imageShow = ref(false)
+  let cameraIndexCode = ref('')
+  let videoShow = ref(false)
+  let isDiy = ref(0)
+  let params = reactive({
+    pageNum: 1,
+    pageSize: 6,
+	businessScenicArea:'',
+  })
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+		  params.pageNum = 1
+		  cond.value = false
+		  params.businessScenicArea = props.events
+		  list.value = []
+        setTimeout(() => {
+          getVideoList()
+        }, 1000)
+      }
+    }
+  )
+  const onVideoCollect = () => {
+    pubSub.subscribe('videoCollect', () => {
+      clearHlsRefs()
+  	  getVideoList()
+    })
+  }
+  const handleImage = (item) => {
+    getVideoEventObjImgApi(item.objId).then(res=>{
+      imgSrc.value = res.data.url
+      imageShow.value = true
+    });
+  }
+  const handleItem =  async (id) => {
+    let {code,data} = await getPreviewUrlSubApi({
+      type: 'hls',
+      cameraIndexCode:id
+    })
+    if(code===200){
+      src.value = data.url
+      isCollect.value = data.isCollect
+      isDiy.value = data.isDiy
+      cameraIndexCode.value = id
+      videoShow.value = true
+    }
+  }
+  const handleCollect = async (id, status) => {
+    await postVideoCollectApi({
+      cameraIndexCode:id,
+      isCollect: status == 0 ? 1 : 0
+    })
+    clearHlsRefs()
+    params.pageNum = 1
+    getVideoList()
+    pubSub.publish('videoCollect')
+  }
+  const handleClose = () => {
+    clearHlsRefs()
+    modelValue.value = false
+  }
+  const clearHlsRefs = () => {
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+      hlsRefs = []
+    }
+  }
+  const pageNumChange = () => {
+	  cond.value = false
+    clearHlsRefs()
+    list.value = []
+    getVideoList()
+  }
+  let cond = ref(false)
+  const getVideoList = async () => {
+    let res = await getVideoEventApi(props.scenicSpotId);
+    list.value = res.data
+	setTimeout(()=>{cond.value = true},1500)
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        getVideoEventObjImgApi(item.objId).then(res=>{
+          list.value[index].imgurl = res.data.url
+        });
+      })
+    })
+  }
+
+  onMounted(() => {
+	  onVideoCollect()
+  })
+  onUnmounted(() => {})
+</script>
+
+<style scoped lang="scss">
+  .z-dialog {
+    :deep(.el-dialog) {
+      width: vw(2100);
+      padding: vw(8);
+      background-image: url('@/assets/images/dialog-bg.png') !important;
+      background-size: 100% 100%;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: vw(4); /* 滚动条的宽度 */
+      }
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
+      }
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+      margin-top: vw(10);
+      text-align: center;
+    }
+    :deep(.el-dialog__title) {
+      color: #fff;
+      font-weight: bold;
+    }
+  }
+  .item-title{
+    font-weight: 400;
+    z-index: 99;
+    height: vw(50);
+    padding: vw(10);
+    font-size: vw(24);
+    color: #ffffff;
+    position: absolute;
+    left: 3%;
+    background-image: url('@/assets/images/unfollow.png');
+    background-size: 100% 100%;
+  }
+  .no-data{
+	  height:vh(860);
+	  line-height: vh(860);
+	  text-align: center;
+	  font-size:vw(30);
+	  color:#02f9fa;
+  }
+  .cursorPointer{
+    cursor: pointer
+  }
+  .list {
+    //margin-top: vw(5);
+    gap: vw(8);
+    height: vh(860);
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+	padding:vw(10);
+    .item {
+      position: relative;
+      width: 33%;
+      height: vh(400);
+      padding: vw(12);
+	  margin-top:vh(20);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/item-primary.png');
+      background-size: 100% 100%;
+      &-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      > p {
+        position: absolute;
+        bottom: vw(12);
+        width: calc(100% - vw(24));
+        padding: vw(10) 0;
+        background: rgba(4, 30, 69, 0.72);
+        > span {
+          padding-left: vw(10);
+          font-weight: 400;
+          font-size: vw(14);
+          line-height: vw(14);
+          color: #ffffff;
+        }
+      }
+      &-unfollow {
+        cursor: pointer;
+        display: none;
+        position: absolute;
+        right: vw(4);
+        top: vw(4);
+        z-index: 99;
+        width: vw(64);
+        height: vw(30);
+        text-align: center;
+        line-height: vw(30);
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        background-image: url('@/assets/images/unfollow.png');
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .pagination {
+    padding-top: vw(20);
+    margin-right: vw(20);
+    padding-bottom: vw(20);
+    display: flex;
+    justify-content: flex-end;
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vw(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>