代码提交

src/api/modules/blurDetection/BlurDetection.ts

@@ -0,0 +1,44 @@
+import http from '@/api';
+import { ADMIN_MODULE } from '@/api/helper/prefix';
+
+// 引入刚刚定义的类型
+import type {
+  BlurDetectionDTO,
+  BlurDetectionUpdateDTO,
+  BlurDetectionVO
+} from "@/api/types/blurDetection/BlurDetection";
+
+/**
+ * 新增模糊检测配置
+ * 对应后端: POST /blur-detection/add (@RequestBody)
+ * @param data BlurDetectionDTO
+ */
+export const addBlurDetectionApi = (data: BlurDetectionDTO) => {
+  return http.post<boolean>(ADMIN_MODULE + `/blur-detection/add`, data);
+};
+
+/**
+ * 更新配置信息
+ * 对应后端: PUT /blur-detection/update (@RequestBody)
+ * @param data BlurDetectionUpdateDTO
+ */
+export const updateBlurDetectionApi = (data: BlurDetectionUpdateDTO) => {
+  return http.put<boolean>(ADMIN_MODULE + `/blur-detection/update`, data);
+};
+
+/**
+ *  新增或者更新配置信息
+ */
+export const addOrUpdateBlurDetectionApi = (data: BlurDetectionDTO | BlurDetectionUpdateDTO) => {
+  return http.post<boolean>(ADMIN_MODULE + `/blur-detection/addOrUpdate`, data);
+}
+
+/**
+ * 根据摄像头id查询模糊配置
+ * 对应后端: GET /blur-detection/get (@RequestParam Long id)
+ * 注意：后端的业务逻辑是 eq(BlurDetection::getCameraId, id)，所以这里的 id 实际上是 cameraId
+ * @param params { id: number } 这里的 id 传摄像头的 ID
+ */
+export const getBlurDetectionByCameraIdApi = (params: { id: number }) => {
+  return http.get<BlurDetectionVO>(ADMIN_MODULE + `/blur-detection/get`, params);
+};

src/api/types/blurDetection/BlurDetection.ts

@@ -0,0 +1,44 @@
+/**
+ * 模糊检测 视图对象 (VO - 用于展示详情)
+ * 对应后端的 BlurDetectionVO
+ */
+export interface BlurDetectionVO {
+  /** 主键 */
+  id: number;
+  /** 摄像头id */
+  cameraId: number;
+  /** 摄像头名称 */
+  cameraName: string;
+  /** 开关：0-关闭 1-开启 */
+  enable: number;
+  /** 上报的url */
+  url: string;
+  /** 创建时间 */
+  createTime: string;
+  /** 更新时间 */
+  updateTime: string;
+}
+
+/**
+ * 新增模糊检测 数据传输对象 (DTO)
+ * 对应后端的 BlurDetectionDTO
+ */
+export interface BlurDetectionDTO {
+  /** 摄像头id */
+  cameraId: number;
+  /** 摄像头名称 */
+  cameraName?: string;
+  /** 开关：0-关闭 1-开启 */
+  enable?: number;
+  /** 上报的url */
+  url?: string;
+}
+
+/**
+ * 更新模糊检测 数据传输对象 (UpdateDTO)
+ * 对应后端的 BlurDetectionUpdateDTO
+ */
+export interface BlurDetectionUpdateDTO extends BlurDetectionDTO {
+  /** 主键ID (更新时必传) */
+  id: number;
+}

src/views/sysmonitortree/sysMonitorTree/index.vue

@@ -294,11 +294,27 @@
             </el-table-column>
             <el-table-column label="操作" fixed="right" width="250">
               <template #default="{row}">
+
                 <el-button size="small" type="primary" link @click="openPlayDialog(row)" :loading="playLoading">预览</el-button>
-                <el-button size="small" type="primary" link @click="openControlDialog(row)">控制</el-button>
-                <el-button size="small" v-if="row.boxId" type="primary" link @click="openAlgDialog(row)">配置算法</el-button>
                 <el-button size="small" type="primary" link @click="openCameraEditDialog(row)"> 编辑 </el-button>
                 <el-button size="small" type="warning" link @click="handleEditDel(row)">删除</el-button>
+                <el-dropdown
+                  trigger="hover"
+                  @command="(command:string) => handleCommand(command, row)"
+                  style="margin-left: 12px; vertical-align: middle;"
+                >
+                  <el-button link type="primary" size="small">
+                    更多 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                  </el-button>
+
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="control">控制</el-dropdown-item>
+                      <el-dropdown-item command="blur">模糊检测</el-dropdown-item>
+                      <el-dropdown-item command="algo" divided>配置算法</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </template>
             </el-table-column>
           </el-table>
@@ -392,6 +408,43 @@
         :curCamera="controlDialogObj.curCamera"
       />
     </el-dialog>
+<!--    模糊检测的弹框-->
+    <el-dialog
+      v-model="blurDialogObj.blurVisible"
+      :title="blurDialogObj.title"
+      width="500"
+      :before-close="handelCancelBlur"
+    >
+      <el-form label-width="120px" label-suffix=" :"
+               ref="blurFormRef"
+               :rules="{
+                 url: [
+                   {
+                     required: true,
+                     message: '请填写上报地址',
+                     trigger: 'blur'
+                   }
+                 ]
+               }"
+               :model="blurDialogObj.burDetectionVO">
+        <el-form-item label="开启模糊检测" >
+          <el-switch v-model="blurDialogObj.burDetectionVO.enable"
+                     :active-value="1"
+                     :inactive-value="0"></el-switch>
+        </el-form-item>
+        <el-form-item label="上报地址" v-if="blurDialogObj.burDetectionVO.enable===1" prop="url">
+          <el-input v-model="blurDialogObj.burDetectionVO.url" placeholder="请填写上报地址"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handelCancelBlur">取消</el-button>
+          <el-button type="primary" @click="handelSubmitBlur">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
 <!--    机房平面图列表组件-->
     <compute-room-model-list ref="computeRoomRef"/>
   </div>
@@ -401,7 +454,7 @@
 
 import {onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue';
 // 引入需要的图标，增加了 ArrowLeft, Refresh, Document
-import {Delete, OfficeBuilding, Plus, School, VideoCamera} from '@element-plus/icons-vue';
+import {ArrowDown, Delete, OfficeBuilding, Plus, School, VideoCamera} from '@element-plus/icons-vue';
 import {getTreeData} from "@/api/modules/monitor/Tree.js";
 import type {TreeNode} from "@/api/types/monitor/Tree";
 import {createNvrApi, getNvrListApi, listByNode, removeNvrApi, updateNvrApi} from "@/api/modules/monitor/Nvr";
@@ -424,6 +477,8 @@ import DataSync from "@/views/sysmonitortree/sysMonitorTree/components/DataSync.
 import {fa} from "element-plus/es/locale";
 import ComputeRoomModelList from "@/views/sysmonitortree/sysMonitorTree/components/ComputeRoomModelList.vue";
 import {getListApi} from "@/api/modules/computerRoom/computerRoom";
+import type {BlurDetectionUpdateDTO, BlurDetectionVO} from "@/api/types/blurDetection/BlurDetection";
+import {addOrUpdateBlurDetectionApi, getBlurDetectionByCameraIdApi} from "@/api/modules/blurDetection/BlurDetection";
 const refreshLoading=ref(false);
 const playLoading = ref(false);
 const filterText = ref('');
@@ -491,6 +546,19 @@ const ALGORITHM_MAP: Record<number, string> = {
   58: "脸部抓拍",
   1:"安全帽检测"
 };
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'control':
+      openControlDialog(row);
+      break;
+    case 'blur':
+      openBlurDialog(row);
+      break;
+    case 'algo':
+      openAlgDialog(row);
+      break;
+  }
+};
 // 处理算法提交
 const handleAlgSubmit=async (algForm:AlgorithmTaskVO)=>{
   try {
@@ -859,6 +927,14 @@ const controlDialogObj=reactive({
   id: -1,
   curCamera:{}
 })
+// 模糊检测对象
+const blurDialogObj=reactive({
+  blurVisible:false,
+  title:'',
+  burDetectionVO: {
+    enable:  0,
+  } as BlurDetectionUpdateDTO
+})
 // 视频播放对象
 const playDialogObj=reactive({
   playVisible: false,
@@ -881,6 +957,50 @@ const openPlayDialog=(data:CameraRow) =>{
     console.warn('channelId 不存在于当前数据中');
   }
 }
+const blurFormRef=ref();
+// 提交模糊检测弹框
+const handelSubmitBlur=async ()=>{
+  const res=await addOrUpdateBlurDetectionApi(blurDialogObj.burDetectionVO);
+  if(res.code=='0000')
+  {
+    ElMessage.success('提交成功');
+    blurDialogObj.blurVisible=false;
+  }else {
+    ElMessage.success('提交失败');
+  }
+}
+// 模糊检测弹框
+const openBlurDialog=async (data:CameraRow)=>{
+  if(data.status==0)
+  {
+    ElMessage.warning('摄像头不在线');
+    return;
+  }
+  blurDialogObj.blurVisible=true;
+  blurDialogObj.title='模糊检测';
+  if (data.id !== undefined) {
+    const res=await getBlurDetectionByCameraIdApi({
+      id: data.id
+    });
+    if(res.code=='0000' && res.data)
+    {
+      blurDialogObj.burDetectionVO=res.data;
+      console.log('进行赋值', blurDialogObj.burDetectionVO)
+    }else {
+      blurDialogObj.burDetectionVO.cameraId=data.id;
+      blurDialogObj.burDetectionVO.cameraName=data.name ?? '';
+    }
+    console.log('当前弹框对象', blurDialogObj.burDetectionVO)
+  } else {
+    console.warn('channelId 不存在于当前数据中');
+  }
+}
+// 关闭模糊检测弹框
+const handelCancelBlur=()=>{
+  blurFormRef.value.resetFields();
+  blurDialogObj.burDetectionVO={};
+  blurDialogObj.blurVisible=false;
+}
 // 视频控制
 const openControlDialog=(data:CameraRow)=>{
   if(data.status==0)
@@ -901,7 +1021,7 @@ const handleClosePlay= async ()=>{
   playDialogObj.playVisible=false
 }
 const handleClose=async ()=>{
-  controlDialogObj.controlVisible=false
+  controlDialogObj.controlVisible=false;
 }
 // 记录NVR的id
 const NvrId=ref();

src/views/teacher/teacherStatistics/components/vue-xq-test/vue-camera.vue

@@ -31,6 +31,7 @@ import { ref } from 'vue';
 import { VideoCamera } from '@element-plus/icons-vue';
 import {useCameraBindStore} from "@/stores/modules/cameraBind";
 import VideoPlayer from "@/views/sysmonitortree/sysMonitorTree/components/VideoPlayer.vue";
+import {ElMessage} from "element-plus";
 const customDraggingVisible = ref(false);
 const cameraBindStore=useCameraBindStore();
 const props = defineProps({
@@ -53,6 +54,8 @@ const handlePlay = () => {
     VideoPlayerId.value=id;
     console.log('当前播放的摄像头消息', props.definitionItemJson)
     customDraggingVisible.value = true;
+  }else {
+    ElMessage.warning('还未绑定摄像头');
   }
 };
 </script>