<template>
|
<div class="box">
|
<iframe
|
src="https://172.19.0.28/cas/remoteLogin?username=oa&password=7f5303a2dcfebce8c04a193b3452749eb6a0475add637352455ea1eedd624e1d&service=https://172.19.0.28/cas/eportal/home.action"
|
width="100%"
|
height="100%"
|
></iframe>
|
<!-- <mapindex :toChild="videoData" @fromChild="fromChild"></mapindex>
|
<div class="left_content">
|
<div class="title">
|
<span>视频选择工具</span>
|
<img src="../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="bor_box">
|
<div class="bor"></div>
|
</div>
|
<div class="radio">
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
<el-radio v-model="radio" label="2">备选项</el-radio>
|
</div>
|
<div class="area">
|
<div class="choice">
|
<span>100m</span>
|
</div>
|
<div class="choice">
|
<span>500m</span>
|
</div>
|
<div class="choice">
|
<span>1km</span>
|
</div>
|
</div>
|
<div class="input">
|
<el-input v-model="input" placeholder="自定义距离（m）"></el-input>
|
</div>
|
<div class="title">
|
<span>视频列表</span>
|
</div>
|
<div class="list">
|
<div class="search">
|
<el-input placeholder="" v-model="input3" class="input-with-select">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>
|
|
<el-tree
|
:props="props"
|
:load="loadNode"
|
lazy
|
show-checkbox
|
:default-expanded-keys="[1, 2]"
|
@check-change="handleCheckChange"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</div>
|
</div>
|
|
<div class="middle_content" v-show="!isshow">
|
<div class="btn">
|
<i @click="showvideo"></i>
|
</div>
|
<div class="content">
|
<div class="video_box">
|
<video
|
class="video-js"
|
id="myVideo"
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source src="" type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
</div>
|
|
<div class="right_content">
|
<div class="btn">
|
<i @click="showvideo"></i>
|
</div>
|
<div class="content">
|
<div class="video_box">
|
<video
|
class="video-js"
|
id="myVideo_one"
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source src="" type="application/x-mpegURL" />
|
</video>
|
</div>
|
|
<div class="video_box">
|
<video
|
class="video-js"
|
id="myVideo_two"
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source src="" type="application/x-mpegURL" />
|
</video>
|
</div>
|
|
<div class="video_box">
|
<video
|
class="video-js"
|
id="myVideo_three"
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source src="" type="application/x-mpegURL" />
|
</video>
|
</div>
|
|
<div class="video_box">
|
<video
|
class="video-js"
|
id="myVideo_four"
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source src="" type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
</div>
|
<div v-show="isshow" class="open_btn" @click="showvideo"></div> -->
|
</div>
|
</template>
|
|
<script>
|
import Mapindex from "../../../src/components/mapindex.vue";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { Mapindex },
|
data() {
|
//这里存放数据
|
return {
|
isshow: true,
|
radio: "1",
|
input: "",
|
input3: "",
|
data: [
|
{
|
id: 1,
|
label: "一级 1",
|
children: [
|
{
|
id: 4,
|
label: "二级 1-1",
|
children: [
|
{
|
id: 9,
|
label: "三级 1-1-1",
|
},
|
{
|
id: 10,
|
label: "三级 1-1-2",
|
},
|
],
|
},
|
],
|
},
|
{
|
id: 2,
|
label: "一级 2",
|
children: [
|
{
|
id: 5,
|
label: "二级 2-1",
|
},
|
{
|
id: 6,
|
label: "二级 2-2",
|
},
|
],
|
},
|
{
|
id: 3,
|
label: "一级 3",
|
children: [
|
{
|
id: 7,
|
label: "二级 3-1",
|
},
|
{
|
id: 8,
|
label: "二级 3-2",
|
},
|
],
|
},
|
],
|
props: {
|
label: "lon",
|
// children: "secondnode",
|
isLeaf: "isLeaf",
|
},
|
params: {},
|
videoData: {},
|
myVideo: null,
|
};
|
},
|
|
moutned() {},
|
// 方法集合
|
methods: {
|
fromChild(val) {
|
// var code = val.id.id;
|
var code = "37078313001310604367";
|
this.isshow = false;
|
this.myVideo = videojs(
|
"myVideo",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
var that = this;
|
$(document).ready(function () {
|
var ValueSrc =
|
"http://111.35.21.92:8002/stream/" + code + "/index.m3u8";
|
that.myVideo.src([{ type: "application/x-mpegURL", src: ValueSrc }]);
|
that.myVideo.controls = false;
|
that.myVideo.method = false;
|
that.myVideo.play();
|
});
|
},
|
//选择回调
|
handleCheckChange(data, checked, indeterminate) {
|
if (checked) {
|
this.$refs.tree.setCheckedNodes([data]);
|
}
|
this.videoData = data;
|
if (this.videoData.code != "") {
|
this.isshow = false;
|
var code = "37078313001310604367";
|
// var code = this.videoData.code;
|
var that = this;
|
this.myVideo = videojs(
|
"myVideo",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
|
$(document).ready(function () {
|
var ValueSrc =
|
"http://111.35.21.92:8002/stream/" + code + "/index.m3u8";
|
that.myVideo.src([{ type: "application/x-mpegURL", src: ValueSrc }]);
|
that.myVideo.controls = false;
|
that.myVideo.method = false;
|
that.myVideo.play();
|
});
|
}
|
},
|
loadNode(node, resolve) {
|
if (node.level === 0) {
|
this.getData(resolve);
|
}
|
if (node.level == 1) {
|
// console.log(node);
|
this.getDataChild(node, resolve);
|
}
|
if (node.level > 1) {
|
this.getDataChild1(node, resolve);
|
}
|
},
|
showvideo() {
|
this.isshow = !this.isshow;
|
},
|
async getData(resolve) {
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/rediotree/rediotree/querynode"
|
);
|
resolve(dt.result);
|
// console.log(dt);
|
},
|
async getDataChild(node, resolve) {
|
let obj = {
|
platform: node.data.lon,
|
node: node.level,
|
// secondnode: node.data.secondnode,
|
};
|
// this.props.label = "secondnode";
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/rediotree/rediotree/querynode",
|
{ params: obj }
|
);
|
resolve(dt.result);
|
},
|
async getDataChild1(node, resolve) {
|
if (node.level == 2) {
|
let obj = {
|
platform: node.data.lat,
|
node: node.level,
|
secondnode: node.data.lon,
|
};
|
|
// this.props.label = "secondnode";
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/rediotree/rediotree/querynode",
|
{ params: obj }
|
);
|
|
resolve(dt.result);
|
} else if (node.level == 3) {
|
let obj = {
|
node: node.level,
|
pointname: node.data.lon,
|
};
|
|
// this.props.label = "secondnode";
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/rediotree/rediotree/querynode",
|
{ params: obj }
|
);
|
|
resolve(dt.result);
|
} else {
|
return resolve([]);
|
}
|
},
|
},
|
moutned() {
|
var code = "37078313001310604367";
|
this.myVideo_one = videojs(
|
"myVideo_one",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
this.myVideo_two = videojs(
|
"myVideo_two",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
this.myVideo_three = videojs(
|
"myVideo_three",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
this.myVideo_four = videojs(
|
"myVideo_four",
|
{
|
autoplay: false,
|
controls: false, // 是否显示控制条
|
// height: 300,
|
// width: 300,
|
method: true,
|
},
|
function onPlayerReady() {
|
// that.play();
|
}
|
);
|
var that = this;
|
$(document).ready(function () {
|
var ValueSrcone =
|
"http://111.35.21.92:8002/stream/" +
|
37078303001310028013 +
|
"/index.m3u8";
|
var ValueSrctwo =
|
"http://111.35.21.92:8002/stream/" +
|
37078313001310604367 +
|
"/index.m3u8";
|
var ValueSrcthree =
|
"http://111.35.21.92:8002/stream/37078303001310028013 /index.m3u8";
|
var ValueSrcfour =
|
"http://111.35.21.92:8002/stream/" +
|
37078303001310028013 +
|
"/index.m3u8";
|
that.myVideo_one.src([
|
{ type: "application/x-mpegURL", src: ValueSrcone },
|
]);
|
that.myVideo_one.controls = false;
|
that.myVideo_one.method = false;
|
that.myVideo_one.play();
|
|
that.myVideo_two.src([
|
{ type: "application/x-mpegURL", src: ValueSrctwo },
|
]);
|
that.myVideo_two.controls = false;
|
that.myVideo_two.method = false;
|
that.myVideo_two.play();
|
that.myVideo_three.src([
|
{ type: "application/x-mpegURL", src: ValueSrcthree },
|
]);
|
that.myVideo_three.controls = false;
|
that.myVideo_three.method = false;
|
that.myVideo_three.play();
|
that.myVideo_four.src([
|
{ type: "application/x-mpegURL", src: ValueSrcfour },
|
]);
|
that.myVideo_four.controls = false;
|
that.myVideo_four.method = false;
|
that.myVideo_four.play();
|
});
|
},
|
computed: {
|
videoSendCode() {
|
return this.$store.state.videoCode;
|
},
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
|
box-sizing: border-box;
|
position: relative;
|
.left_content {
|
// margin-top: 316px;
|
width: 10%;
|
// height: 2501px;
|
height: 85%;
|
background: rgba(19, 51, 91, 0.3);
|
border: 2px solid #299cfd;
|
box-shadow: 0px 0px 9px 0px rgba(77, 206, 243, 0.5);
|
border-radius: 16px;
|
box-sizing: border-box;
|
padding: 65px 35px;
|
position: absolute;
|
top: 320px;
|
left: 64px;
|
.title {
|
width: 100%;
|
height: 48px;
|
text-align: center;
|
background: url("../../assets/img/矩形 535 拷贝 6.png") no-repeat center;
|
background-size: 100% 100%;
|
line-height: 48px;
|
span {
|
font-size: 59px;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
}
|
.bor_box {
|
width: 100%;
|
padding: 0 35px;
|
box-sizing: border-box;
|
margin-top: 57px;
|
margin-bottom: 52px;
|
.bor {
|
height: 2px;
|
background: #2cbee1;
|
}
|
}
|
.radio {
|
padding-bottom: 48px;
|
.el-radio {
|
color: #ffffff;
|
margin-right: 127px;
|
}
|
/deep/ .el-radio__inner {
|
width: 43px !important;
|
height: 43px !important;
|
}
|
/deep/ .el-radio__label {
|
font-size: 52px;
|
}
|
}
|
.area {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.choice {
|
cursor: pointer;
|
width: 271px;
|
height: 91px;
|
background: url("../../assets/img/矩形 19 拷贝 11.png") no-repeat center;
|
background-size: 100% 100%;
|
text-align: center;
|
line-height: 91px;
|
padding: 3%;
|
span {
|
font-size: 52px;
|
color: #ffffff;
|
}
|
}
|
}
|
.input {
|
padding-top: 36px;
|
padding-bottom: 54px;
|
margin: 1%;
|
.el-input {
|
width: 500px;
|
height: 150px;
|
// border: 1px solid rgba(33, 200, 255, 0.98);
|
/deep/ .el-input__inner {
|
color: white;
|
height: 100%;
|
background: rgba(3, 67, 137, 0.88);
|
font-size: 46px;
|
}
|
}
|
}
|
.list {
|
margin-top: 39px;
|
background: rgba(19, 51, 91, 0.3);
|
border: 1px solid #00a0e9;
|
height: 60%;
|
overflow: auto;
|
.search {
|
.el-input {
|
width: 100%;
|
height: 93px;
|
border: 1px solid rgba(33, 200, 255, 0.98);
|
/deep/ .el-input__inner {
|
height: 100%;
|
background: rgba(3, 67, 137, 0.88);
|
font-size: 46px;
|
}
|
.el-button {
|
width: 107px;
|
height: 88px;
|
border-radius: 0px 5px 0px 0px;
|
background: rgba(55, 151, 247, 0.7);
|
color: #fff;
|
font-size: 60px;
|
}
|
}
|
}
|
|
.el-tree {
|
background: transparent;
|
// color: white;
|
// width: 100%;
|
// box-sizing: border-box;
|
// height: 100%;
|
// transform: rotateY(0);
|
color: white;
|
}
|
.el-tree /deep/ .el-tree-node__content {
|
background-color: transparent !important;
|
height: 80px !important;
|
}
|
.el-tree /deep/ .el-tree-node__content:hover {
|
background-color: rgba(0, 160, 233, 0.2) !important;
|
}
|
.el-tree /deep/ .is-current > .el-tree-node__content {
|
/* background-color: rgba(0, 160, 233, 0.2) !important; */
|
background-color: transparent !important;
|
}
|
// /* 修改树节点的文字大小 */
|
/deep/ .el-tree-node__label {
|
font-size: 52px;
|
color: white;
|
}
|
// /* 修改树节点的高度 */
|
// /deep/ .el-tree-node__content {
|
// height: 100px;
|
// }
|
// /* 复选框的大小调整 */
|
/deep/ .el-checkbox__inner {
|
width: 50px;
|
height: 50px;
|
}
|
/deep/ .el-checkbox__inner::after {
|
height: 27px;
|
// left: 40px;
|
position: absolute;
|
// top: 20px;
|
|
width: 23px;
|
}
|
|
// /* 修改下拉选箭头的大小 */
|
/deep/ .el-tree-node__expand-icon {
|
font-size: 36px;
|
}
|
}
|
}
|
.middle_content {
|
width: 4274px;
|
height: 2522px;
|
// margin-top: 316px;
|
border: 2px solid #299cfd;
|
box-shadow: 0px 0px 9px 0px rgba(77, 206, 243, 0.5);
|
border-radius: 16px;
|
padding: 50px;
|
box-sizing: border-box;
|
position: absolute;
|
top: calc(50% - 1025px);
|
right: calc(50% - 2000px);
|
|
.btn {
|
height: 62px;
|
padding-bottom: 27px;
|
box-sizing: border-box;
|
i {
|
cursor: pointer;
|
float: right;
|
display: inline-block;
|
width: 62px;
|
height: 62px;
|
background: url("../../assets/img/多边形 997 拷贝 3.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.content {
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.video_box {
|
width: 95%;
|
height: 90%;
|
background: rgb(167, 165, 165);
|
}
|
}
|
}
|
.right_content {
|
width: 3000px;
|
height: 2000px;
|
// margin-top: 316px;
|
border: 2px solid #299cfd;
|
box-shadow: 0px 0px 9px 0px rgba(77, 206, 243, 0.5);
|
border-radius: 16px;
|
padding: 50px;
|
box-sizing: border-box;
|
position: absolute;
|
top: 320px;
|
right: 64px;
|
|
.btn {
|
height: 62px;
|
padding-bottom: 27px;
|
box-sizing: border-box;
|
i {
|
cursor: pointer;
|
float: right;
|
display: inline-block;
|
width: 62px;
|
height: 62px;
|
background: url("../../assets/img/多边形 997 拷贝 3.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.content {
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.video_box {
|
width: 48%;
|
height: 48%;
|
// background: rgb(138, 124, 124);
|
}
|
}
|
}
|
.open_btn {
|
position: absolute;
|
cursor: pointer;
|
width: 62px;
|
height: 62px;
|
background: url("../../assets/img/多边形 997 拷贝 2.png") no-repeat center;
|
background-size: 100% 100%;
|
right: 115px;
|
top: 380px;
|
}
|
}
|
</style>
|
