feat 直播流点位

Co-authored-by: Copilot <copilot@github.com>
2026-05-26 09:54:16 +08:00
parent 988cf99a03
commit 0b2606bdf4
5 changed files with 53 additions and 21 deletions
--- a/src/layout/components/notice/index.vue
+++ b/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条）
--- a/src/utils/video.ts
+++ b/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 播放');
  }
 };

--- a/src/views/equipmentList/list.vue
+++ b/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)),
-    y1: Number(point1TopPctOfHeight.toFixed(4)),
-    x2: Number(point2RightPctOfWidth.toFixed(4)),
-    y2: Number(point2TopPctOfHeight.toFixed(4))
+    x1: Math.round(point1RightPctOfWidth),
+    y1: Math.round(point1TopPctOfHeight),
+    x2: Math.round(point2RightPctOfWidth),
+    y2: Math.round(point2TopPctOfHeight)
  };
  payload.value.push(newArea);
  console.log('[监控区域] 两点千分比坐标', newArea);
--- a/src/views/systemList/role/role.vue
+++ b/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="roleKey" :show-overflow-tooltip="true" width="200" />
+        <el-table-column label="角色描述" prop="remark" :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">
--- a/src/views/systemList/user/user.vue
+++ b/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[1].visible" key="userName" label="用户名称" align="center" prop="userName" :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 v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
+            <el-table-column v-if="columns[0].visible" key="userId" label="用户账号" align="center" prop="userId" />
+            <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[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">