<template>
|
<el-container class="video-container" style="height: 100%">
|
<el-aside heigth="100%" width="200px">
|
<department-aside @selectedDepartment="selectedDepartment" />
|
</el-aside>
|
|
<el-container class="video-body-right">
|
<el-header style="display: flex; flex-direction: column; height: 120px">
|
<div
|
style="display: flex; justify-content: space-between; height: 80px"
|
>
|
<span
|
style="
|
color: rgb(75, 155, 183);
|
font-weight: 500;
|
text-align: left;
|
font-size: 16px;
|
"
|
>整体趋势</span
|
>
|
<el-date-picker
|
class="video-time-select"
|
v-model="value"
|
type="date"
|
placeholder="选择日期"
|
>
|
</el-date-picker>
|
</div>
|
<!-- <div style="height: 60px; display: flex; justify-content: flex-start">
|
<el-button class="button-one"> 视频预览 </el-button>
|
<el-button class="button-two"> 视频巡查 </el-button>
|
<el-button class="button-third"> 图片巡查 </el-button>
|
</div> -->
|
</el-header>
|
|
<el-main style="display: flex; flex-wrap: wrap; overflow-y: scroll">
|
<div
|
v-for="item in videoData"
|
:key="item.id"
|
style="
|
height: 360px;
|
width: 400px;
|
position: relative;
|
margin-left: 20px;
|
"
|
>
|
<div
|
style="
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
line-height: 18px;
|
position: absolute;
|
z-index: 1;
|
left: 50px;
|
"
|
>
|
{{ item.community }}-{{ item.name }}
|
</div>
|
<video
|
:id="item.id"
|
class="video-js"
|
controls
|
preload="auto"
|
width="400px"
|
height="300px"
|
type="video/mp4"
|
></video>
|
<div class="button-div">
|
<div @click="loadVideo(item)">查看视频</div>
|
<div>视频上报</div>
|
<div @click="create(item)">对讲</div>
|
</div>
|
</div>
|
</el-main>
|
<el-dialog
|
:visible.sync="dialogCreate"
|
title="查看视频"
|
v-show="dialogCreate"
|
:before-close="handleClose2"
|
>
|
<div class="dom" style="width: 100%; height: 600px; position: relative">
|
<div id="dom1" class="dom1"></div>
|
<div id="dom2" class="dom2"></div>
|
<div id="dom3" class="dom3"></div>
|
</div>
|
</el-dialog>
|
<el-footer>
|
<div style="margin-bottom: 0">
|
<el-pagination
|
layout="prev, pager, next"
|
@current-change="currentPageChange"
|
:total="totalNum"
|
:page-size="pageSize"
|
></el-pagination>
|
</div>
|
</el-footer>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
// import "../../video_lib/DHWs.js";
|
import departmentAside from "@/views/operate/fivepack/threepack/components/aside";
|
import videoPoint from "@/api/system/videoPoint";
|
|
export default {
|
components: { departmentAside },
|
data() {
|
return {
|
currentPage: 1,
|
totalNum: 7,
|
pageSize: 8,
|
videoData: [],
|
value: null,
|
dialogCreate: false,
|
cutPosX: 10,
|
cutPosY: 10,
|
cutWidth: 100,
|
cutHeight: 100,
|
crtPosX: 0,
|
crtPosY: 0,
|
crtWidth: 1000,
|
crtHeight: 600,
|
domId: "dom1",
|
ctrl: "ctrl1",
|
};
|
},
|
|
created() {
|
this.getVideoPointList();
|
},
|
mounted() {},
|
methods: {
|
loadVideo(item) {
|
if (item.code || item.platResourceId) {
|
if (Hls.isSupported()) {
|
var video = document.getElementById(item.id);
|
var hls = new Hls();
|
videoPoint
|
.getVideoPointUrl(item.code || item.platResourceId)
|
.then((res) => {
|
if (res.code === 0) {
|
hls.loadSource(res.data);
|
hls.attachMedia(video);
|
setTimeout(() => {
|
video.play();
|
}, 2000);
|
}
|
});
|
}
|
} else {
|
this.$message.error("暂无视频");
|
}
|
},
|
getVideoPointList(data) {
|
let communityId, streetId;
|
if (data) {
|
communityId = data.id;
|
streetId = data.parentId;
|
}
|
videoPoint
|
.getVideoPointList({
|
current: this.currentPage,
|
size: this.pageSize,
|
communityId,
|
streetId,
|
})
|
.then(({ records, total }) => {
|
this.videoData = records;
|
this.totalNum = total;
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
selectedDepartment(data) {
|
this.getVideoPointList(data);
|
},
|
currentPageChange(page) {
|
this.currentPage = page;
|
this.getVideoPointList();
|
},
|
handleClose2() {
|
this.dialogCreate = false;
|
this.destroy();
|
},
|
login() {
|
// 调用登录接口
|
this.ws.detectConnectQt().then((res) => {
|
if (res) {
|
// 连接客户端成功
|
this.ws.login({
|
loginIp: "172.28.194.180",
|
loginPort: "7902",
|
userName: "suichang",
|
userPwd: "a12345677",
|
https: 1,
|
});
|
this.$message.info("登录中...");
|
this.ws.on("loginState", (res) => {
|
this.isLogin = res;
|
if (res) {
|
this.$message.success("登录成功");
|
this.activePanel = "key2";
|
} else {
|
this.$message.info("登录失败");
|
}
|
});
|
} else {
|
// 连接客户端失败
|
this.$message.info("请重新安装客户端");
|
}
|
});
|
},
|
logout() {
|
// 调用登出接口
|
this.ws.logout({
|
loginIp: this.loginIp,
|
});
|
},
|
create(item) {
|
if (item.platResourceId && item.code) {
|
const DHWsInstance = DHWs.getInstance();
|
this.ws = DHWsInstance;
|
console.log(this.ws);
|
this.login();
|
// 调用创建控件接口
|
// if (!this.isLogin) {
|
// this.$message.info('正在登陆客户端，请稍等......');
|
// return false;
|
// }
|
this.dialogCreate = true;
|
setTimeout(() => {
|
let _this = this;
|
const params = [
|
{
|
// ctrlType: "realMonitorUI",
|
ctrlType: "playerWin",
|
ctrlCode: this.ctrl,
|
ctrlProperty: {
|
displayMode: 1,
|
splitNum: 1,
|
channelList: [{ channelId: item.code }],
|
},
|
visible: true,
|
domId: this.domId,
|
},
|
];
|
this.setPos();
|
_this.ws
|
.createCtrl(params)
|
.then((res) => {
|
this.$message.success("创建成功");
|
console.log("res", res);
|
})
|
.catch((e) => {
|
console.log("error;", e);
|
});
|
_this.ws.on("createCtrlResult", (res) => {
|
console.warn(res);
|
});
|
}, 1000);
|
} else {
|
this.$message.error("暂无视频");
|
}
|
},
|
|
destroy() {
|
// 调用销毁控件接口
|
if (!this.isLogin) {
|
this.$Message.info("正在登陆客户端，请稍等......");
|
return false;
|
}
|
const ctrls = this.ws.ctrls.map((i) => {
|
if (i.ctrlCode === this.ctrl) {
|
return i.ctrlCode;
|
}
|
});
|
this.ws.destroyCtrl(ctrls);
|
},
|
setPos() {
|
let target = document.getElementById(this.domId);
|
console.log(target, "target");
|
target.style.right = `${this.crtPosX}px`;
|
target.style.top = `${this.crtPosY}px`;
|
target.style.width = `${this.crtWidth}px`;
|
target.style.height = `${this.crtHeight}px`;
|
if (document.createEvent) {
|
var event = document.createEvent("HTMLEvents");
|
event.initEvent("resize", true, true);
|
window.dispatchEvent(event);
|
} else if (document.createEventObject) {
|
window.fireEvent("onresize");
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.video-time-select {
|
&::v-deep .el-input__prefix {
|
height: auto;
|
}
|
}
|
.video-body-right {
|
padding: 10px;
|
border: 1px solid #ccc;
|
margin-left: 5px;
|
}
|
.button-one {
|
height: 40px;
|
width: 80px;
|
margin-left: 20px;
|
padding: 0;
|
// background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.button-two {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
// background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
.el-button + .el-button {
|
margin: 0;
|
}
|
.button-third {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
// background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.video-js {
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 20px;
|
}
|
.button-div {
|
color: rgb(75, 155, 183);
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 100%;
|
margin-left: 20px;
|
display: flex;
|
justify-content: center;
|
|
div {
|
font-size: 11px;
|
display: flex;
|
justify-content: center;
|
cursor: pointer;
|
border: 1px solid rgb(75, 155, 183);
|
|
width: 33.3%;
|
}
|
}
|
|
.bottonOne {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
margin-left: 20px;
|
width: 33.3%;
|
border: 1px solid rgb(75, 155, 183);
|
cursor: pointer;
|
}
|
|
.bottonTwo {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 33.3%;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 90px;
|
cursor: pointer;
|
}
|
.el-pagination {
|
line-height: 40px;
|
}
|
.bottonThird {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 33.3%;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 160px;
|
cursor: pointer;
|
}
|
|
::v-deep .el-header {
|
// background-color: #09152f;
|
color: #000;
|
line-height: 60px;
|
}
|
|
// ::v-deep .el-aside {
|
// background-color: #09152f;
|
// }
|
|
// ::v-deep .el-menu {
|
// background-color: #09152f;
|
// }
|
|
::v-deep .el-main,
|
// ::v-deep .el-footer {
|
// background-color: #09152f;
|
// }
|
|
::v-deep .el-tree-node__label {
|
line-height: 30px;
|
font-size: 14px;
|
color: rgb(75, 155, 183);
|
}
|
.dom1 {
|
margin: 0 auto;
|
}
|
|
video::-webkit-media-controls-timeline {
|
display: none;
|
}
|
|
video::-webkit-media-controls-current-time-display {
|
display: none;
|
}
|
|
video::-webkit-media-controls-time-remaining-display {
|
display: none;
|
}
|
|
video::-webkit-media-controls-mute-button {
|
display: none;
|
}
|
|
video::-webkit-media-controls-toggle-closed-captions-button {
|
display: none;
|
}
|
</style>
|
