From f1d079f9c0b3d384090477ca54e0548373d62b57 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Thu, 16 Jan 2025 11:56:39 +0800
Subject: [PATCH] 配置修改
---
web_src/src/components/live.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 305 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
new file mode 100644
index 0000000..c2c09f4
--- /dev/null
+++ b/web_src/src/components/live.vue
@@ -0,0 +1,305 @@
+<template>
+ <div id="devicePosition" style="width:100vw; height: 91vh">
+ <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
+ <el-aside width="300px" style="background-color: #ffffff">
+ <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
+ </el-aside>
+ <el-container>
+ <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
+ 分屏:
+ <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
+ <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
+ <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
+ </el-header>
+ <el-main style="padding: 0;">
+ <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
+ <div v-for="i in spilt" :key="i" class="play-box"
+ :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
+ @click="playerIdx = (i-1)">
+ <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
+ <player ref="player" v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot"
+ @destroy="destroy"/>
+ </div>
+ </div>
+ </el-main>
+ </el-container>
+ </el-container>
+ </div>
+</template>
+
+<script>
+import uiHeader from "../layout/UiHeader.vue";
+import player from './common/jessibuca.vue'
+import DeviceTree from './common/DeviceTree.vue'
+
+export default {
+ name: "live",
+ components: {
+ uiHeader, player, DeviceTree
+ },
+ data() {
+ return {
+ videoUrl: [''],
+ spilt: 1,//分屏
+ playerIdx: 0,//激活播放器
+
+ updateLooper: 0, //数据刷新轮训标志
+ count: 15,
+ total: 0,
+
+ //channel
+ loading: false
+ };
+ },
+ mounted() {
+
+ },
+ created() {
+ this.checkPlayByParam()
+ },
+
+ computed: {
+ liveStyle() {
+ let style = {width: '100%', height: '100%'}
+ switch (this.spilt) {
+ case 4:
+ style = {width: '49%', height: '49%'}
+ break
+ case 9:
+ style = {width: '32%', height: '32%'}
+ break
+ }
+ this.$nextTick(() => {
+ for (let i = 0; i < this.spilt; i++) {
+ const player = this.$refs.player
+ player && player[i] && player[i].updatePlayerDomSize()
+ }
+ })
+ return style
+ }
+ },
+ watch: {
+ spilt(newValue) {
+ console.log("切换画幅;" + newValue)
+ let that = this
+ for (let i = 1; i <= newValue; i++) {
+ if (!that.$refs['player' + i]) {
+ continue
+ }
+ this.$nextTick(() => {
+ if (that.$refs['player' + i] instanceof Array) {
+ that.$refs['player' + i][0].resize()
+ } else {
+ that.$refs['player' + i].resize()
+ }
+ })
+
+ }
+ window.localStorage.setItem('split', newValue)
+ },
+ '$route.fullPath': 'checkPlayByParam'
+ },
+ destroyed() {
+ clearTimeout(this.updateLooper);
+ },
+ methods: {
+ destroy(idx) {
+ console.log(idx);
+ this.clear(idx.substring(idx.length - 1))
+ },
+ clickEvent: function (device, data, isCatalog) {
+ if (data.channelId && !isCatalog) {
+ if (device.online === 0) {
+ this.$message.error('设备离线!不允许点播');
+ }else {
+ this.sendDevicePush(data)
+ }
+ }
+ },
+ contextMenuEvent: function (device, event, data, isCatalog) {
+
+ },
+ //通知设备上传媒体流
+ sendDevicePush: function (itemData) {
+ // if (itemData.status === 0) {
+ // this.$message.error('设备离线!');
+ // return
+ // }
+ this.save(itemData)
+ let deviceId = itemData.deviceId;
+ // this.isLoging = true;
+ let channelId = itemData.channelId;
+ console.log("通知设备推流1：" + deviceId + " : " + channelId);
+ let idxTmp = this.playerIdx
+ let that = this;
+ this.loading = true
+ this.$axios({
+ method: 'get',
+ url: '/api/play/start/' + deviceId + '/' + channelId
+ }).then(function (res) {
+ if (res.data.code === 0 && res.data.data) {
+ itemData.playUrl = res.data.data.httpsFlv
+ that.setPlayUrl(res.data.data.ws_flv, idxTmp)
+ } else {
+ that.$message.error(res.data.msg);
+ }
+ }).catch(function (e) {
+ }).finally(() => {
+ that.loading = false
+ });
+ },
+ setPlayUrl(url, idx) {
+ this.$set(this.videoUrl, idx, url)
+ let _this = this
+ setTimeout(() => {
+ window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
+ }, 100)
+
+ },
+ checkPlayByParam() {
+ let {deviceId, channelId} = this.$route.query
+ if (deviceId && channelId) {
+ this.sendDevicePush({deviceId, channelId})
+ }
+ },
+ shot(e) {
+ // console.log(e)
+ // send({code:'image',data:e})
+ var base64ToBlob = function (code) {
+ let parts = code.split(';base64,');
+ let contentType = parts[0].split(':')[1];
+ let raw = window.atob(parts[1]);
+ let rawLength = raw.length;
+ let uInt8Array = new Uint8Array(rawLength);
+ for (let i = 0; i < rawLength; ++i) {
+ uInt8Array[i] = raw.charCodeAt(i);
+ }
+ return new Blob([uInt8Array], {
+ type: contentType
+ });
+ };
+ let aLink = document.createElement('a');
+ let blob = base64ToBlob(e); //new Blob([content]);
+ let evt = document.createEvent("HTMLEvents");
+ evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
+ aLink.download = '截图';
+ aLink.href = URL.createObjectURL(blob);
+ aLink.click();
+ },
+ save(item) {
+ let dataStr = window.localStorage.getItem('playData') || '[]'
+ let data = JSON.parse(dataStr);
+ data[this.playerIdx] = item
+ window.localStorage.setItem('playData', JSON.stringify(data))
+ },
+ clear(idx) {
+ let dataStr = window.localStorage.getItem('playData') || '[]'
+ let data = JSON.parse(dataStr);
+ data[idx - 1] = null;
+ console.log(data);
+ window.localStorage.setItem('playData', JSON.stringify(data))
+ },
+ }
+};
+</script>
+<style>
+.btn {
+ margin: 0 10px;
+
+}
+
+.btn:hover {
+ color: #409EFF;
+}
+
+.btn.active {
+ color: #409EFF;
+
+}
+
+.redborder {
+ border: 2px solid red !important;
+}
+
+.play-box {
+ background-color: #000000;
+ border: 2px solid #505050;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+</style>
+<style>
+.videoList {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+}
+
+.video-item {
+ position: relative;
+ width: 15rem;
+ height: 10rem;
+ margin-right: 1rem;
+ background-color: #000000;
+}
+
+.video-item-img {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+}
+
+.video-item-img:after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 3rem;
+ height: 3rem;
+ background-image: url("../assets/loading.png");
+ background-size: cover;
+ background-color: #000000;
+}
+
+.video-item-title {
+ position: absolute;
+ bottom: 0;
+ color: #000000;
+ background-color: #ffffff;
+ line-height: 1.5rem;
+ padding: 0.3rem;
+ width: 14.4rem;
+}
+
+.baidumap {
+ width: 100%;
+ height: 100%;
+ border: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+/* 去除百度地图版权那行字 和 百度logo */
+.baidumap > .BMap_cpyCtrl {
+ display: none !important;
+}
+
+.baidumap > .anchorBL {
+ display: none !important;
+}
+</style>
--
Gitblit v1.9.3