sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

提交代码

dev-login
姜玉琦 2023-08-26 21:53:46 +08:00
parent c3407477a9
commit e7a9027c5d
6 changed files with 214 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -17,6 +17,7 @@
"less": "^4.1.3",
"less-loader": "^11.1.3",
"vue": "^2.6.14",
"vue-h265-player": "^0.0.24",
"vue-router": "^4.2.2"
},
"devDependencies": {

BIN
public/libDecoder.wasm 100644
View File

Binary file not shown.

4
src/api/index.js
View File

@ -14,6 +14,7 @@ import buildNode from './buildNode'
import projectChecking from './projectChecking/index'
import measure from './measure/index'
import checkDetection from './checkDetection/index'
import video from './video/index'
import {axios} from '@/utils/request'
export default {
project,
@ -32,5 +33,6 @@ export default {
projectChecking,
measure,
checkDetection,
http:axios
http:axios,
video
}

28
src/api/video/index.js 100644
View File

@ -0,0 +1,28 @@
import request from '@/utils/request'
const listView=(deptId,projectId)=> {
return request({
url: `/bgscreen/video/listView?videoDvrNumberd=${deptId||0}&projectId=${projectId||0}`,
method: 'get'
})
}
const getVideoPassage=(videoDvrNumberd)=> {
return request({
url: `/bgscreen/video/getVideoPassage?videoDvrNumberd=${videoDvrNumberd}`,
method: 'get'
})
}
const editPassageState=(id,videoDvrNumber,passageState)=> {
return request({
url: `/bgscreen/video/editPassageState?iid=${id||0}&videoDvrNumber=${videoDvrNumber}&passageState=${passageState}`,
method: 'get'
})
}
export default{
listView,
getVideoPassage,
editPassageState
}

209
src/pages/projectVideo.vue
View File

@ -17,7 +17,7 @@
<img src="images/video_1.png">
</div>
<div class="equipment-list-data">
<p>厂区监控</p>
<p>项目监控</p>
<div><span v-cloak>{{ cqNum }}</span>个</div>
</div>
</div>
@ -79,36 +79,36 @@
<div class="video-enlarge-max" v-if="videoType">
<div class="video-enlarge-title">
<div>
<span v-cloak>{{ videoReturnData.title }}</span>
<label v-if="videoReturnData.state == 0" class="color-green">（在线）</label>
<label v-if="videoReturnData.state == 1" class="police-data">（离线）</label>
<span v-cloak>{{ videoReturnData.videoName }}</span>
<label v-if="videoReturnData.signalState == 1" class="color-green">（在线）</label>
<label v-if="videoReturnData.signalState != 1" class="police-data">（离线）</label>
</div>
<div></div>
</div>
<div class="video-enlarge-content">
<div :style="playDivCss">
<video v-if="type != 'hk' && type != 'hzhk' && !exception" ref="playDiv"
style="height: 100%;width: 100%" controls autoplay muted webkit-playsinline
playsinline></video>
<div v-if="(type == 'hk' || type == 'hzhk') && !exception" id="HKPlayWindowControl"
style="height: 100%;width: 100%;text-align: center;background-color: #000000;color: #FFFFFF">
<div v-show="restartInit"><br /><br /><br />插件未启动，正在尝试启动，请稍候...</div>
<div v-show="initError">
<br /><br /><br />
<p>插件启动失败，请检查插件是否安装！</p>
<p>该插件只能用于window系统！</p>
<el-link type="primary"
href="https://file-other.makalu.cc/%E6%8F%92%E4%BB%B6/VideoWebPlugin.exe">
点击这里下载播放组件
</el-link>
<p>插件安装成功后刷新当前页面！</p>
</div>
</div>
<div v-if="exception" :style="exStyle">
<img style="width: 100%;height: 100%"
src="https://file-other.makalu.cc/icon/videoEx.jpg" />
</div>
<div class="videoView" v-if="showVideoView0">
<H265Player :url="url0" @on-error="handleOnError0" />
</div>
<div class="videoView videoViewError" v-if="showVideoView0 == false">
设备0通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView1">
<H265Player :url="url1" @on-error="handleOnError1" />
</div>
<div class="videoView videoViewError" v-if="showVideoView1 == false">
设备1通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView2">
<H265Player :url="url2" @on-error="handleOnError2" />
</div>
<div class="videoView videoViewError" v-if="showVideoView2 == false">
设备2通道链接失败！请及时检查！
</div>
<div class="videoView" v-if="showVideoView3">
<H265Player :url="url3" @on-error="handleOnError3" />
</div>
<div class="videoView videoViewError" v-if="showVideoView3 == false">
设备3通道链接失败！请及时检查！
</div>
</div>
</div>
@ -181,7 +181,11 @@ import '../components/staff-survey-chart'
import '../components/classify-bar'
import '../components/list-menu'
import '../components/amplify/shipinguanli/amplify-spjk'
import H265Player from "vue-h265-player";
export default {
components: {
H265Player,
},
data() {
return {
//视频概况
@ -248,8 +252,40 @@ export default {
background: 'url("images/field_layout_video.png") no-repeat center/100% auto'
},
projectId: "163",
showVideo: false,
currentIndex: null,
request:
"http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
url0: "",
url1: "",
url2: "",
url3: "",
showVideoView0: true,
showVideoView1: true,
showVideoView2: true,
showVideoView3: true,
videoPassageList: [],
videoDvrNumber: null,
projectInfo:null,
dept:null,
videoPassageList:[],
}
},
mounted() {
this.$bus.$on("projectChange", res => {
this.projectInfo=res;
this.initVideoMenu();
});
this.$bus.$on("loadProjects", prjs => {
this.projectInfo = prjs;
this.initVideoMenu();
})
this.$bus.$on("deptChange", dept => {
this.dept = dept;
this.initVideoMenu();
});
},
created() {
this.init()
},
@ -489,7 +525,7 @@ export default {
var aiVideoList = [];
var onlineVideoList = [];
cqVideoListData.project_abbreviation = '厂区监控'
cqVideoListData.project_abbreviation = '项目监控'
dgVideoListData.project_abbreviation = '吊钩监控'
aiVideoListData.project_abbreviation = 'AI视频'
@ -1292,48 +1328,99 @@ export default {
this.oWebControl.JS_Disconnect().then(function () { }, function () { });
},
videoPlay(video) {
console.log(video)
debugger
//监控点位图数据处理
var VideoDistribution = this.VideoDistribution
for (var i = 0; i < VideoDistribution.length; i++) {
if (video.token == VideoDistribution[i].token) {
VideoDistribution[i].type = true
} else {
VideoDistribution[i].type = false
}
}
this.VideoDistribution = VideoDistribution
// var VideoDistribution = this.VideoDistribution
// for (var i = 0; i < VideoDistribution.length; i++) {
// if (video.token == VideoDistribution[i].token) {
// VideoDistribution[i].type = true
// } else {
// VideoDistribution[i].type = false
// }
// }
// this.VideoDistribution = VideoDistribution
//视频列表数据处理
var videoListData = this.videoListData
for (var i = 0; i < videoListData.length; i++) {
videoListData[i].type = false
for (var j = 0; j < videoListData[i].videoList.length; j++) {
if (video.token == videoListData[i].videoList[j].token) {
videoListData[i].type = true
videoListData[i].videoList[j].type = true
} else {
videoListData[i].videoList[j].type = false
}
}
}
this.videoListData = videoListData
// //视频列表数据处理
// var videoListData = this.videoListData
// for (var i = 0; i < videoListData.length; i++) {
// videoListData[i].type = false
// for (var j = 0; j < videoListData[i].videoList.length; j++) {
// if (video.token == videoListData[i].videoList[j].token) {
// videoListData[i].type = true
// videoListData[i].videoList[j].type = true
// } else {
// videoListData[i].videoList[j].type = false
// }
// }
// }
// this.videoListData = videoListData
this.videoReturnData = video
this.token = video.token
this.type = video.videoType
this.playVideo();
// this.videoReturnData = video
// this.token = video.token
// this.type = video.videoType
// this.playVideo();
}
},
/** 查询视频配置列表 */
initVideoMenu() {
let param = {
deptId:this.dept.id||0,
projectId:this.proojectInfo.projectId||0
};
listVideoView(param).then((response) => {
this.videoListData = response.data;
});
},
// 表格滚动调用的函数
beforeDestroy() {
clearInterval(this.warningInterval);
},
handleOnError0(error) {
this.showVideoView0 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[0].id);
},
handleOnError1(error) {
this.showVideoView1 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[1].id);
},
handleOnError2(error) {
this.showVideoView2 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[2].id);
},
handleOnError3(error) {
this.showVideoView3 = false;
console.log("error: ", error);
this.updatePassageState(this.videoPassageList[3].id);
},
updatePassageState(id) {
let param = {
id: id,
videoDvrNumber: this.videoDvrNumber,
passageState: "2",
};
editPassageState(param);
},
},
// 表格滚动调用的函数
beforeDestroy() {
clearInterval(this.warningInterval);
},
};
</script>
<style lang="less" >
.project-video {}
.videoView {
color: aliceblue;
float: left;
width: 50%;
height: 50%;
}
.videoViewError {
background-color: #575e65;
text-align: center;
line-height: 324px;
}
</style>

35
yarn.lock
View File

@ -1032,6 +1032,11 @@
resolved "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
"@easydarwin/easywasmplayer@^4.0.10":
version "4.0.13"
resolved "https://registry.npmmirror.com/@easydarwin/easywasmplayer/-/easywasmplayer-4.0.13.tgz#83dc92d880e9b0528e5d4cfc9c669a1a1e420c08"
integrity sha512-yvVlFZgmrydMxAEeA1IHWHgt4T91TGLOHhgCOSLkI1iHddPl7wEw2U7+0E+TcKNHaPf5/FqF/4JR4+W+kRr2HA==
"@eslint/eslintrc@^0.4.3":
version "0.4.3"
resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@ -1990,6 +1995,13 @@ axios@0.24.0:
dependencies:
follow-redirects "^1.14.4"
axios@^0.21.1:
version "0.21.4"
resolved "https://registry.npmmirror.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
dependencies:
follow-redirects "^1.14.0"
babel-helper-vue-jsx-merge-props@^2.0.0:
version "2.0.3"
resolved "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
@ -2856,6 +2868,11 @@ element-ui@^2.15.13:
resize-observer-polyfill "^1.5.0"
throttle-debounce "^1.0.1"
emittery@^0.8.1:
version "0.8.1"
resolved "https://registry.npmmirror.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
emoji-regex@^8.0.0:
version "8.0.0"
resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@ -3317,7 +3334,7 @@ flatted@^3.1.0:
resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
follow-redirects@^1.0.0, follow-redirects@^1.14.4:
follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.4:
version "1.15.2"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@ -4129,6 +4146,11 @@ log-update@^2.3.0:
cli-cursor "^2.0.0"
wrap-ansi "^3.0.1"
logt@^1.4.1:
version "1.5.0"
resolved "https://registry.npmmirror.com/logt/-/logt-1.5.0.tgz#127080ba2eb08953afe656ab08fc92ddcbd47662"
integrity sha512-EZh1fuVJrJkrLCWsBPYxAIQ8qiRT4l2RM0h9rdIGo5T05lpqpaHMbN83tazZkaZlGLrOEtDYxGwkFH8BXGDi8A==
lower-case@^2.0.2:
version "2.0.2"
resolved "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@ -5943,6 +5965,17 @@ vue-eslint-parser@^8.0.1:
lodash "^4.17.21"
semver "^7.3.5"
vue-h265-player@^0.0.24:
version "0.0.24"
resolved "https://registry.npmmirror.com/vue-h265-player/-/vue-h265-player-0.0.24.tgz#22c15550146767882754165a0fdb8858d8ceeb8b"
integrity sha512-yvSmbcCcmTwL2/Z1mr/UDiv0BlE4JoDGCgiqqceziIuErqZZf2Zi29xNKXpODW0P8Up0kxf4UKtkck+lWL13GQ==
dependencies:
"@easydarwin/easywasmplayer" "^4.0.10"
axios "^0.21.1"
emittery "^0.8.1"
logt "^1.4.1"
uuid "^8.3.2"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"