This commit is contained in:
parent
5ef521805a
commit
035827670d
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue