feat 直播流点位

Co-authored-by: Copilot <copilot@github.com>

src/layout/components/notice/index.vue

@@ -15,14 +15,23 @@
           </div>
           <!-- 已读/未读 -->
           <!-- <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span> -->
-          <button v-if="!v.read" class="el-tag el-tag--danger el-tag--mini read" @click="handleView(v)">查看画面</button>
+          <button v-if="!v.read" class="el-tag el-tag--danger el-tag--mini read" @click="handleSee(v)">查看画面</button>
         </div>
       </template>
       <el-empty v-else :description="'消息为空'"></el-empty>
     </div>
     <!-- <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div> -->
     <!-- 添加或修改测试单对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body fullscreen destroy-on-close>
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      class="monitor-dialog"
+      append-to-body
+      :before-close="handleMonitorDialogClose"
+      fullscreen
+      destroy-on-close
+    >
       <template #header>
         <div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
           <span class="truncate">实时监控-北门出入门监控</span>
@@ -40,10 +49,17 @@
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
 import { useNoticeStore } from '@/store/modules/notice';
 import { listNotice } from '@/api/system/notice';
+import { initHls, destroyHls } from '@/utils/video';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+import { nextTick } from 'vue';
+import { useVideosStore } from '@/store/modules/video';
+const videosStore = useVideosStore();
+
 const noticeStore = useNoticeStore();
 const { readAll } = useNoticeStore();
+const monitorVideoRef = ref<HTMLVideoElement>();
 
 // 定义变量内容
 const state = reactive({
@@ -58,15 +74,24 @@ const dialog = reactive<DialogOption>({
 });
 
 //查看画面
-const handleView = (row: any) => {
+const handleSee = async (row: any) => {
   console.log('查看画面', row);
   // 在这里可以添加打开画面的逻辑
   if (!row || !row.videoUrl) {
     proxy?.$modal.msgError('视频地址不存在');
     return;
   }
-  monitorVideoUrl.value = row.videoUrl;
+  await videosStore.getVideos(row.id);
+  monitorVideoUrl.value = videosStore.hisUrl;
   dialog.visible = true;
+  await nextTick();
+  initHls(monitorVideoUrl, monitorVideoRef);
+};
+
+const handleMonitorDialogClose = (done: () => void) => {
+  // 卸载 Hls 与清理 video
+  destroyHls(monitorVideoRef);
+  done();
 };
 /**
  * 过滤消息（只保留最新的5条）

src/utils/video.ts

@@ -1,6 +1,5 @@
 import Hls from 'hls.js';
 let hlsInstance: Hls | null = null;
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 export const initHls = (monitorVideoUrl, monitorVideoRef) => {
   const url = monitorVideoUrl.value;
@@ -37,7 +36,8 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
       } catch (e) {}
     });
   } else {
-    proxy?.$modal.msgWarning('当前浏览器不支持 HLS 播放');
+    //proxy?.$modal.msgWarning('当前浏览器不支持 HLS 播放');
+    ElMessage.error('当前浏览器不支持 HLS 播放');
   }
 };
 

src/views/equipmentList/list.vue

@@ -483,10 +483,10 @@ const onMonitorDrawClick = (e: MouseEvent) => {
   // 添加新的报警区域到数组
   const newArea: AlarmAreaData = {
     deviceId: form.value.id,
-    x1: Number(point1RightPctOfWidth.toFixed(4)),
+    x1: Math.round(point1RightPctOfWidth),
-    y1: Number(point1TopPctOfHeight.toFixed(4)),
+    y1: Math.round(point1TopPctOfHeight),
-    x2: Number(point2RightPctOfWidth.toFixed(4)),
+    x2: Math.round(point2RightPctOfWidth),
-    y2: Number(point2TopPctOfHeight.toFixed(4))
+    y2: Math.round(point2TopPctOfHeight)
   };
   payload.value.push(newArea);
   console.log('[监控区域] 两点千分比坐标', newArea);

src/views/systemList/role/role.vue

@@ -39,19 +39,19 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column v-if="false" label="角色编号" prop="roleId" width="120" />
         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-        <el-table-column label="角色描述" prop="roleKey" :show-overflow-tooltip="true" width="200" />
+        <el-table-column label="角色描述" prop="remark" :show-overflow-tooltip="true" width="200" />
-        <el-table-column label="操作人(需接口)" prop="roleKey" :show-overflow-tooltip="true" width="200" />
+        <el-table-column label="操作人" prop="createBy" :show-overflow-tooltip="true" width="200" />
         <el-table-column label="排序" prop="roleSort" width="100" />
         <el-table-column label="状态" align="center" width="100">
           <template #default="scope">
             <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime">
+        <!-- <el-table-column label="创建时间" align="center" prop="createTime">
           <template #default="scope">
             <span>{{ proxy.parseTime(scope.row.createTime) }}</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
 
         <el-table-column fixed="right" label="操作" width="280" align="center">
           <template #default="scope">

src/views/systemList/user/user.vue

@@ -96,22 +96,29 @@
 
           <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50" align="center" />
-            <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
+            <el-table-column v-if="columns[0].visible" key="userId" label="用户账号" align="center" prop="userId" />
-            <el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[1].visible" key="roleName" label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[2].visible" key="nickName" label="操作人" align="center" prop="nickName" :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
+            <el-table-column
-            <el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
+              v-if="columns[3].visible"
+              key="createTime"
+              label="添加时间"
+              align="center"
+              prop="createTime"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column v-if="columns[4].visible" key="phonenumber" label="排序" align="center" prop="phonenumber" width="120" />
             <el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
               <template #default="scope">
                 <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
               </template>
             </el-table-column>
 
-            <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
+            <!-- <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
               <template #default="scope">
                 <span>{{ scope.row.createTime }}</span>
               </template>
-            </el-table-column>
+            </el-table-column> -->
 
             <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
               <template #default="scope">