1509 lines
64 KiB
Vue
1509 lines
64 KiB
Vue
<template>
|
||
<div class="project-video">
|
||
<div class="screen-content">
|
||
<!-- <div class="analyse-equipment analyse-equipment-position">视频监控</div> -->
|
||
<el-row>
|
||
<!-- <el-col :span="6">
|
||
<module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk">
|
||
<div class="equipment-list-max">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min">
|
||
<div class="equipment-list-gif">
|
||
<img src="images/video_1.png">
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p>项目监控</p>
|
||
<div><span v-cloak>{{ cqNum }}</span>个</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min">
|
||
<div class="equipment-list-gif">
|
||
<img src="images/video_2.png">
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p>吊钩监控</p>
|
||
<div><span v-cloak>{{ dgNum }}</span>个</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min">
|
||
<div class="equipment-list-gif">
|
||
<img src="images/video_3.png">
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p>AI识别监控</p>
|
||
<div><span v-cloak>{{ aiNum }}</span>个</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="equipment-list-min">
|
||
<div class="equipment-list-gif">
|
||
<img src="images/video_4.png">
|
||
</div>
|
||
<div class="equipment-list-data">
|
||
<p>离线视频</p>
|
||
<div><span v-cloak>{{ offLineNum }}</span>个</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</module-one-1-1>
|
||
<module-one-2-1 label="监控点位图">
|
||
<div class="video-field-layout" :style="videoMapStyle">
|
||
<div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
|
||
v-for="video in VideoDistribution" @click="videoPlay(video)">
|
||
<div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
|
||
<img src="/images/camera.png" class="video-bgd-img">
|
||
</div>
|
||
</div>
|
||
</module-one-2-1>
|
||
</el-col> -->
|
||
<el-col :span="4">
|
||
<module-one-3-1 label="视频列表">
|
||
<div class="video-list-max">
|
||
<div class="video-list-min">
|
||
<div class="video-list-for" v-for="item in videoListData">
|
||
<ul class="video-list-ul" v-show="item.type">
|
||
<li :class="video.type==true?'active':''" v-for="(video,idx) in item.videoList" @click.stop="handlePlay(video,idx)">
|
||
<button :class="video.signalState == 1?'video-state-zx':'video-state-lx'"></button>
|
||
<span>{{video.videoName}}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</module-one-3-1>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<module-one-video>
|
||
<div class="video-enlarge-max" v-if="videoType">
|
||
<div class="video-enlarge-title">
|
||
<div>
|
||
<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 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>
|
||
<div class="video-enlarge-max" v-if="vehicleType">
|
||
<div class="video-vehicle-table">
|
||
<el-table :data="vehicleMonitorData" class="elTable">
|
||
<el-table-column label="进出场照片">
|
||
<template slot-scope="scope">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<div class="vehicle-jin-img-max">
|
||
<div class="vehicle-jin-img-bgd">
|
||
<img :src="scope.row.photoUrl" v-if="scope.row.photoUrl">
|
||
</div>
|
||
<div class="vehicle-time" v-cloak>{{ scope.row.uploadTime }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="vehicle-jin-img-max">
|
||
<div class="vehicle-jin-img-bgd">
|
||
<img :src="scope.row.photoUrl2" v-if="scope.row.photoUrl2">
|
||
</div>
|
||
<div class="vehicle-time" v-cloak>{{ scope.row.uploadTime2 }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="vehicle-jin-img-max">
|
||
<div class="vehicle-jin-img-bgd">
|
||
<img :src="scope.row.photoUrl3" v-if="scope.row.photoUrl3">
|
||
</div>
|
||
<div class="vehicle-time" v-cloak>{{ scope.row.uploadTime3 }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="vehicle-jin-img-max">
|
||
<div class="vehicle-jin-img-bgd">
|
||
<img :src="scope.row.photoUrl4" v-if="scope.row.photoUrl4">
|
||
</div>
|
||
<div class="vehicle-time" v-cloak>{{ scope.row.uploadTime4 }}
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</module-one-video>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import '../components/module/module-one-2-1'
|
||
import '../components/module/module-one-3-1'
|
||
import '../components/module/module-one-0-5'
|
||
import '../components/module/module-one-video'
|
||
import '../components/staff-survey-chart'
|
||
import '../components/classify-bar'
|
||
import '../components/amplify/shipinguanli/amplify-spjk'
|
||
import debounce from 'lodash.debounce'
|
||
export default {
|
||
data() {
|
||
return {
|
||
//视频概况
|
||
cqNum: 0,
|
||
dgNum: 0,
|
||
aiNum: 0,
|
||
offLineNum: 0,
|
||
|
||
videoTotalNum: 0,
|
||
onLineNum: 0,
|
||
onLinePer: 0,
|
||
dayOffLineNum: 0,
|
||
monthOffLineNum: 0,
|
||
safetyEducationData: [
|
||
{ text: "视频在线率", value: 0 },
|
||
],
|
||
legendData: ['离线路数', '在线路数'],
|
||
classifyBarData: [],
|
||
//项目视频预警
|
||
rowStyle: {
|
||
color: '#B6CFEF',
|
||
fontSize: '12px',
|
||
height: '32px'
|
||
},
|
||
warningInterval: '',
|
||
warningTableData: [],
|
||
|
||
//视频场布图分布点位
|
||
VideoDistribution: [],
|
||
//视频列表
|
||
videoListData: [],
|
||
|
||
videoReturnData: {},
|
||
videoType: true,
|
||
ptz: false,
|
||
autoPlay: false,
|
||
//车辆列表
|
||
vehicleListData: [],
|
||
vehicleReturnData: {},
|
||
vehicleType: false,
|
||
//监控视频
|
||
mvNav: 1,
|
||
//车辆监控数据
|
||
vehicleMonitorData: [],
|
||
//视频组件
|
||
isplay: true,
|
||
videoHost: "https://video.makalu.cc",
|
||
h5s: "",
|
||
hls: new Hls(),
|
||
hlsvideo: undefined,
|
||
rtmpVideo: "",
|
||
exception: false,
|
||
exMsg: "数据加载异常，请刷新重试...",
|
||
initCount: 0,
|
||
pubKey: "",
|
||
restartInit: false,
|
||
initError: false,
|
||
oWebControl: undefined,
|
||
token: "",
|
||
type: "hls",
|
||
width: 1124,
|
||
height: 850,
|
||
videoMapStyle: {
|
||
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:[],
|
||
projectInfos:[],
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$bus.$on("projectChange", debounce(res => {
|
||
this.projectInfo=res;
|
||
this.initVideoMenu();
|
||
}));
|
||
this.$bus.$on("loadProjects", debounce(prjs => {
|
||
this.projectInfos = prjs;
|
||
//this.initVideoMenu();
|
||
}))
|
||
this.$bus.$on("deptChange", debounce(dept => {
|
||
this.dept = dept;
|
||
//this.initVideoMenu();
|
||
}));
|
||
if(this.$root.hasInitHeader){
|
||
this.initMe();
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
computed: {
|
||
playDivCss() {
|
||
return {
|
||
width: (this.width + "").replace("px", "") + "px",
|
||
height: (this.height + "").replace("px", "") + "px",
|
||
position: "relative"
|
||
}
|
||
},
|
||
exStyle() {
|
||
return {
|
||
textAlign: "center",
|
||
width: (this.width + "").replace("px", "") + "px",
|
||
height: (this.height + "").replace("px", "") + "px"
|
||
}
|
||
},
|
||
PTZDiv() {
|
||
let W = parseInt((this.width + "").replace("px", ""))
|
||
let H = parseInt((this.height + "").replace("px", ""))
|
||
if (W < 400) {
|
||
W = "100px"
|
||
H = "100px"
|
||
} else {
|
||
W = "150px"
|
||
H = "150px"
|
||
}
|
||
return {
|
||
backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
|
||
width: W,
|
||
height: H,
|
||
backgroundSize: "100%",
|
||
position: "relative"
|
||
}
|
||
},
|
||
PTZTop() {
|
||
return {
|
||
width: "33%",
|
||
height: "25%",
|
||
position: "absolute",
|
||
top: "0px",
|
||
left: "33%",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZBottom() {
|
||
return {
|
||
width: "33%",
|
||
height: "25%",
|
||
position: "absolute",
|
||
bottom: "0px",
|
||
left: "33%",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZLeft() {
|
||
return {
|
||
width: "25%",
|
||
height: "33%",
|
||
position: "absolute",
|
||
top: "33%",
|
||
left: "0px",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZRight() {
|
||
return {
|
||
width: "25%",
|
||
height: "33%",
|
||
position: "absolute",
|
||
top: "33%",
|
||
right: "0px",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
VIBtnCss() {
|
||
return {
|
||
width: "30px",
|
||
height: "30px",
|
||
background: "#38314b",
|
||
border: "1px solid #38314b",
|
||
fontSize: "20px",
|
||
outline: "0",
|
||
color: "#FFFFFF"
|
||
}
|
||
},
|
||
zoomViewCss() {
|
||
return {
|
||
width: "75px",
|
||
height: "30px",
|
||
color: "#dddddd",
|
||
background: "rgba(65, 63, 70, 0.5)",
|
||
textAlign: "center",
|
||
border: "0px solid rgba(65, 63, 70, 0.5)",
|
||
outline: "0",
|
||
fontSize: "14px"
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
initMe(){
|
||
this.projectInfo=this.$root.project||{};
|
||
this.dept=this.$root.dept||{};
|
||
this.projectInfos=this.$root.projects||[];
|
||
this.initVideoMenu();
|
||
},
|
||
init() {
|
||
|
||
//this.initVideoMenu();
|
||
//视频列表
|
||
//this.getVideoData()
|
||
//车辆数据初始化
|
||
//this.getVehicleData()
|
||
|
||
//预警分析
|
||
//this.warningInterval = setInterval(this.warningScroll,50);
|
||
//this.getVideoMapUrl()
|
||
},
|
||
getVideoMapUrl() {
|
||
$.post("/video/map/list", {
|
||
projectId: this.projectId
|
||
}, res => {
|
||
if (res.rows[0]) {
|
||
this.videoMapStyle = {
|
||
background: 'url("' + res.rows[0].videoMap + '") no-repeat center/100% auto'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
showui(e) {
|
||
let that = this
|
||
if (e) {
|
||
that.oWebControl.JS_CuttingPartWindow(630, 0, 250, 170);
|
||
} else {
|
||
that.setWndCover();
|
||
}
|
||
},
|
||
showsmallui2(e) {
|
||
let that = this
|
||
if (e.flag && e.data.length > 4) {
|
||
var index = e.index;
|
||
var xIndex = 0;
|
||
switch (index) {
|
||
case 4:
|
||
xIndex = 100;
|
||
break;
|
||
case 5:
|
||
xIndex = 100;
|
||
break;
|
||
case 6:
|
||
xIndex = 310;
|
||
break;
|
||
case 7:
|
||
xIndex = 410;
|
||
break;
|
||
case 8:
|
||
xIndex = 520;
|
||
break;
|
||
}
|
||
that.oWebControl.JS_CuttingPartWindow(xIndex, 0, 545, 65);
|
||
} else {
|
||
that.setWndCover();
|
||
}
|
||
},
|
||
//视频概况
|
||
getVideoOverview() {
|
||
axios.get("https://video.makalu.cc/mkl/api/getVideoOverview?projectId=163").then(res => {
|
||
if (res.data != {} && res.data.data) {
|
||
|
||
this.cqNum = res.data.data.cqNum;
|
||
this.dgNum = res.data.data.dgNum;
|
||
this.aiNum = res.data.data.aiNum;
|
||
this.offLineNum = res.data.data.offLineNum;
|
||
|
||
var data = [];
|
||
var allVideoList = res.data.data.allVideoList;
|
||
if (allVideoList) {
|
||
for (let i = 0; i < allVideoList.length; i++) {
|
||
var obj = {};
|
||
obj.x = allVideoList[i].x
|
||
obj.y = allVideoList[i].y
|
||
obj.angle = allVideoList[i].angle
|
||
obj.title = allVideoList[i].title
|
||
obj.state = allVideoList[i].state
|
||
obj.token = allVideoList[i].token
|
||
if (allVideoList[i].videoSource == 1) {
|
||
obj.videoType = 'h5s'
|
||
} else if (allVideoList[i].videoSource == 2) {
|
||
obj.videoType = 'hk'
|
||
} else if (allVideoList[i].videoSource == 3) {
|
||
obj.videoType = 'hzhk'
|
||
}
|
||
data.push(obj)
|
||
}
|
||
}
|
||
|
||
var token = this.videoListData[0].videoList[0].token
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (token == data[i].token) {
|
||
data[i].type = true
|
||
} else {
|
||
data[i].type = false
|
||
}
|
||
}
|
||
|
||
this.VideoDistribution = data
|
||
}
|
||
})
|
||
},
|
||
//head选择项目返回值
|
||
onItemData(e) {
|
||
if (e.type == 1) {
|
||
location.href = '/weixin/screen/toVideo'
|
||
} else {
|
||
location.reload();
|
||
this.init();
|
||
}
|
||
},
|
||
//视频组件
|
||
playVideo() {
|
||
if (this.type != "hk") {
|
||
this.settingVideoHost()
|
||
this.initVideo()
|
||
this.fullScreenCss()
|
||
} else {
|
||
this.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
|
||
this.windowInitFun();
|
||
}
|
||
},
|
||
//项目视频获取数据
|
||
getVideoData() {
|
||
|
||
|
||
var videoListData = [];
|
||
|
||
var cqVideoListData = {};
|
||
var cqVideoList = [];
|
||
var dgVideoListData = {};
|
||
var dgVideoList = [];
|
||
var aiVideoListData = {};
|
||
var aiVideoList = [];
|
||
var onlineVideoList = [];
|
||
|
||
cqVideoListData.project_abbreviation = '项目监控'
|
||
dgVideoListData.project_abbreviation = '吊钩监控'
|
||
aiVideoListData.project_abbreviation = 'AI视频'
|
||
|
||
var data = []
|
||
axios.post("//video.makalu.cc/ca/isc/info/getVideoPage", {
|
||
deptID: "00010001000300020008"
|
||
}).then(res => {
|
||
let token = res.data.data.token
|
||
axios.post("//video.makalu.cc/ca/isc/info/getVideoListFromDeptID", {
|
||
"token": token
|
||
}).then(res => {
|
||
data = res.data.data
|
||
if (data.length > 0) {
|
||
var allVideoList = res.data.data;
|
||
|
||
for (let video of allVideoList) {
|
||
video.type = false
|
||
if (video.videoSource == 1) {
|
||
video.videoType = "h5s"
|
||
} else if (video.videoSource == 2) {
|
||
video.videoType = "hk"
|
||
} else if (video.videoSource == 3) {
|
||
video.videoType = "hzhk"
|
||
}
|
||
}
|
||
|
||
if (allVideoList.length > 0) {
|
||
for (let i = 0; i < allVideoList.length; i++) {
|
||
if (allVideoList[i].state != 0) {
|
||
onlineVideoList.push(allVideoList[i])
|
||
}
|
||
if (allVideoList[i].videoArea == 1) {
|
||
cqVideoList.push(allVideoList[i]);
|
||
} else if (allVideoList[i].videoArea == 2) {
|
||
dgVideoList.push(allVideoList[i]);
|
||
} else if (allVideoList[i].videoArea == 3) {
|
||
aiVideoList.push(allVideoList[i]);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
cqVideoListData.videoList = cqVideoList;
|
||
dgVideoListData.videoList = dgVideoList;
|
||
aiVideoListData.videoList = aiVideoList;
|
||
|
||
videoListData.push(cqVideoListData);
|
||
videoListData.push(dgVideoListData);
|
||
videoListData.push(aiVideoListData);
|
||
|
||
this.cqNum = cqVideoList.length;
|
||
this.dgNum = dgVideoList.length;
|
||
this.aiNum = aiVideoList.length;
|
||
this.offLineNum = onlineVideoList.length;
|
||
|
||
//cqVideoListData.type = true;
|
||
let init_video_list = 0
|
||
if (cqVideoListData.videoList[0]) {
|
||
cqVideoListData.videoList[0].type = true;
|
||
init_video_list = 0
|
||
} else if (dgVideoListData.videoList[0]) {
|
||
dgVideoListData.videoList[0].type = true;
|
||
init_video_list = 1
|
||
} else if (aiVideoListData.videoList[0]) {
|
||
aiVideoListData.videoList[0].type = true;
|
||
init_video_list = 2
|
||
}
|
||
|
||
|
||
this.videoReturnData = videoListData[init_video_list].videoList[0]
|
||
this.token = videoListData[init_video_list].videoList[0].token
|
||
this.type = videoListData[init_video_list].videoList[0].videoType
|
||
|
||
|
||
for (var i = 0; i < videoListData.length; i++) {
|
||
if (i == 0) {
|
||
videoListData[i].type = true
|
||
} else {
|
||
videoListData[i].type = false
|
||
}
|
||
videoListData[i].id = i
|
||
}
|
||
|
||
this.videoListData = videoListData
|
||
|
||
this.playVideo();
|
||
|
||
|
||
//视频概况，监控点位图
|
||
//this.getVideoOverview()
|
||
|
||
}
|
||
})
|
||
})
|
||
|
||
},
|
||
goAIPage() {
|
||
// location.href = '/weixin/screen/toAIVideoProject'
|
||
location.href = 'https://szh.makalu.cc/weixin/screen/toAIVideoProject'
|
||
},
|
||
//点击视频项目返回数据 默认第一台设备数据
|
||
videoProjectOneData(e) {
|
||
|
||
var VideoDistribution = this.VideoDistribution
|
||
for (let i = 0; i < VideoDistribution.length; i++) {
|
||
if (e.token == VideoDistribution[i].token) {
|
||
VideoDistribution[i].type = true
|
||
} else {
|
||
VideoDistribution[i].type = false
|
||
}
|
||
}
|
||
this.VideoDistribution = VideoDistribution
|
||
|
||
//修改车辆数据
|
||
var vehicle = this.vehicleListData
|
||
for (let i = 0; i < vehicle.length; i++) {
|
||
vehicle[i].type = false
|
||
for (let j = 0; j < vehicle[i].videoList.length; j++) {
|
||
vehicle[i].videoList[j].type = false
|
||
}
|
||
}
|
||
this.vehicleListData = vehicle
|
||
|
||
// //视频和车辆切换
|
||
this.videoType = true
|
||
this.vehicleType = false
|
||
//组件返回值
|
||
this.videoReturnData = e
|
||
this.clearContext()
|
||
// this.playVideo();
|
||
},
|
||
//点击视频设备返回数据
|
||
videoEquipmentData(e) {
|
||
|
||
var VideoDistribution = this.VideoDistribution
|
||
for (let i = 0; i < VideoDistribution.length; i++) {
|
||
if (e.token == VideoDistribution[i].token) {
|
||
VideoDistribution[i].type = true
|
||
} else {
|
||
VideoDistribution[i].type = false
|
||
}
|
||
}
|
||
this.VideoDistribution = VideoDistribution
|
||
|
||
|
||
// //组件返回值
|
||
this.videoReturnData = e
|
||
this.token = e.token
|
||
this.type = e.videoType
|
||
this.clearContext()
|
||
//this.playVideo();
|
||
},
|
||
|
||
//车辆获取数据
|
||
getVehicleData() {
|
||
var data = [
|
||
{
|
||
"other_projectId": JSON.parse(localStorage.getItem("data1")).spgl,
|
||
//"project_abbreviation": JSON.parse(localStorage.getItem("data")).text,
|
||
"id": JSON.parse(localStorage.getItem("data1")).id,
|
||
"dept_id": JSON.parse(localStorage.getItem("data1")).dept_id,
|
||
"videoList": [
|
||
{
|
||
"accountId": 1,
|
||
"videoSource": 2,
|
||
"distinguish": 0,
|
||
"pro_id": JSON.parse(localStorage.getItem("data1")).id,
|
||
"groupID": '',
|
||
"id": 1,
|
||
"state": 0,
|
||
"projectId": JSON.parse(localStorage.getItem("data1")).id,
|
||
"token": '',
|
||
}
|
||
],
|
||
}
|
||
]
|
||
for (let i = 0; i < data.length; i++) {
|
||
data[i].type = false
|
||
for (let j = 0; j < data[i].videoList.length; j++) {
|
||
if (i == 0 && j == 0) {
|
||
data[i].videoList[j].type = true
|
||
} else {
|
||
data[i].videoList[j].type = false
|
||
}
|
||
}
|
||
}
|
||
this.vehicleListData = data
|
||
},
|
||
//点击车辆项目返回数据 默认第一台设备数据
|
||
vehicleProjectOneData(e) {
|
||
//修改视频数据
|
||
var video = this.videoListData
|
||
for (let i = 0; i < video.length; i++) {
|
||
video[i].type = false
|
||
for (let j = 0; j < video[i].videoList.length; j++) {
|
||
video[i].videoList[j].type = false
|
||
}
|
||
}
|
||
this.videoListData = video
|
||
//视频和车辆切换
|
||
this.videoType = false
|
||
this.vehicleType = true
|
||
this.clearContext()
|
||
//组件返回
|
||
this.vehicleMonitorData = []
|
||
axios.get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId).then(res => {
|
||
if (res.data.data.length > 0) {
|
||
var data = res.data.data.filter(item => item.deviceType != "04" && item.deviceType != "03").slice(0, 12)
|
||
var newData = [{
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}, {
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}, {
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}];
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (i <= 3) {
|
||
newData[0].photoUrl = data[0].photoUrl;
|
||
newData[0].uploadTime = data[0].uploadTime;
|
||
newData[0].photoUrl2 = data[1].photoUrl;
|
||
newData[0].uploadTime2 = data[1].uploadTime;
|
||
newData[0].photoUrl3 = data[2].photoUrl;
|
||
newData[0].uploadTime3 = data[2].uploadTime;
|
||
newData[0].photoUrl4 = data[3].photoUrl;
|
||
newData[0].uploadTime4 = data[3].uploadTime;
|
||
} else if (i > 3 && i <= 7) {
|
||
newData[1].photoUrl = data[4].photoUrl;
|
||
newData[1].uploadTime = data[4].uploadTime;
|
||
newData[1].photoUrl2 = data[5].photoUrl;
|
||
newData[1].uploadTime2 = data[5].uploadTime;
|
||
newData[1].photoUrl3 = data[6].photoUrl;
|
||
newData[1].uploadTime3 = data[6].uploadTime;
|
||
newData[1].photoUrl4 = data[7].photoUrl;
|
||
newData[1].uploadTime4 = data[7].uploadTime;
|
||
} else if (i > 7 && i <= 11) {
|
||
newData[2].photoUrl = data[8].photoUrl;
|
||
newData[2].uploadTime = data[8].uploadTime;
|
||
newData[2].photoUrl2 = data[9].photoUrl;
|
||
newData[2].uploadTime2 = data[1].uploadTime;
|
||
newData[2].photoUrl3 = data[10].photoUrl;
|
||
newData[2].uploadTime3 = data[10].uploadTime;
|
||
newData[2].photoUrl4 = data[11].photoUrl;
|
||
newData[2].uploadTime4 = data[11].uploadTime;
|
||
}
|
||
}
|
||
this.vehicleMonitorData = newData;
|
||
}
|
||
})
|
||
},
|
||
//点击车辆设备返回数据
|
||
vehicleEquipmentData(e) {
|
||
this.vehicleMonitorData = []
|
||
this.clearContext()
|
||
axios.get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId).then(res => {
|
||
if (res.data.data.length > 0) {
|
||
var data = res.data.data.filter(item => item.deviceType != "04" && item.deviceType != "03").slice(0, 12)
|
||
var newData = [{
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}, {
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}, {
|
||
photoUrl: '',
|
||
uploadTime: '',
|
||
photoUrl2: '',
|
||
uploadTime2: '',
|
||
photoUrl3: '',
|
||
uploadTime3: '',
|
||
photoUrl4: '',
|
||
uploadTime4: '',
|
||
}];
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (i <= 3) {
|
||
newData[0].photoUrl = data[0].photoUrl;
|
||
newData[0].uploadTime = data[0].uploadTime;
|
||
newData[0].photoUrl2 = data[1].photoUrl;
|
||
newData[0].uploadTime2 = data[1].uploadTime;
|
||
newData[0].photoUrl3 = data[2].photoUrl;
|
||
newData[0].uploadTime3 = data[2].uploadTime;
|
||
newData[0].photoUrl4 = data[3].photoUrl;
|
||
newData[0].uploadTime4 = data[3].uploadTime;
|
||
} else if (i > 3 && i <= 7) {
|
||
newData[1].photoUrl = data[4].photoUrl;
|
||
newData[1].uploadTime = data[4].uploadTime;
|
||
newData[1].photoUrl2 = data[5].photoUrl;
|
||
newData[1].uploadTime2 = data[5].uploadTime;
|
||
newData[1].photoUrl3 = data[6].photoUrl;
|
||
newData[1].uploadTime3 = data[6].uploadTime;
|
||
newData[1].photoUrl4 = data[7].photoUrl;
|
||
newData[1].uploadTime4 = data[7].uploadTime;
|
||
} else if (i > 7 && i <= 11) {
|
||
newData[2].photoUrl = data[8].photoUrl;
|
||
newData[2].uploadTime = data[8].uploadTime;
|
||
newData[2].photoUrl2 = data[9].photoUrl;
|
||
newData[2].uploadTime2 = data[1].uploadTime;
|
||
newData[2].photoUrl3 = data[10].photoUrl;
|
||
newData[2].uploadTime3 = data[10].uploadTime;
|
||
newData[2].photoUrl4 = data[11].photoUrl;
|
||
newData[2].uploadTime4 = data[11].uploadTime;
|
||
}
|
||
}
|
||
this.vehicleMonitorData = newData;
|
||
}
|
||
})
|
||
this.open = "close"
|
||
},
|
||
|
||
//车辆监控视频切换
|
||
onMonitoringVideo(n) {
|
||
this.mvNav = n
|
||
},
|
||
|
||
// 表格滚动 方法 --------- 开始
|
||
warningScroll() {
|
||
let maxHeight = this.$refs.warning.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
|
||
let clientHeight = this.$refs.warning.bodyWrapper.clientHeight;
|
||
if (Math.abs(this.$refs.warning.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
|
||
this.$refs.warning.bodyWrapper.scrollTop = 0;
|
||
} else {
|
||
this.$refs.warning.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
|
||
}
|
||
},
|
||
warningMouseEnter() {//鼠标移入停止滚动
|
||
clearInterval(this.warningInterval);
|
||
},
|
||
warningMouseLeave() {//鼠标离开继续滚动
|
||
this.warningInterval = setInterval(this.warningScroll, 30);
|
||
},
|
||
// 表格滚动 方法 ------ 结束
|
||
//视频组件
|
||
clearContext() {
|
||
try {
|
||
if (this.oWebControl && this.oWebControl != null) {
|
||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
this.oWebControl.JS_Disconnect().then(function () {
|
||
// 断开与插件服务连接成功
|
||
},
|
||
function () {
|
||
// 断开与插件服务连接失败
|
||
}
|
||
);
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
if (this.$refs.playDiv) {
|
||
this.$refs.playDiv.removeAttribute("poster")
|
||
}
|
||
try {
|
||
if (this.hls) {
|
||
this.hls.destroy()
|
||
}
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
try {
|
||
if (this.h5s) {
|
||
H5sPlayerWS.prototype.disconnect
|
||
this.h5s.disconnect()
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
this.hls = new Hls()
|
||
},
|
||
initH5sPlay() {
|
||
let that = this
|
||
let host = window.location.protocol == "https:" ? "47.106.234.91:8443" : "47.106.234.91:8080"
|
||
axios.post(that.videoHost + "/mkl/api/h5sLogin", {}).then(res => {
|
||
let conf = {
|
||
videodom: that.$refs.playDiv,
|
||
protocol: window.location.protocol,
|
||
host: "h5s.makalu.cc",
|
||
rootpath: '/',
|
||
token: that.token,
|
||
hlsver: 'v1',
|
||
session: res.data
|
||
}
|
||
that.$refs.playDiv.setAttribute("autoplay", "autoplay")
|
||
that.h5s = H5sPlayerCreate(conf)
|
||
that.h5s.connect()
|
||
that.timeoutDetectionFun()
|
||
})
|
||
},
|
||
initHlsPlay() {
|
||
this.hlsvideo = this.$refs.playDiv;
|
||
this.hls.destroy()
|
||
this.hls = new Hls()
|
||
let that = this
|
||
axios.post(this.videoHost + "/ca/isc/info/getPlay", {
|
||
protocol: "hls",
|
||
playAdder: that.token
|
||
}).then(res => {
|
||
if (res.data.code != "200") {
|
||
that.exception = true
|
||
setTimeout(function () {
|
||
that.initVideo()
|
||
}, 2000)
|
||
} else {
|
||
that.hls.loadSource(eval("(" + res.data.data + ")").url);
|
||
that.hls.attachMedia(that.hlsvideo);
|
||
that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||
that.hlsvideo.play();
|
||
})
|
||
}
|
||
that.timeoutDetectionFun()
|
||
}).catch(err => {
|
||
that.exception = true
|
||
})
|
||
},
|
||
initRtmpPlay() {
|
||
let that = this
|
||
let video = this.$refs.playDiv
|
||
axios.post(this.videoHost + "/ca/isc/info/getPlay", {
|
||
protocol: "rtmp",
|
||
playAdder: that.token
|
||
}).then(res => {
|
||
if (res.data.code != "200") {
|
||
that.exception = true
|
||
setTimeout(function () {
|
||
that.initVideo()
|
||
}, 2000)
|
||
} else {
|
||
const videoParam = [{
|
||
type: "video/rtmp",
|
||
src: eval("(" + res.data.data + ")").url
|
||
}];
|
||
that.rtmpVideo = videojs(video)
|
||
that.rtmpVideo.ready(function () {
|
||
that.rtmpVideo.src(videoParam)
|
||
that.rtmpVideo.load()
|
||
that.rtmpVideo.play()
|
||
})
|
||
that.timeoutDetectionFun()
|
||
}
|
||
}).catch(err => {
|
||
that.exception = true
|
||
})
|
||
},
|
||
play() {
|
||
if (this.type === "h5s") {
|
||
if (this.isplay) {
|
||
this.h5s.disconnect()
|
||
} else {
|
||
this.h5s.connect();
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
if (this.type === "hls") {
|
||
if (this.isplay) {
|
||
this.hlsvideo.stop()
|
||
} else {
|
||
this.hlsvideo.play()
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
if (this.type === "rtmp") {
|
||
if (this.isplay) {
|
||
this.rtmpVideo.pause()
|
||
} else {
|
||
this.rtmpVideo.play()
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
},
|
||
guid() {
|
||
function S4() {
|
||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||
}
|
||
|
||
return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
|
||
},
|
||
settingVideoHost() {
|
||
this.videoHost = window.location.protocol + "//video.makalu.cc"
|
||
},
|
||
initVideo() {
|
||
let that = this
|
||
this.exception = false
|
||
this.clearContext()
|
||
this.$nextTick(function () {
|
||
switch (that.type) {
|
||
case "h5s":
|
||
that.initH5sPlay()
|
||
break
|
||
case "hls":
|
||
that.initHlsPlay()
|
||
break
|
||
case "rtmp":
|
||
that.initRtmpPlay()
|
||
break
|
||
case "hk":
|
||
that.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
|
||
that.windowInitFun();
|
||
break
|
||
case "hzhk":
|
||
that.initPlugin("21332599", "772SPtFNM1BHMyKHq4xh", "39.101.132.124", 443);
|
||
that.windowInitFun();
|
||
break
|
||
}
|
||
})
|
||
|
||
},
|
||
tripodHandle(order) {
|
||
axios.post(this.videoHost + "/mkl/api/moveCamera", {
|
||
token: this.token,
|
||
action: this.type === "h5s" ? order.toLowerCase() : order,
|
||
h5s: this.type == "h5s"
|
||
})
|
||
console.log("按下")
|
||
},
|
||
stop() {
|
||
axios.post(this.videoHost + "/mkl/api/moveCamera", {
|
||
token: this.token,
|
||
action: "stop",
|
||
h5s: this.type == "h5s"
|
||
})
|
||
console.log("松开")
|
||
},
|
||
fullScreenCss() {
|
||
this.fullScreenWidth = (document.body.scrollWidth - 10) + "px"
|
||
this.fullScreenHeight = (document.body.scrollHeight - 10) + "px"
|
||
},
|
||
fullScreenFun() {
|
||
this.fullScreenShow = true
|
||
this.$emit("fullScreenFun")
|
||
},
|
||
fullScreenCloseFun() {
|
||
this.fullScreenShow = false
|
||
},
|
||
timeoutDetectionFun() {
|
||
let that = this
|
||
//超时时间检测是否正常获取到数据流默认为5秒
|
||
this.timeoutDetection = setTimeout(function () {
|
||
if (parseInt(that.hlsvideo.currentTime.toFixed(1)) == 0) {
|
||
that.hls.destroy()
|
||
that.exception = true
|
||
if (that.restart) {
|
||
that.timeoutDetectionInit = setTimeout(function () {
|
||
that.initVideo()
|
||
}, 2000)
|
||
}
|
||
}
|
||
}, this.outTime * 1000)
|
||
},
|
||
//海康插件开始
|
||
// 创建播放实例
|
||
initPlugin(appkey, secret, ip, port) {
|
||
let that = this
|
||
that.oWebControl = new WebControl({
|
||
szPluginContainer: "uuid", // 指定容器id
|
||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||
iServicePortEnd: 15909,
|
||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||
that.oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||
}).then(function () { // 启动插件服务成功
|
||
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||
cbIntegrationCallBack: that.cbIntegrationCallBack
|
||
});
|
||
|
||
that.oWebControl.JS_CreateWnd("HKPlayWindowControl", Number(that.width), Number(that.height)).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||
that.initHKPlay(appkey, secret, ip, port); // 创建播放实例成功后初始化
|
||
});
|
||
}, function () { // 启动插件服务失败
|
||
});
|
||
},
|
||
cbConnectError: function () { // 创建WebControl实例失败
|
||
this.oWebControl = null;
|
||
that.restartInit = true
|
||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||
that.initCount++;
|
||
if (that.initCount < 3) {
|
||
setTimeout(function () {
|
||
that.initPlugin(appkey, secret, ip, port);
|
||
}, 3000)
|
||
} else {
|
||
that.restartInit = false
|
||
that.initError = true
|
||
that.initCount = 0
|
||
}
|
||
},
|
||
cbConnectClose: function (bNormalClose) {
|
||
// 异常断开：bNormalClose = false
|
||
// JS_Disconnect正常断开：bNormalClose = true
|
||
// console.log("cbConnectClose");
|
||
this.oWebControl = null;
|
||
}
|
||
});
|
||
},
|
||
// 设置窗口控制回调
|
||
setCallbacks() {
|
||
let that = this
|
||
that.oWebControl.JS_SetWindowControlCallback({
|
||
cbIntegrationCallBack: that.cbIntegrationCallBack
|
||
});
|
||
},
|
||
// 推送消息
|
||
cbIntegrationCallBack(oData) {
|
||
// console.log(JSON.stringify(oData.responseMsg));
|
||
},
|
||
//初始化
|
||
initHKPlay(Appkey, Secret, Ip, Port) {
|
||
let that = this
|
||
this.getPubKey(function () {
|
||
|
||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||
let appkey = Appkey; //综合安防管理平台提供的appkey，必填
|
||
let secret = that.setEncrypt(Secret); //综合安防管理平台提供的secret，必填
|
||
let ip = Ip; //综合安防管理平台IP地址，必填
|
||
let playMode = 0; //初始播放模式：0-预览，1-回放
|
||
let port = Port; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||
let snapDir = "D:\\SnapDir"; //抓图存储路径
|
||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||
let layout = "1x1"; //playMode指定模式的布局
|
||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||
let encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||
let toolBarButtonIDs = "4098";
|
||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "init",
|
||
argument: JSON.stringify({
|
||
appkey: appkey, //API网关提供的appkey
|
||
secret: secret, //API网关提供的secret
|
||
ip: ip, //API网关IP地址
|
||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||
port: port, //端口
|
||
snapDir: snapDir, //抓图存储路径
|
||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||
layout: layout, //布局
|
||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||
encryptedFields: encryptedFields, //加密字段
|
||
showToolbar: showToolbar, //是否显示工具栏
|
||
showSmart: showSmart, //是否显示智能信息
|
||
buttonIDs: buttonIDs, //自定义工具条按钮
|
||
toolBarButtonIDs: toolBarButtonIDs
|
||
})
|
||
}).then(function (oData) {
|
||
that.oWebControl.JS_Resize(Number(that.width), Number(that.height)); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||
that.startPreviewFun()
|
||
});
|
||
});
|
||
},
|
||
//获取公钥
|
||
getPubKey(callback) {
|
||
let that = this
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "getRSAPubKey",
|
||
argument: JSON.stringify({
|
||
keyLength: 1024
|
||
})
|
||
}).then(function (oData) {
|
||
// console.log(oData);
|
||
if (oData.responseMsg.data) {
|
||
that.pubKey = oData.responseMsg.data;
|
||
callback()
|
||
}
|
||
})
|
||
},
|
||
//RSA加密
|
||
setEncrypt(value) {
|
||
let encrypt = new JSEncrypt();
|
||
encrypt.setPublicKey(this.pubKey);
|
||
return encrypt.encrypt(value);
|
||
},
|
||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||
setWndCover() {
|
||
let that = this
|
||
let iWidth = $(window).width();
|
||
let iHeight = $(window).height();
|
||
let oDivRect = document.getElementById("HKPlayWindowControl").getBoundingClientRect();
|
||
|
||
let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
|
||
let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
|
||
let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||
let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||
|
||
iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
|
||
iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
|
||
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
|
||
iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;
|
||
|
||
that.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
|
||
if (iCoverLeft != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
|
||
}
|
||
if (iCoverTop != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||
}
|
||
if (iCoverRight != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
|
||
}
|
||
if (iCoverBottom != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
|
||
}
|
||
},
|
||
windowInitFun() {
|
||
let that = this
|
||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||
$(window).resize(function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
|
||
that.setWndCover();
|
||
}
|
||
});
|
||
|
||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||
$(window).scroll(function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
|
||
that.setWndCover();
|
||
}
|
||
});
|
||
|
||
// 标签关闭
|
||
window.onunload = function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
that.oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功
|
||
},
|
||
function () { // 断开与插件服务连接失败
|
||
});
|
||
}
|
||
}
|
||
|
||
},
|
||
//视频预览功能
|
||
startPreviewFun() {
|
||
let that = this
|
||
let streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||
let transMode = 1; //传输协议：0-UDP，1-TCP
|
||
let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||
let wndId = 1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||
let cameraIndexCode = this.token
|
||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||
// console.log(cameraIndexCode)
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "startPreview",
|
||
argument: JSON.stringify({
|
||
cameraIndexCode: cameraIndexCode, //监控点编号
|
||
streamMode: streamMode, //主子码流标识
|
||
transMode: transMode, //传输协议
|
||
gpuMode: gpuMode, //是否开启GPU硬解
|
||
wndId: wndId //可指定播放窗口
|
||
})
|
||
})
|
||
},
|
||
//停止全部预览
|
||
stopAllPreviewFun() {
|
||
this.oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
});
|
||
},
|
||
closeHk() {
|
||
// console.log(this.oWebControl)
|
||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
this.oWebControl.JS_Disconnect().then(function () { }, function () { });
|
||
},
|
||
videoPlay(video) {
|
||
|
||
//监控点位图数据处理
|
||
// 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
|
||
|
||
// this.videoReturnData = video
|
||
// this.token = video.token
|
||
// this.type = video.videoType
|
||
// this.playVideo();
|
||
|
||
},
|
||
/** 查询视频配置列表 */
|
||
initVideoMenu() {
|
||
var videoListData = [];
|
||
|
||
var cqVideoListData = {};
|
||
//var cqVideoList = [];
|
||
var dgVideoListData = {};
|
||
//var dgVideoList = [];
|
||
var aiVideoListData = {};
|
||
//var aiVideoList = [];
|
||
//var onlineVideoList = [];
|
||
|
||
cqVideoListData.id=1;
|
||
cqVideoListData.type=true;
|
||
cqVideoListData.project_abbreviation = '项目监控'
|
||
//dgVideoListData.id=2;
|
||
//dgVideoListData.type=true;
|
||
//dgVideoListData.project_abbreviation = '吊钩监控'
|
||
//aiVideoListData.id=3;
|
||
//aiVideoListData.type=true;
|
||
//aiVideoListData.project_abbreviation = 'AI视频'
|
||
|
||
this.$api.video.listView(this.dept?.id||0,this.projectInfo?.projectId||0).then((response) => {
|
||
cqVideoListData.videoList = response.data;
|
||
videoListData.push(cqVideoListData);
|
||
//videoListData.push(dgVideoListData);
|
||
//videoListData.push(aiVideoListData);
|
||
this.videoListData = videoListData;
|
||
this.cqNum=response.data.length;
|
||
let offNum=0;
|
||
response.data.forEach((it) =>{
|
||
if(it.signalState!="1"){
|
||
offNum++;
|
||
}
|
||
});
|
||
this.offLineNum = offNum;
|
||
});
|
||
},
|
||
// 表格滚动调用的函数
|
||
beforeDestroy() {
|
||
clearInterval(this.warningInterval);
|
||
},
|
||
handlePlay(it, idx) {
|
||
this.videoReturnData=it;
|
||
this.currentIndex = idx;
|
||
this.showVideo = false;
|
||
this.url0 = "";
|
||
this.url1 = "";
|
||
this.url2 = "";
|
||
this.url3 = "";
|
||
this.showVideoView0 = true;
|
||
this.showVideoView1 = true;
|
||
this.showVideoView2 = true;
|
||
this.showVideoView3 = true;
|
||
this.videoDvrNumber = it.videoDvrNumber;
|
||
this.initVideo(
|
||
it.videoDvrNumber,
|
||
this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
|
||
);
|
||
},
|
||
//查询视频通道
|
||
initVideo(videoDvrNumber, url) {
|
||
let that = this;
|
||
this.$api.video.getVideoPassage(videoDvrNumber).then((response) => {
|
||
let data = response.data;
|
||
this.videoPassageList = data;
|
||
that.showVideo = true;
|
||
data.forEach((it, idx) => {
|
||
if (idx == 0) {
|
||
that.url0 = url.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 1) {
|
||
that.url1 = url.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 2) {
|
||
that.url2 = url.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 3) {
|
||
that.url3 = url.replace("{{passage}}", it.passageValue);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
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) {
|
||
//没有好思路，这里先注释
|
||
//this.$api.video.editPassageState(id,this.videoDvrNumber,"2");
|
||
},
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" >
|
||
.project-video {}
|
||
|
||
.videoView {
|
||
color: aliceblue;
|
||
float: left;
|
||
width: 49.5%;
|
||
height: 458px;
|
||
margin-bottom:4px;
|
||
margin-top:2px;
|
||
margin-left:5px;
|
||
margin-right:2px;
|
||
}
|
||
.videoViewError {
|
||
background-color: #575e65;
|
||
text-align: center;
|
||
line-height: 420px;
|
||
}
|
||
.video-enlarge-max{
|
||
padding:0 !important;
|
||
}
|
||
.video-enlarge-content{
|
||
overflow: hidden;
|
||
margin-top:10px;
|
||
}
|
||
</style> |