diff --git a/.env.development b/.env.development
index 930896b..3a7630b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 安全生产智慧监管系统
+VITE_APP_TITLE = 安全生产智慧监管系统-机密
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://111.198.10.15:22109
 

diff --git a/.env.development b/.env.development
index 930896b..3a7630b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 安全生产智慧监管系统
+VITE_APP_TITLE = 安全生产智慧监管系统-机密
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://111.198.10.15:22109
 
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index a735a1f..98009a1 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -112,6 +112,8 @@
   }).then((res) => {
     if (res.code === 200) {
       ElMessage.success(res.data || '设置成功')
+      // location.reload()
+      document.getElementById('refresh')?.click()
     }
     loading.close()
   }).catch(() => {
@@ -156,7 +158,7 @@
           <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+      <span id="refresh" v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
         <el-icon>
           <svg-icon name="icon-refresh" />
         </el-icon>

diff --git a/.env.development b/.env.development
index 930896b..3a7630b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 安全生产智慧监管系统
+VITE_APP_TITLE = 安全生产智慧监管系统-机密
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://111.198.10.15:22109
 
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index a735a1f..98009a1 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -112,6 +112,8 @@
   }).then((res) => {
     if (res.code === 200) {
       ElMessage.success(res.data || '设置成功')
+      // location.reload()
+      document.getElementById('refresh')?.click()
     }
     loading.close()
   }).catch(() => {
@@ -156,7 +158,7 @@
           <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+      <span id="refresh" v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
         <el-icon>
           <svg-icon name="icon-refresh" />
         </el-icon>
diff --git a/src/views/alarm/accidentTracing/list.vue b/src/views/alarm/accidentTracing/list.vue
index df4a98d..9ad7a7d 100644
--- a/src/views/alarm/accidentTracing/list.vue
+++ b/src/views/alarm/accidentTracing/list.vue
@@ -1,7 +1,10 @@
 <!-- 安全隐患报警管理 -->
 <script lang="ts" setup name="IdentifyResultPage">
 import dayjs from 'dayjs'
+import { ElLoading, ElMessage } from 'element-plus'
+import jessibuca from '@/views/bigScreen/jessibuca.vue'
 import { getSecurityAlarmList } from '@/api/alarm/securityAlarm/securityAlarmList'
+import { getMediaStream, getMediaToken, querySceneReplayList, startReplay, endReplay } from '@/api/monitor/media'
 import img from '@/assets/image/loading.gif'
 // 获取页面高度
 const pageHeight = ref(window.innerHeight - 260)
@@ -12,6 +15,7 @@
 const systemType = ref('') // 系统类型gm、sm
 const showType = ref('1') // 报警记录1、历史视频2
 const publicPath = window.location.href.split('#')[0]
+const jessibucaRef = ref()
 const loadingTable = ref(true)
 const total = ref(0)
 const list = ref<any[]>([])
@@ -81,6 +85,12 @@
 const handleCurrentChange = (value: number) => {
   listQuery.value.offset = value
   fetchData()
+  // 历史视频在切换页码的时候上一页的视频要销毁
+  if (showType.value === '2') {
+    jessibucaRef.value.forEach((item: any) => {
+      item.destroy()
+    })
+  }
 }
 
 // 搜索
@@ -93,11 +103,143 @@
   const width = window.innerWidth * 0.22
   imgHeight.value = (9 * width) / 16
   systemType.value = window.localStorage.getItem('systemType')!
+  if (systemType.value === 'sm') {
+    fetchMediaToken()
+  }
 })
 window.addEventListener('resize', () => {
   const width = window.innerWidth * 0.22
   imgHeight.value = (9 * width) / 16
 })
+
+const changeShowType = (value: string) => {
+  console.log('切换报警记录、历史视频按钮', value)
+  showType.value = value
+  list.value = []
+  console.log('showType.value', showType.value)
+  if (showType.value === '2') {
+    listQuery.value.limit = 6
+  }
+  else {
+    listQuery.value.limit = 20
+  }
+  fetchData()
+}
+
+// -----------------------------------------历史视频-------------------------------------------
+const mediaToken = ref('') // 流媒体Token
+const mediaUrl = ref()
+const palyIndex = ref() // 播放第几个回放
+const lastCurrentStream: any = ref() // 上一个在播放的流
+const mediaRecordList: any = ref([]) // 回放列表
+// 获取流媒体Token
+function fetchMediaToken() {
+  // 获取流媒体token
+  getMediaToken().then((res: any) => {
+    mediaToken.value = res.data
+  })
+}
+function searchBackList1(row: any, index: number) {
+  palyIndex.value = index
+  const url = 'http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000003.live.flv'
+  console.log(jessibucaRef.value)
+  console.log(palyIndex.value)
+  console.log(jessibucaRef.value[palyIndex.value])
+  if (lastCurrentStream.value && lastCurrentStream.value.stream) { // 有正在播的流,就先停止他
+    const stopParams = {
+      deviceId: lastCurrentStream.value.deviceId, // 设备国标编号
+      channelId: lastCurrentStream.value.channelId, // 通道国标编号
+      stream: lastCurrentStream.value.stream, // 开始播放时返回的stream标识
+      accessToken: mediaToken.value,
+    }
+    endReplay(stopParams).then(() => {
+      console.log('上一个流停播成功')
+    }).catch(() => console.log('上一个流停播失败'))
+  }
+  jessibucaRef.value[palyIndex.value].play(url)
+}
+/**
+ * 查询回放录像列表
+ * @param type tableClick点击查询按钮
+ */
+function searchBackList(row: any, index: number) {
+  palyIndex.value = index
+  const currentDate = dayjs(row.alarmTime, 'YYYY-MM-DD HH:mm:ss')
+  const startTime = currentDate.subtract(2, 'minute').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = currentDate.add(2, 'minute').format('YYYY-MM-DD HH:mm:ss')
+  const params = {
+    startTime, // 开始时间
+    endTime, // 结束时间
+    deviceId: row.cameraIndexCode, // 监控点唯一标识
+    channelId: row.nvrIndexCode,
+    accessToken: mediaToken.value,
+  }
+  mediaUrl.value = ''
+  querySceneReplayList(params).then((res: any) => {
+    if (res && res.data && res.data.recordList && res.data.recordList.length) {
+      mediaRecordList.value = res.data.recordList.reverse()
+      handlePlayBack(mediaRecordList.value[0], row) // 默认播放第一个视频
+    }
+    else {
+      // console.log('上一个正在播的流的信息', list.value[palyIndex.value].stopParams)
+      // if (list.value[palyIndex.value].stopParams) {
+      //   stopPlayBack(list.value[palyIndex.value].stopParams)
+      // }
+
+      // searchBackList1(row, index)
+      ElMessage.warning('此报警时间前后未查询到场景回放!')
+      mediaRecordList.value = []
+    }
+  }).catch(() => {
+    ElMessage.warning('获取流媒体场景回放列表失败!')
+  })
+}
+
+// 停止播放
+function stopPlayBack(stopParams: any) {
+  endReplay(stopParams).then(() => {
+    console.log('上一个流停播成功')
+  }).catch(() => console.log('上一个流停播失败'))
+}
+
+// 播放回放
+function handlePlayBack(item: any, row: any) {
+  const startParams = {
+    startTime: item.startTime, // 开始时间
+    endTime: item.endTime, // 结束时间
+    deviceId: row.cameraIndexCode, // 监控点唯一标识
+    channelId: row.nvrIndexCode,
+    accessToken: mediaToken.value,
+  }
+
+  console.log('上一个正在播的流的信息', list.value[palyIndex.value].stopParams)
+  if (list.value[palyIndex.value].stopParams) {
+    stopPlayBack(list.value[palyIndex.value].stopParams)
+  }
+  startReplay(startParams).then((res) => {
+    console.log('取流成功！')
+    if (res && res.data) {
+      mediaUrl.value = res.data.flv
+      jessibucaRef.value[palyIndex.value].play(res.data.flv)
+      list.value = list.value.map((item, index) => {
+        if (palyIndex.value === index) {
+          item.stopParams = {
+            deviceId: lastCurrentStream.value.deviceId, // 设备国标编号
+            channelId: lastCurrentStream.value.channelId, // 通道国标编号
+            stream: lastCurrentStream.value.stream, // 开始播放时返回的stream标识
+            accessToken: mediaToken.value,
+          }
+        }
+        return item
+      })
+    }
+    else {
+      ElMessage.warning('取流失败！')
+    }
+  }).catch(() => {
+    ElMessage.warning('未获取到流！')
+  })
+}
 </script>
 
 <template>
@@ -105,14 +247,14 @@
   <app-container>
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.areaName" placeholder="所属区域" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.areaName" placeholder="所属区域" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
         <!-- <dept-select v-model="listQuery.deptId" placeholder="所属单位" :dept-show="true" style="width: 200px;" @change="search"/> -->
-        <el-input v-model="listQuery.deptName" placeholder="所属单位" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.deptName" placeholder="所属单位" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
-        <el-input v-model="listQuery.deviceName" placeholder="相机" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.deviceName" placeholder="相机" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
         <el-date-picker
@@ -122,34 +264,82 @@
       </search-item>
     </search-area>
     <div v-loading="loadingTable" class="main-areaName">
-      <el-radio-group v-if="systemType === 'sm'" v-model="showType" style="margin-bottom: 10px;">
-        <el-radio-button label="1">报警记录</el-radio-button>
-        <el-radio-button label="2">历史视频</el-radio-button>
+      <el-radio-group v-if="systemType === 'sm'" v-model="showType" style="margin-bottom: 10px;" @change="changeShowType">
+        <el-radio-button label="1">
+          报警记录
+        </el-radio-button>
+        <el-radio-button label="2">
+          历史视频
+        </el-radio-button>
       </el-radio-group>
-
-      <el-row v-if="list.length" :gutter="20" :style="{ height: `${pageHeight}px` }">
-        <el-col v-for="(item, index) in list" :key="index" :span="6" style="margin-bottom: 10px;">
-          <el-card :body-style="{ padding: '10px' }">
-            <el-image v-if="item.url" :src="item.url" :preview-src-list="[item.url]" class="image" />
-            <div style="padding: 14px;">
-              <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
-              <div style="margin-top: 6px;font-size: 14px;">{{ item.deviceName }}</div>
-              <div class="bottom clearfix">
-                <div class="time" style="margin-bottom: 6px;">{{ item.areaName }}</div>
-                <div class="time" style="margin-bottom: 6px;">{{ item.deptName }}</div>
-                <div class="time">{{ item.alarmTime }}</div>
-                <!-- <el-button type="text" class="button">查看详情</el-button> -->
+      <!-- 报警记录 -->
+      <div v-if="list.length && showType === '1'">
+        <el-row :gutter="20" :style="{ height: `${pageHeight}px` }">
+          <el-col v-for="(item, index) in list" :key="index" :span="6" style="margin-bottom: 10px;">
+            <el-card :body-style="{ padding: '10px' }">
+              <el-image v-if="item.url" :src="item.url" :preview-src-list="[item.url]" class="image" />
+              <div style="padding: 14px;">
+                <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
+                <div style="margin-top: 6px;font-size: 14px;">
+                  {{ item.deviceName }}
+                </div>
+                <div class="bottom clearfix">
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.areaName }}
+                  </div>
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.deptName }}
+                  </div>
+                  <div class="time">
+                    {{ item.alarmTime }}
+                  </div>
+                  <!-- <el-button type="text" class="button">查看详情</el-button> -->
+                </div>
               </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-empty v-else description="暂无数据" :size="200" :style="{ height: `${pageHeight}px` }" />
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="showType === '2' && list.length">
+        <el-row :gutter="20" :style="{ height: `${pageHeight}px` }">
+          <el-col v-for="(item, index) in list" :key="index" :span="8" style="margin-bottom: 10px;">
+            <el-card :body-style="{ padding: '10px' }">
+              <jessibuca
+                v-if="index < 6"
+                :id="`container${index + 1}`"
+                :key="index"
+                ref="jessibucaRef"
+                :show-operate-btns="false"
+                style="width: 100%; aspect-ratio: 16 / 9"
+              />
+              <div style="padding: 14px;">
+                <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
+                <div style="margin-top: 6px;font-size: 14px;">
+                  {{ item.deviceName }}
+                </div>
+                <div class="bottom clearfix">
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.areaName }}
+                  </div>
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.deptName }}
+                  </div>
+                  <div class="time">
+                    {{ item.alarmTime }}
+                  </div>
+                  <el-button type="text" class="button" @click="searchBackList(item, index)">双击播放</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <el-empty v-if="!list.length" description="暂无数据" :size="200" :style="{ height: `${pageHeight}px` }" />
     </div>
     <!-- 分页 -->
-    <div style="width: 100%;margin: 10px auto;height: 32px;">
+    <div v-if="list.length" style="width: 100%;margin: 10px auto;height: 32px;">
       <el-pagination
-        :current-page="listQuery.offset" :page-sizes="[4, 8, 12, 16, 20]" :page-size="listQuery.limit"
+        :current-page="listQuery.offset" :page-sizes="showType === '2' ? [6] : [4, 8, 12, 16, 20]" :page-size="showType === '2' ? 6 : listQuery.limit"
         :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />

diff --git a/.env.development b/.env.development
index 930896b..3a7630b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 安全生产智慧监管系统
+VITE_APP_TITLE = 安全生产智慧监管系统-机密
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = http://111.198.10.15:22109
 
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index a735a1f..98009a1 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -112,6 +112,8 @@
   }).then((res) => {
     if (res.code === 200) {
       ElMessage.success(res.data || '设置成功')
+      // location.reload()
+      document.getElementById('refresh')?.click()
     }
     loading.close()
   }).catch(() => {
@@ -156,7 +158,7 @@
           <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+      <span id="refresh" v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
         <el-icon>
           <svg-icon name="icon-refresh" />
         </el-icon>
diff --git a/src/views/alarm/accidentTracing/list.vue b/src/views/alarm/accidentTracing/list.vue
index df4a98d..9ad7a7d 100644
--- a/src/views/alarm/accidentTracing/list.vue
+++ b/src/views/alarm/accidentTracing/list.vue
@@ -1,7 +1,10 @@
 <!-- 安全隐患报警管理 -->
 <script lang="ts" setup name="IdentifyResultPage">
 import dayjs from 'dayjs'
+import { ElLoading, ElMessage } from 'element-plus'
+import jessibuca from '@/views/bigScreen/jessibuca.vue'
 import { getSecurityAlarmList } from '@/api/alarm/securityAlarm/securityAlarmList'
+import { getMediaStream, getMediaToken, querySceneReplayList, startReplay, endReplay } from '@/api/monitor/media'
 import img from '@/assets/image/loading.gif'
 // 获取页面高度
 const pageHeight = ref(window.innerHeight - 260)
@@ -12,6 +15,7 @@
 const systemType = ref('') // 系统类型gm、sm
 const showType = ref('1') // 报警记录1、历史视频2
 const publicPath = window.location.href.split('#')[0]
+const jessibucaRef = ref()
 const loadingTable = ref(true)
 const total = ref(0)
 const list = ref<any[]>([])
@@ -81,6 +85,12 @@
 const handleCurrentChange = (value: number) => {
   listQuery.value.offset = value
   fetchData()
+  // 历史视频在切换页码的时候上一页的视频要销毁
+  if (showType.value === '2') {
+    jessibucaRef.value.forEach((item: any) => {
+      item.destroy()
+    })
+  }
 }
 
 // 搜索
@@ -93,11 +103,143 @@
   const width = window.innerWidth * 0.22
   imgHeight.value = (9 * width) / 16
   systemType.value = window.localStorage.getItem('systemType')!
+  if (systemType.value === 'sm') {
+    fetchMediaToken()
+  }
 })
 window.addEventListener('resize', () => {
   const width = window.innerWidth * 0.22
   imgHeight.value = (9 * width) / 16
 })
+
+const changeShowType = (value: string) => {
+  console.log('切换报警记录、历史视频按钮', value)
+  showType.value = value
+  list.value = []
+  console.log('showType.value', showType.value)
+  if (showType.value === '2') {
+    listQuery.value.limit = 6
+  }
+  else {
+    listQuery.value.limit = 20
+  }
+  fetchData()
+}
+
+// -----------------------------------------历史视频-------------------------------------------
+const mediaToken = ref('') // 流媒体Token
+const mediaUrl = ref()
+const palyIndex = ref() // 播放第几个回放
+const lastCurrentStream: any = ref() // 上一个在播放的流
+const mediaRecordList: any = ref([]) // 回放列表
+// 获取流媒体Token
+function fetchMediaToken() {
+  // 获取流媒体token
+  getMediaToken().then((res: any) => {
+    mediaToken.value = res.data
+  })
+}
+function searchBackList1(row: any, index: number) {
+  palyIndex.value = index
+  const url = 'http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000003.live.flv'
+  console.log(jessibucaRef.value)
+  console.log(palyIndex.value)
+  console.log(jessibucaRef.value[palyIndex.value])
+  if (lastCurrentStream.value && lastCurrentStream.value.stream) { // 有正在播的流,就先停止他
+    const stopParams = {
+      deviceId: lastCurrentStream.value.deviceId, // 设备国标编号
+      channelId: lastCurrentStream.value.channelId, // 通道国标编号
+      stream: lastCurrentStream.value.stream, // 开始播放时返回的stream标识
+      accessToken: mediaToken.value,
+    }
+    endReplay(stopParams).then(() => {
+      console.log('上一个流停播成功')
+    }).catch(() => console.log('上一个流停播失败'))
+  }
+  jessibucaRef.value[palyIndex.value].play(url)
+}
+/**
+ * 查询回放录像列表
+ * @param type tableClick点击查询按钮
+ */
+function searchBackList(row: any, index: number) {
+  palyIndex.value = index
+  const currentDate = dayjs(row.alarmTime, 'YYYY-MM-DD HH:mm:ss')
+  const startTime = currentDate.subtract(2, 'minute').format('YYYY-MM-DD HH:mm:ss')
+  const endTime = currentDate.add(2, 'minute').format('YYYY-MM-DD HH:mm:ss')
+  const params = {
+    startTime, // 开始时间
+    endTime, // 结束时间
+    deviceId: row.cameraIndexCode, // 监控点唯一标识
+    channelId: row.nvrIndexCode,
+    accessToken: mediaToken.value,
+  }
+  mediaUrl.value = ''
+  querySceneReplayList(params).then((res: any) => {
+    if (res && res.data && res.data.recordList && res.data.recordList.length) {
+      mediaRecordList.value = res.data.recordList.reverse()
+      handlePlayBack(mediaRecordList.value[0], row) // 默认播放第一个视频
+    }
+    else {
+      // console.log('上一个正在播的流的信息', list.value[palyIndex.value].stopParams)
+      // if (list.value[palyIndex.value].stopParams) {
+      //   stopPlayBack(list.value[palyIndex.value].stopParams)
+      // }
+
+      // searchBackList1(row, index)
+      ElMessage.warning('此报警时间前后未查询到场景回放!')
+      mediaRecordList.value = []
+    }
+  }).catch(() => {
+    ElMessage.warning('获取流媒体场景回放列表失败!')
+  })
+}
+
+// 停止播放
+function stopPlayBack(stopParams: any) {
+  endReplay(stopParams).then(() => {
+    console.log('上一个流停播成功')
+  }).catch(() => console.log('上一个流停播失败'))
+}
+
+// 播放回放
+function handlePlayBack(item: any, row: any) {
+  const startParams = {
+    startTime: item.startTime, // 开始时间
+    endTime: item.endTime, // 结束时间
+    deviceId: row.cameraIndexCode, // 监控点唯一标识
+    channelId: row.nvrIndexCode,
+    accessToken: mediaToken.value,
+  }
+
+  console.log('上一个正在播的流的信息', list.value[palyIndex.value].stopParams)
+  if (list.value[palyIndex.value].stopParams) {
+    stopPlayBack(list.value[palyIndex.value].stopParams)
+  }
+  startReplay(startParams).then((res) => {
+    console.log('取流成功！')
+    if (res && res.data) {
+      mediaUrl.value = res.data.flv
+      jessibucaRef.value[palyIndex.value].play(res.data.flv)
+      list.value = list.value.map((item, index) => {
+        if (palyIndex.value === index) {
+          item.stopParams = {
+            deviceId: lastCurrentStream.value.deviceId, // 设备国标编号
+            channelId: lastCurrentStream.value.channelId, // 通道国标编号
+            stream: lastCurrentStream.value.stream, // 开始播放时返回的stream标识
+            accessToken: mediaToken.value,
+          }
+        }
+        return item
+      })
+    }
+    else {
+      ElMessage.warning('取流失败！')
+    }
+  }).catch(() => {
+    ElMessage.warning('未获取到流！')
+  })
+}
 </script>
 
 <template>
@@ -105,14 +247,14 @@
   <app-container>
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.areaName" placeholder="所属区域" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.areaName" placeholder="所属区域" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
         <!-- <dept-select v-model="listQuery.deptId" placeholder="所属单位" :dept-show="true" style="width: 200px;" @change="search"/> -->
-        <el-input v-model="listQuery.deptName" placeholder="所属单位" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.deptName" placeholder="所属单位" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
-        <el-input v-model="listQuery.deviceName" placeholder="相机" clearable style="width: 200px;" @change="search"/>
+        <el-input v-model="listQuery.deviceName" placeholder="相机" clearable style="width: 200px;" @change="search" />
       </search-item>
       <search-item>
         <el-date-picker
@@ -122,34 +264,82 @@
       </search-item>
     </search-area>
     <div v-loading="loadingTable" class="main-areaName">
-      <el-radio-group v-if="systemType === 'sm'" v-model="showType" style="margin-bottom: 10px;">
-        <el-radio-button label="1">报警记录</el-radio-button>
-        <el-radio-button label="2">历史视频</el-radio-button>
+      <el-radio-group v-if="systemType === 'sm'" v-model="showType" style="margin-bottom: 10px;" @change="changeShowType">
+        <el-radio-button label="1">
+          报警记录
+        </el-radio-button>
+        <el-radio-button label="2">
+          历史视频
+        </el-radio-button>
       </el-radio-group>
-
-      <el-row v-if="list.length" :gutter="20" :style="{ height: `${pageHeight}px` }">
-        <el-col v-for="(item, index) in list" :key="index" :span="6" style="margin-bottom: 10px;">
-          <el-card :body-style="{ padding: '10px' }">
-            <el-image v-if="item.url" :src="item.url" :preview-src-list="[item.url]" class="image" />
-            <div style="padding: 14px;">
-              <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
-              <div style="margin-top: 6px;font-size: 14px;">{{ item.deviceName }}</div>
-              <div class="bottom clearfix">
-                <div class="time" style="margin-bottom: 6px;">{{ item.areaName }}</div>
-                <div class="time" style="margin-bottom: 6px;">{{ item.deptName }}</div>
-                <div class="time">{{ item.alarmTime }}</div>
-                <!-- <el-button type="text" class="button">查看详情</el-button> -->
+      <!-- 报警记录 -->
+      <div v-if="list.length && showType === '1'">
+        <el-row :gutter="20" :style="{ height: `${pageHeight}px` }">
+          <el-col v-for="(item, index) in list" :key="index" :span="6" style="margin-bottom: 10px;">
+            <el-card :body-style="{ padding: '10px' }">
+              <el-image v-if="item.url" :src="item.url" :preview-src-list="[item.url]" class="image" />
+              <div style="padding: 14px;">
+                <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
+                <div style="margin-top: 6px;font-size: 14px;">
+                  {{ item.deviceName }}
+                </div>
+                <div class="bottom clearfix">
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.areaName }}
+                  </div>
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.deptName }}
+                  </div>
+                  <div class="time">
+                    {{ item.alarmTime }}
+                  </div>
+                  <!-- <el-button type="text" class="button">查看详情</el-button> -->
+                </div>
               </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-empty v-else description="暂无数据" :size="200" :style="{ height: `${pageHeight}px` }" />
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="showType === '2' && list.length">
+        <el-row :gutter="20" :style="{ height: `${pageHeight}px` }">
+          <el-col v-for="(item, index) in list" :key="index" :span="8" style="margin-bottom: 10px;">
+            <el-card :body-style="{ padding: '10px' }">
+              <jessibuca
+                v-if="index < 6"
+                :id="`container${index + 1}`"
+                :key="index"
+                ref="jessibucaRef"
+                :show-operate-btns="false"
+                style="width: 100%; aspect-ratio: 16 / 9"
+              />
+              <div style="padding: 14px;">
+                <span style="font-weight: 600;">{{ item.recognitionTypeName || item.sceneName }}</span>
+                <div style="margin-top: 6px;font-size: 14px;">
+                  {{ item.deviceName }}
+                </div>
+                <div class="bottom clearfix">
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.areaName }}
+                  </div>
+                  <div class="time" style="margin-bottom: 6px;">
+                    {{ item.deptName }}
+                  </div>
+                  <div class="time">
+                    {{ item.alarmTime }}
+                  </div>
+                  <el-button type="text" class="button" @click="searchBackList(item, index)">双击播放</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <el-empty v-if="!list.length" description="暂无数据" :size="200" :style="{ height: `${pageHeight}px` }" />
     </div>
     <!-- 分页 -->
-    <div style="width: 100%;margin: 10px auto;height: 32px;">
+    <div v-if="list.length" style="width: 100%;margin: 10px auto;height: 32px;">
       <el-pagination
-        :current-page="listQuery.offset" :page-sizes="[4, 8, 12, 16, 20]" :page-size="listQuery.limit"
+        :current-page="listQuery.offset" :page-sizes="showType === '2' ? [6] : [4, 8, 12, 16, 20]" :page-size="showType === '2' ? 6 : listQuery.limit"
         :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
diff --git a/src/views/bigScreen/jessibuca.vue b/src/views/bigScreen/jessibuca.vue
index 715688e..d155306 100644
--- a/src/views/bigScreen/jessibuca.vue
+++ b/src/views/bigScreen/jessibuca.vue
@@ -4,15 +4,20 @@
   id: {
     type: String,
   },
+  showOperateBtns: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // 定义变量
-const showOperateBtns = false // 是否显示按钮
+// const showOperateBtns = false // 是否显示按钮
 const forceNoOffscreen = true
 let jessibuca = null
 
 // 创建播放器的函数
-function create(id) {
+function create() {
+  console.log('执行jessibuca初始化', props.id)
   const $container = document.getElementById(props.id)
   jessibuca = new Jessibuca({
     container: $container, // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
@@ -21,15 +26,15 @@
     loadingText: '视频加载中', // 加载过程中文案
     useMSE: true, // 是否开启MediaSource硬解码 视频编码只支持H.264视频（Safari on iOS不支持）不支持 forceNoOffscreen 为 false (开启离屏渲染)
     useWCS: false, // 是否开启Webcodecs硬解码 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境) 支持 forceNoOffscreen 为 false （开启离屏渲染)
-    debug: true, //  是否开启控制台调试
+    debug: false, //  是否开启控制台调试
     showBandwidth: false, // 是否显示显示网速
     loadingTimeout: 60, // flv地址请求超时时间
     operateBtns: {
       // 配置操作按钮
-      fullscreen: showOperateBtns, // 是否显示全屏按钮
-      screenshot: showOperateBtns, // 是否显示截图按钮
-      play: showOperateBtns, // 是否显示播放暂停按钮
-      audio: false, // 是否显示声音按钮
+      fullscreen: props.showOperateBtns, // 是否显示全屏按钮
+      screenshot: false, // 是否显示截图按钮
+      play: props.showOperateBtns, // 是否显示播放暂停按钮
+      audio: props.showOperateBtns, // 是否显示声音按钮
       recorder: false, // 是否显示录制按
     },
     forceNoOffscreen, // 是否不使用离屏模式（提升渲染能力）
@@ -61,6 +66,7 @@
 // 获取视频流地址并播放视频
 function play(playUrl = '') {
   console.log('播放视频路径: ', playUrl)
+  console.log('jessibuca: ', jessibuca)
   // 播放视频
   playUrl && jessibuca.play(playUrl)
 }
@@ -83,7 +89,7 @@
 })
 
 // ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ play })
+defineExpose({ play, destroy })
 </script>
 
 <template>