2025
/
smart-factory
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化首页大屏监控加载问题

Browse Source
main
junhong 2 days ago
parent 3aa439dc0d
commit 0e193fd93e
4 changed files with 70 additions and 179 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      public/dahua/demo.html
  2. 145
      src/views/large-screen/index.vue
  3. 23
      src/views/large-screen/video.vue
  4. 4
      src/views/login.vue

15
public/dahua/demo.html
Unescape View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,6 +17,7 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px; padding: 20px;
} }
.container { .container {
display: flex; display: flex;
padding: 0 0px !important; padding: 0 0px !important;
@ -23,6 +25,7 @@
max-width: none; max-width: none;
height: 100vh; height: 100vh;
} }
.real-container, .real-container,
.record-container { .record-container {
width: 45%; width: 45%;
@ -30,18 +33,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.has-success .valid-feedback { .has-success .valid-feedback {
display: unset; display: unset;
} }
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
.list-group a { .list-group a {
text-decoration: none; text-decoration: none;
color: #13425c; color: #13425c;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="alert alert-dismissible alert-primary" style="display: none;"> <div class="alert alert-dismissible alert-primary" style="display: none;">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@ -50,7 +57,8 @@
<!-- 右侧固定小弹窗 --> <!-- 右侧固定小弹窗 -->
<div style="position: fixed; right: 0; top: 60px; width: 250px;display: none;"> <div style="position: fixed; right: 0; top: 60px; width: 250px;display: none;">
<p style="font-size: 20px;"> <p style="font-size: 20px;">
<button type="button" class="btn btn-outline-secondary"><a href="/demo_api.html">点击跳转到功能api-demo页面</a></button> <button type="button" class="btn btn-outline-secondary"><a
href="/demo_api.html">点击跳转到功能api-demo页面</a></button>
</p> </p>
<div class="platform-info"> <div class="platform-info">
大华平台信息 大华平台信息
@ -93,7 +101,8 @@
<div id="ws-record-player" style="height: 500px; margin-bottom: 20px;"></div> <div id="ws-record-player" style="height: 500px; margin-bottom: 20px;"></div>
<div style="display: flex;"> <div style="display: flex;">
<!-- 日期 --> <!-- 日期 -->
<input style="width:140px;" type="date" id="date" class="form-control" id="record-date" value="2024-09-17"/> <input style="width:140px;" type="date" id="date" class="form-control" id="record-date"
value="2024-09-17" />
<button style="margin:0 5px" type="button" class="btn btn-outline-primary" id="record-btn">录像回放</button> <button style="margin:0 5px" type="button" class="btn btn-outline-primary" id="record-btn">录像回放</button>
<button type="button" class="btn btn-outline-primary" id="close-record">关闭录像</button> <button type="button" class="btn btn-outline-primary" id="close-record">关闭录像</button>
<!-- <button type="button" class="btn btn-outline-primary" id="close-record">录像下载接口</button> --> <!-- <button type="button" class="btn btn-outline-primary" id="close-record">录像下载接口</button> -->
@ -194,6 +203,7 @@
console.log(data.selectIndex) // 窗口序号，从 0 console.log(data.selectIndex) // 窗口序号，从 0
break; break;
case "realSuccess": // 实时预览成功 case "realSuccess": // 实时预览成功
window.parent.postMessage({type: 'realSuccess'}, '*')
console.log("实时预览成功") console.log("实时预览成功")
break; break;
case "realError": // 实时预览失败 case "realError": // 实时预览失败
@ -451,4 +461,5 @@
</script> </script>
</body> </body>
</html> </html>

145
src/views/large-screen/index.vue
Unescape View File

@ -109,7 +109,7 @@
<div class="center-top-item"> <div class="center-top-item">
<div class="boxtitle changtitle">视频监控</div> <div class="boxtitle changtitle">视频监控</div>
<div class="center-item bigbj"> <div class="center-item bigbj">
<myVideo></myVideo> <myVideo ref="myVideoRef"></myVideo>
<!-- <div class="alarm-table-header"> <!-- <div class="alarm-table-header">
<div>序号</div> <div>序号</div>
<div>姓名</div> <div>姓名</div>
@ -333,142 +333,7 @@ const state = reactive({
echartsZhu, echartsZhu,
echart, echart,
loading: true, loading: true,
tableData: [{ tableData: [],
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 1,
openType: 43,
startSwingTime: "2025-05-13 02:17:55",
maskState: 3,
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 2,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
maskState: 2
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 1,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 1,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 2,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 1,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
}, {
"id": 17,
"personId": 21059,
"personCode": "112325",
"personName": "小高测试用例1",
"departmentId": 53,
"deptName": "小高测试用例部门1",
"cardNo": "40D3989B",
"siteId": "1",
"siteName": "门禁测试",
"attendanceType": "51",
"actionTime": "2023-08-24 02:17:55",
"reportTime": "2023-08-24 02:17:56",
"dataSource": 1,
"supplementFormId": null,
"number": null,
imageType: 1,
openType: 42,
startSwingTime: "2025-05-13 02:17:55",
}],
warnList: [], warnList: [],
monitorList: [], monitorList: [],
logList: [], logList: [],
@ -483,6 +348,7 @@ const state = reactive({
requestController: null, requestController: null,
time: null, time: null,
}) })
const myVideoRef = ref()
onUnmounted(() => { onUnmounted(() => {
if (state.requestController) state.requestController.stop(); if (state.requestController) state.requestController.stop();
}); });
@ -519,6 +385,9 @@ onMounted(async () => {
return res; return res;
} }
state.requestController = retryAndRepeatRequest(requestFn, 3, 30000, 300000); state.requestController = retryAndRepeatRequest(requestFn, 3, 30000, 300000);
// nextTick(() => {
// myVideoRef.value.getList()
// })
state.loading = false state.loading = false
}) })
function getTime() { function getTime() {
@ -599,7 +468,7 @@ function getQuerywarn(params) {
// 门禁记录 // 门禁记录
function accessControl() { function accessControl() {
getRecordPage().then((res) => { getRecordPage().then((res) => {
// state.tableData = res.data.pageData state.tableData = res.data.pageData
}) })
} }
// 工程日志 // 工程日志

23
src/views/large-screen/video.vue
Unescape View File

@ -2,11 +2,11 @@
import { reactive, onMounted } from 'vue' import { reactive, onMounted } from 'vue'
import { getRtspUrl, getDevicePage, getPlaybackByTimeRtspUrl, getRegularVideoRecords } from './api' import { getRtspUrl, getDevicePage, getPlaybackByTimeRtspUrl, getRegularVideoRecords } from './api'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const state = reactive({ const state = reactive({
currentCameraIndex: 0, currentCameraIndex: 0,
cameraList: [], cameraList: [],
cameraInfo: null cameraInfo: null,
isShow: false
}) })
const switchCamera = (index) => { const switchCamera = (index) => {
state.currentCameraIndex = index; state.currentCameraIndex = index;
@ -99,29 +99,34 @@ const playRecord = (date) => {
}) })
} }
onMounted(() => { function getList() {
}
onMounted(async () => {
getDevicePage({ getDevicePage({
"pageNum": 1, "pageNum": 1,
"pageSize": 100, "pageSize": 100,
}).then((res) => { }).then((res) => {
state.cameraList = res.data.pageData state.cameraList = res.data.pageData
const index = state.cameraList.findIndex(item => item.isOnline === 1); const index = state.cameraList.findIndex(item => item.isOnline == 1);
state.currentCameraIndex = index state.currentCameraIndex = index
}).catch((err) => { }).catch((err) => {
}); });
// 监听子页面的消息 // 监听子页面的消息
window.addEventListener('message', (event) => { window.addEventListener('message', (event) => {
console.log('event :>> ', event.data); console.log('event :>> ', event.data);
if (event.data.type === 'startVideo') { if (event.data.type === 'startVideo') {
startVideo(); startVideo();
} else if (event.data.type === 'playRecord') { } else if (event.data.type === 'playRecord') {
playRecord(event.data.date); playRecord(event.data.date);
} else if (event.data.type == "realSuccess") {
state.isShow = true
} }
}); });
}) })
defineExpose({
getList
});
</script> </script>
<template> <template>
@ -145,11 +150,13 @@ onMounted(() => {
</template> --> </template> -->
</div> </div>
<!-- 摄像头展示区域 --> <!-- 摄像头展示区域 -->
<div class="camera-display"> <div class="camera-display" v-show="state.isShow">
<iframe v-if="state.cameraList.length > 0" id="video" src="/dahua/demo.html?real=true" <iframe v-if="state.cameraList.length > 0" id="video" src="/dahua/demo.html?real=true"
style="width:100%;height:100%;" frameborder="0"></iframe> style="width:100%;height:100%;" frameborder="0"></iframe>
</div> </div>
<div v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..." v-loading="!state.isShow" class="camera-display">
</div>
</div> </div>
</template> </template>

4
src/views/login.vue
Unescape View File

@ -58,6 +58,10 @@ color: #333333;">用户登录</div>
</div> --> </div> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="display: none;">
<img width="100px" src="../assets/images/videoitembj.png" alt="">
<img width="100px" src="../assets/images/videoitembjtwo.png" alt="">
</div>
<!-- 底部 --> <!-- 底部 -->
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save