Merge remote-tracking branch 'origin/master'

rtsp-vue/src/api/video/alarm.js

@@ -21,8 +21,8 @@ export function getAlarm(alarmId) {
 export function handleAlarm(data) {
   return request({
     url: '/video/alarm/handle',
-    method: 'put',
-    data: data
+    method: 'post',
+    params: data
   })
 }
 
@@ -30,7 +30,7 @@ export function handleAlarm(data) {
 export function batchHandleAlarm(data) {
   return request({
     url: '/video/alarm/batchHandle',
-    method: 'put',
+    method: 'post',
     data: data
   })
 }

rtsp-vue/src/views/index.vue

@@ -15,19 +15,25 @@
     </el-form>
 
 
-    <div style="display: flex;">
+    <div style="display: flex; gap: 20px">
       <div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
-        <div class="card-image">
-          <img :src="item.url" :alt="item.url" style="width: 100%; height: 100%;" />
-          <!-- <div style="width: 100%; height: 100%;">
-              {{ item.url }}
-            </div> -->
+        <el-row>
+          <el-col :span="16">
+            <h3 style="display: flex; align-items: center;"><img :src="DeviceImage" alt="" style="width: 20px; height: 20px; margin-right: 10px;"> {{ item.ip }}</h3>
+            <div class="li" style="display: flex; align-items: center;">设备分类：<dict-tag :options="device_type" :value="item.type" /></div>
+            <div class="li" style="display: flex; align-items: center;">用户名：{{ item.username ?? '-' }}</div>
+          </el-col>
+          <el-col :span="8">
+            <img :src="CameraImage" alt="设备图片" style="width: 100%;" />
+          </el-col>
+        </el-row>
+        <!-- <div class="card-image">
+          <img :src="DeviceImage" :alt="item.url" style="width: 100%; height: 100%;" />
         </div>
         <div class="category"><dict-tag :options="device_type" :value="item.type" /></div>
         <div class="heading">
           {{ item.ip }}
-          <!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> -->
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -89,6 +95,8 @@ import { listDevice } from "@/api/video/device";
 import { listInspectionRecord } from "@/api/video/insRecord";
 import { listInspection } from "@/api/video/inspection";
 import { listAlarm } from "@/api/video/alarm";
+import DeviceImage from "@/assets/images/device.png";
+import CameraImage from "@/assets/images/camera.png";
 
 const { proxy } = getCurrentInstance();
 const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
@@ -186,19 +194,17 @@ getList();
 <style scoped>
 /* From Uiverse.io by alexmaracinaru */
 .card {
-  width: 190px;
-  background: white;
+  width: 300px;
   padding: .4em;
-  border-radius: 6px;
+  border-radius: 0;
+  border: 1px solid #e0e0e0;
 }
 
 .card-image {
-  background-color: rgb(236, 236, 236);
   width: 100%;
   height: 130px;
   text-align: center;
   word-break: break-all;
-  border-radius: 6px 6px 0 0;
 }
 
 .card-image:hover {

rtsp-vue/src/views/video/alarm/index.vue

@@ -84,10 +84,9 @@
 
     <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="报警ID" align="center" prop="alarmId" />
       <el-table-column label="任务名称" align="center" prop="taskName" />
       <el-table-column label="设备名称" align="center" prop="deviceName" />
-      <el-table-column label="报警类型" align="center" prop="alarmType" />
+      <!-- <el-table-column label="报警类型" align="center" prop="alarmType" /> -->
       <el-table-column label="报警级别" align="center" prop="alarmLevel">
         <template #default="scope">
           <el-tag v-if="scope.row.alarmLevel === '1'" type="info">低</el-tag>
@@ -109,20 +108,10 @@
             :src="scope.row.imagePath"
             :preview-src-list="[scope.row.imagePath]"
             fit="cover"
+            preview-teleported
           />
         </template>
       </el-table-column>
-      <el-table-column label="报警视频" align="center" prop="videoPath">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.videoPath"
-            link
-            type="primary"
-            icon="VideoPlay"
-            @click="handleView(scope.row)"
-          >播放</el-button>
-        </template>
-      </el-table-column>
       <el-table-column label="报警时间" align="center" prop="alarmTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@@ -200,10 +189,9 @@
     <!-- 查看详情对话框 -->
     <el-dialog title="报警详情" v-model="viewOpen" width="800px" append-to-body>
       <el-descriptions :column="2" border>
-        <el-descriptions-item label="报警ID">{{ viewForm.alarmId }}</el-descriptions-item>
         <el-descriptions-item label="任务名称">{{ viewForm.taskName }}</el-descriptions-item>
         <el-descriptions-item label="设备名称">{{ viewForm.deviceName }}</el-descriptions-item>
-        <el-descriptions-item label="报警类型">{{ viewForm.alarmType }}</el-descriptions-item>
+        <!-- <el-descriptions-item label="报警类型">{{ viewForm.alarmType }}</el-descriptions-item> -->
         <el-descriptions-item label="报警级别">
           <el-tag v-if="viewForm.alarmLevel === '1'" type="info">低</el-tag>
           <el-tag v-else-if="viewForm.alarmLevel === '2'" type="warning">中</el-tag>
@@ -233,15 +221,7 @@
           :src="viewForm.imagePath"
           :preview-src-list="[viewForm.imagePath]"
           fit="contain"
-        />
-      </div>
-      <div v-if="viewForm.videoPath" style="margin-top: 20px;">
-        <h4>报警视频：</h4>
-        <video
-          :src="viewForm.videoPath"
-          style="width: 100%; max-height: 420px; background: #000"
-          controls
-          preload="metadata"
+          preview-teleported
         />
       </div>
     </el-dialog>