xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-08-27 16:29:23 +08:00
parent 5ef521805a
commit 035827670d
4 changed files with 93 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -8,11 +8,6 @@
<title>公共服务一体化驾驶舱</title>
<script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script>
<!-- 视频取流 -->
<link href="https://cdn.bootcss.com/video.js/7.20.3/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/7.20.3/video.js"></script>
<!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
</head>
<body>

36
src/view/dialog/dialogCamera.vue
View File

@ -63,14 +63,12 @@
</div>
</template>
<script setup>
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN',VideojsZhcnLanguage);
// import Hls from 'hls.js';
// import 'videojs-contrib-hls';
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
const props = defineProps({
cameraShow: {
@ -98,7 +96,7 @@ const dp = ref(null);
const attachmentLink = ref("");
const options = {
language: 'zh-CN',
language: "zh-CN",
playbackRates: [1.0],
aspectRatio: "10:5",
notSupportedMessage: "此视频暂无法播放，请稍后再试",
@ -107,6 +105,7 @@ const options = {
preload: "auto",
controls: true,
};
watch(
() => props.cameraShow,
(newVal) => {
@ -170,28 +169,33 @@ const insertVideo = () => {
// console.log("插入视频元素:", videoElement);
};
const loadVideo = () => {
if (dp.value) {
dp.value.dispose();
// console.log("正在销毁之前的video.js实例。");
dp.value.dispose();
}
dp.value = videojs("videoPlayerInside", options);
// console.log("Video.js播放器已加载：", dp.value);
};
const videoPlayer = ref(null);
// 使用生命钩子
onMounted(() => {
cameraShow.value = props.cameraShow;
});
const disposeVideo = () => {
if (dp.value) {
dp.value.dispose(); // dispose()会直接删除Dom元素
dp.value = null;
// console.log("Video.js播放器已处理。");
}
// 清空 videoBox 内的内容
// const videoBox = document.getElementById("videoBox");
// if (videoBox) {
// videoBox.innerHTML = "";
// console.log("videoBox内容已清除。");
// }
};
// 使用生命钩子
onMounted(() => {
cameraShow.value = props.cameraShow;
});
const closeDialog = () => {
cameraShow.value = false;
disposeVideo();

34
src/view/dialog/dialogCameras.vue
View File

@ -63,14 +63,14 @@
</div>
</template>
<script setup>
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
// import 'videojs-contrib-hls';
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
const props = defineProps({
cameraShow: {
type: Boolean,
@ -117,20 +117,20 @@ watch(
cameraShow.value = newVal;
hlsUriSslNow.value = props.hlsUriSsl;
data.title = props.sxtname;
console.log(hlsUriSslNow.value, props.sxtname, 5555);
// console.log(hlsUriSslNow.value, props.sxtname, 5555);
attachmentLink.value = hlsUriSslNow.value;
dp.value = null;
//当摄像头第二次打开时，要先创建dom
if (num.value) {
console.log(22222, document.getElementById("videoBox"));
// console.log(22222, document.getElementById("videoBox"));
insertVideo();
}
// nextTick(() => {
setTimeout(() => {
loadVideo();
}, 1000);
// });
nextTick(() => {
setTimeout(() => {
loadVideo();
}, 1000);
});
}
}
);
@ -160,23 +160,15 @@ const options = {
muted: true,
preload: "auto",
controls: true,
hls: {},
hls:{
}
};
const loadVideo = () => {
if (videoPlayer) {
dp.value = videojs("videoPlayer", options);
}
// videojs.hook("beforeerror", (player, err) => {
// // Video.js 在切换/指定 source 后立即会触发一个 err=null 的错误，这里过滤一下
// console.log("播放器实例", player, err);
// if (err !== null) {
// dp.value.src(url);
// }
// // 清除错误，避免 error 事件在控制台抛出错误
// return null;
// });
};
// 使用生命钩子
onMounted(() => {

61
src/view/person/index.vue
View File

@ -213,6 +213,50 @@
/>
</div>
</div>
<div>
<div class="my-label">
<div class="my-label-title">一卡通</div>
</div>
<div class="my-table">
<el-table
:data="dataMyTag.form.data"
border
style="width: 100%"
height="270"
:header-cell-style="{
border: 'none',
height: '60px',
fontSize: '18px',
color: '#fff',
}"
:row-style="{
letterSpacing: '1px',
fontSize: '16px',
height: '50px',
backgroundColor: 'rgba(31, 63, 113, 1)',
color: '#fff',
}"
>
<template v-for="item in dataMyTag.form.column">
<el-table-column
:width="item.width"
:prop="item.property"
:label="item.label"
/>
</template>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:page-size="zhpagination.pageSize"
:total="zhpagination.total"
prev-text="上一页"
next-text="下一页"
v-model:current-page="zhpagination.current"
@current-change="handlePagination1"
/>
</div>
</div>
</div>
<div v-else-if="rightType == '1'">
<div class="my-label">
@ -941,10 +985,10 @@ onMounted(() => {
align-items: center;
height: 870px;
}
.person-side {
width: 480px;
height: 100%;
overflow-y: auto;
background: linear-gradient(
270deg,
rgba(0, 52, 131, 0.69) 0%,
@ -960,6 +1004,21 @@ onMounted(() => {
border-radius: 8px;
z-index: 2;
padding: 32px;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background: rgba(173, 221, 255, 1);
}
&::-webkit-scrollbar-track {
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
}
}
.person-main {