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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,6 +17,7 @@
flex-wrap: wrap;
padding: 20px;
}
.container {
display: flex;
padding: 0 0px !important;
@ -23,6 +25,7 @@
max-width: none;
height: 100vh;
}
.real-container,
.record-container {
width: 45%;
@ -30,18 +33,22 @@
display: flex;
flex-direction: column;
}
.has-success .valid-feedback {
display: unset;
}
.cursor-pointer {
cursor: pointer;
}
.list-group a {
text-decoration: none;
color: #13425c;
}
</style>
</head>
<body>
<div class="alert alert-dismissible alert-primary" style="display: none;">
<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;">
<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>
<div class="platform-info">
大华平台信息
@ -93,7 +101,8 @@
<div id="ws-record-player" style="height: 500px; margin-bottom: 20px;"></div>
<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 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
break;
case "realSuccess": // 实时预览成功
window.parent.postMessage({type: 'realSuccess'}, '*')
console.log("实时预览成功")
break;
case "realError": // 实时预览失败
@ -451,4 +461,5 @@
</script>
</body>
</html>

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

@ -109,7 +109,7 @@
<div class="center-top-item">
<div class="boxtitle changtitle">视频监控</div>
<div class="center-item bigbj">
<myVideo></myVideo>
<myVideo ref="myVideoRef"></myVideo>
<!-- <div class="alarm-table-header">
<div>序号</div>
<div>姓名</div>
@ -333,142 +333,7 @@ const state = reactive({
echartsZhu,
echart,
loading: true,
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",
}],
tableData: [],
warnList: [],
monitorList: [],
logList: [],
@ -483,6 +348,7 @@ const state = reactive({
requestController: null,
time: null,
})
const myVideoRef = ref()
onUnmounted(() => {
if (state.requestController) state.requestController.stop();
});
@ -519,6 +385,9 @@ onMounted(async () => {
return res;
}
state.requestController = retryAndRepeatRequest(requestFn, 3, 30000, 300000);
// nextTick(() => {
// myVideoRef.value.getList()
// })
state.loading = false
})
function getTime() {
@ -599,7 +468,7 @@ function getQuerywarn(params) {
// 门禁记录
function accessControl() {
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 { getRtspUrl, getDevicePage, getPlaybackByTimeRtspUrl, getRegularVideoRecords } from './api'
import { ElMessage } from 'element-plus'
const state = reactive({
currentCameraIndex: 0,
cameraList: [],
cameraInfo: null
cameraInfo: null,
isShow: false
})
const switchCamera = (index) => {
state.currentCameraIndex = index;
@ -99,29 +99,34 @@ const playRecord = (date) => {
})
}
onMounted(() => {
function getList() {
}
onMounted(async () => {
getDevicePage({
"pageNum": 1,
"pageSize": 100,
}).then((res) => {
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
}).catch((err) => {
});
// 监听子页面的消息
window.addEventListener('message', (event) => {
console.log('event :>> ', event.data);
if (event.data.type === 'startVideo') {
startVideo();
} else if (event.data.type === 'playRecord') {
playRecord(event.data.date);
} else if (event.data.type == "realSuccess") {
state.isShow = true
}
});
})
defineExpose({
getList
});
</script>
<template>
@ -145,11 +150,13 @@ onMounted(() => {
</template> -->
</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"
style="width:100%;height:100%;" frameborder="0"></iframe>
</div>
<div v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..." v-loading="!state.isShow" class="camera-display">
</div>
</div>
</template>

4
src/views/login.vue
Unescape View File

@ -58,6 +58,10 @@ color: #333333;">用户登录</div>
</div> -->
</el-form-item>
</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>
</template>

Write Preview
Loading…
Cancel
Save