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> <title>公共服务一体化驾驶舱</title>
<script type="text/javascript" <script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script> 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> </head>
<body> <body>

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

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

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

@ -63,14 +63,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import videojs from "video.js"; import videojs from "video.js";
import "video.js/dist/video-js.css"; 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"; import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置 videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //中文设置
const props = defineProps({ const props = defineProps({
cameraShow: { cameraShow: {
type: Boolean, type: Boolean,
@ -117,20 +117,20 @@ watch(
cameraShow.value = newVal; cameraShow.value = newVal;
hlsUriSslNow.value = props.hlsUriSsl; hlsUriSslNow.value = props.hlsUriSsl;
data.title = props.sxtname; data.title = props.sxtname;
console.log(hlsUriSslNow.value, props.sxtname, 5555); // console.log(hlsUriSslNow.value, props.sxtname, 5555);
attachmentLink.value = hlsUriSslNow.value; attachmentLink.value = hlsUriSslNow.value;
dp.value = null; dp.value = null;
//当摄像头第二次打开时，要先创建dom //当摄像头第二次打开时，要先创建dom
if (num.value) { if (num.value) {
console.log(22222, document.getElementById("videoBox")); // console.log(22222, document.getElementById("videoBox"));
insertVideo(); insertVideo();
} }
// nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
loadVideo(); loadVideo();
}, 1000); }, 1000);
// }); });
} }
} }
); );
@ -160,23 +160,15 @@ const options = {
muted: true, muted: true,
preload: "auto", preload: "auto",
controls: true, controls: true,
hls: {}, hls:{
}
}; };
const loadVideo = () => { const loadVideo = () => {
if (videoPlayer) { if (videoPlayer) {
dp.value = videojs("videoPlayer", options); 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(() => { onMounted(() => {

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

@ -213,6 +213,50 @@
/> />
</div> </div>
</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>
<div v-else-if="rightType == '1'"> <div v-else-if="rightType == '1'">
<div class="my-label"> <div class="my-label">
@ -941,10 +985,10 @@ onMounted(() => {
align-items: center; align-items: center;
height: 870px; height: 870px;
} }
.person-side { .person-side {
width: 480px; width: 480px;
height: 100%; height: 100%;
overflow-y: auto;
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
@ -960,6 +1004,21 @@ onMounted(() => {
border-radius: 8px; border-radius: 8px;
z-index: 2; z-index: 2;
padding: 32px; 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 { .person-main {