告警

src/api/pms/video/channel.ts

@@ -43,7 +43,7 @@ export function delChannel(channelId) {
 // 开始播放
 export function startPlay(deviceId, channelId) {
   return request.get({
-    url: '/rq/sip/player/play/' + deviceId + '/' + channelId  // /rq/sip/player/play
+    url: '/rq/sip/player/play/' + deviceId + '/' + channelId // /rq/sip/player/play
   })
 }
 
@@ -112,3 +112,10 @@ export function listRelDeviceOrScene(query) {
     params: query
   })
 }
+
+// 告警图片
+export function getAlarmPic(id) {
+  return request.download({
+    url: '/rq/iot-video-alarm/pic' + '/' + id
+  })
+}

src/views/pms/video_center/warn/index.vue

@@ -111,19 +111,21 @@
 
         <el-table-column label="图片" align="center" width="150">
           <template #default="{ row }">
-            <el-image
-              v-if="row.url"
-              :src="row.url"
-              :preview-src-list="[row.url]"
-              preview-teleported
-              fit="cover"
-              style="width: 80px; height: 50px; border-radius: 4px"
-            />
+            <el-link v-if="row.imageUrl" type="primary" @click="openDetail(row.id)">查看</el-link>
             <span v-else>无图片</span>
           </template>
         </el-table-column>
       </el-table>
 
+      <el-dialog v-model="dialogTableVisible" title="告警图片" width="800">
+        <el-image
+          v-if="dialogTableVisible"
+          :src="currentImageUrl"
+          style="width: 100%; height: 100%"
+          fit="contain"
+        />
+      </el-dialog>
+
       <!-- 分页 -->
       <el-pagination
         class="float-right mb-5"
@@ -148,7 +150,7 @@ import { ArrowDown } from '@element-plus/icons-vue'
 import { warnList } from '@/api/pms/video/warn'
 import { DICT_TYPE, getDictLabel, getStrDictOptions } from '@/utils/dict'
 import { Search, Refresh } from '@element-plus/icons-vue'
-import { listChannel } from '@/api/pms/video/channel'
+import { listChannel, getAlarmPic } from '@/api/pms/video/channel'
 
 // 响应式数据
 const loading = ref(false)
@@ -175,10 +177,11 @@ const initTableData = async () => {
   loading.value = true
 
   const res = await warnList({
-    pageNum: pagination.currentPage,
+    pageNo: pagination.currentPage,
     pageSize: pagination.pageSize,
     deviceName: filterForm.deviceName,
-    channelName: filterForm.channelName
+    channelName: filterForm.channelName,
+    eventType: filterForm.eventType
   })
 
   tableData.value = res.list
@@ -222,6 +225,24 @@ const handleCurrentChange = (page) => {
   initTableData()
 }
 
+let currentImageUrl = ref('')
+let dialogTableVisible = ref(false)
+const openDetail = async (id) => {
+  const res = await getAlarmPic(id)
+  console.log(res)
+
+  // // 2. 将流转换为 Blob
+  // const blob = await res.blob()
+
+  // // 3. 创建 Blob URL
+  const blobUrl = URL.createObjectURL(res)
+  currentImageUrl.value = blobUrl
+
+  console.log(blobUrl)
+
+  dialogTableVisible.value = true
+}
+
 let channelList = ref([])
 // 页面加载时初始化数据
 onMounted(() => {