<template>
|
<div class="containerSFRight2">
|
<div class="titleC"><span>园区生产企业总览</span>
|
<!-- <button @click="ChangeVideoList()">视频切换</button> -->
|
</div>
|
<div class="videoList">
|
|
<div class="ListItem" v-if="videoState">
|
<div class="vtitle">
|
<span>{{name1}}</span>
|
</div>
|
<Myvideo class="video" :id="index1" :url="vsrc1"></Myvideo>
|
</div>
|
<div class="ListItem" v-if="videoState">
|
<div class="vtitle">
|
<span>{{name2}}</span>
|
</div>
|
<Myvideo class="video" :id="index2" :url="vsrc2"></Myvideo>
|
</div>
|
<div class="ListItem" v-if="videoState">
|
<div class="vtitle">
|
<span>{{name3}}</span>
|
</div>
|
<Myvideo class="video" :id="index3" :url="vsrc3"></Myvideo>
|
</div>
|
<div class="ListItem" v-if="videoState">
|
<div class="vtitle">
|
<span>{{name4}}</span>
|
</div>
|
<Myvideo class="video" :id="index4" :url="vsrc4"></Myvideo>
|
</div>
|
|
|
<div class="ListItem" v-if="pictureState">
|
<div class="ListItemTitle">企业水表井</div>
|
<img :src="p1src" />
|
</div>
|
<div class="ListItem" v-if="pictureState">
|
<div class="ListItemTitle">企业水表井</div>
|
<img :src="p2src" />
|
</div>
|
<div class="ListItem" v-if="pictureState">
|
<div class="ListItemTitle">企业水表井</div>
|
<img :src="p3src" />
|
</div>
|
<div class="ListItem" v-if="pictureState">
|
<div class="ListItemTitle">企业水表井</div>
|
<img :src="p4src" />
|
</div>
|
|
|
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
axios_get,
|
axios_post
|
} from "@/until/request.js"
|
import Myvideo from '../../video/videoWMS3.vue'
|
|
export default {
|
components: {
|
Myvideo
|
},
|
data() {
|
return {
|
|
name1: "",
|
name2: "",
|
name3: "",
|
name4: "",
|
vsrc1: "",
|
vsrc2: "",
|
vsrc3: "",
|
vsrc4: "",
|
index1: 1,
|
index2: 2,
|
index3: 3,
|
index4: 4,
|
|
|
videoList: [],
|
// Picture: [{
|
// src:require("../../../assets/image/Left/water/02006055_1.jpg")
|
// },
|
// {
|
// src:require("../../../assets/image/Left/water/02006055_2.jpg")
|
// },
|
// {
|
// src:require("../../../assets/image/Left/water/02006055_3.jpg")
|
// },
|
// {
|
// src:require("../../../assets/image/Left/water/02006055_4.jpg")
|
// }],
|
|
p1src:require("../../../assets/image/Left/water/02006055_1.jpg"),
|
p2src:require("../../../assets/image/Left/water/02006055_2.jpg"),
|
p3src:require("../../../assets/image/Left/water/02006055_3.jpg"),
|
p4src:require("../../../assets/image/Left/water/02006055_4.jpg"),
|
|
videoState: false,
|
pictureState: false,
|
|
|
}
|
},
|
|
mounted() {
|
this.GetPictureOrVideo();
|
|
},
|
|
methods: {
|
//1污水处理厂 2给水场 3//企业
|
GetPictureOrVideo() {
|
this.pictureState = false;
|
this.videoState = false;
|
let waterIDcard = this.$store.state.waterClock;
|
let MywaterId = waterIDcard.split('&');
|
if (MywaterId[2] != "" && MywaterId[2] != "3") { //3代表企业
|
this.GetVideoList(MywaterId[0]);
|
} else {
|
this.GetPicture(MywaterId[1]);
|
}
|
},
|
|
GetVideoList(id) {
|
this.videoState = true;
|
axios_get("/water/getCorpCameras/" + id).then(response => {
|
console.log(response,"response");
|
this.index1 = Math.random(0, 1999);
|
this.index2 = Math.random(0, 1999);
|
this.index3 = Math.random(0, 1999);
|
this.index4 = Math.random(0, 1999);
|
|
|
this.$nextTick(() => {
|
if (response.data.length >= 4) {
|
|
this.name1 = response.data[0].name;
|
this.vsrc1 = response.data[0].liveUrl;
|
this.name2 = response.data[1].name;
|
this.vsrc2 = response.data[1].liveUrl;
|
this.name3 = response.data[2].name;
|
this.vsrc3 = response.data[2].liveUrl;
|
this.name4 = response.data[3].name;
|
this.vsrc4 = response.data[3].liveUrl;
|
}
|
if (response.data.length == 0) {
|
this.name1 = "暂无视频";
|
this.name2 = "暂无视频";
|
this.name3 = "暂无视频";
|
this.name4 = "暂无视频";
|
}
|
|
if (response.data.length > 0 && response.data.length < 4) {
|
this.name1 = response.data[0].name;
|
this.vsrc1 = response.data[0].liveUrl;
|
|
try {
|
this.name2 = response.data[1].name;
|
this.vsrc2 = response.data[1].liveUrl;
|
} catch {
|
this.name2 = "暂无视频";
|
this.vsrc2 = "";
|
}
|
|
try {
|
this.name3 = response.data[2].name;
|
this.vsrc3 = response.data[2].liveUrl;
|
} catch {
|
this.name3 = "暂无视频";
|
this.vsrc3 = "";
|
}
|
}
|
|
|
|
});
|
|
|
})
|
},
|
|
//获取企业照片
|
GetPicture(id) {
|
this.pictureState = true;
|
let myArr=this.createRandNum();
|
this.p1src=require("../../../assets/image/Left/water/02006055_"+myArr[0]+".jpg");
|
this.p2src=require("../../../assets/image/Left/water/02006055_"+myArr[1]+".jpg");
|
this.p3src=require("../../../assets/image/Left/water/02006055_"+myArr[2]+".jpg");
|
this.p4src=require("../../../assets/image/Left/water/02006055_"+myArr[3]+".jpg");
|
|
},
|
|
//获取0-4的随机数
|
//数的变量
|
|
createRandNum() {
|
var x = 4; //变量x为预期生成的随机数的个数
|
var numArray = []; //声明存放随机数的数组
|
var temp; //声明用来临时存放随机
|
function randNum() {
|
return Math.floor(Math.random() * x)+1; //生成一个随机数，其取值范围为[0, x)
|
}
|
while (numArray.length < x) {
|
temp = randNum();
|
if (numArray.indexOf(temp) == -1) { //判断numArray里有没有和temp相等的数
|
numArray[numArray.length] = temp;
|
}
|
}
|
|
return numArray;
|
}
|
|
|
|
|
},
|
|
watch: {
|
'$store.state.waterClock': {
|
deep: true, //深度监听
|
handler(newValue, oldValue) {
|
if (newValue != "") {
|
this.GetPictureOrVideo();
|
}
|
},
|
},
|
},
|
|
|
|
|
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerSFRight2 {
|
height: 100%;
|
width: 100%;
|
|
.videoList {
|
height: calc(100% - 72px);
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-around;
|
|
.ListItem {
|
width: 1000px;
|
height: 668px;
|
display: flex;
|
flex-direction: column;
|
background-image: url(../../../assets/image/Right/water/videoBg.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
|
.vtitle {
|
height: 80px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: row;
|
justify-content: flex-start;
|
color: #FFFFFF;
|
font-size: 26px;
|
|
span {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
text-indent: 50px;
|
}
|
|
|
}
|
|
.video {
|
margin: 0px 30px;
|
height: 500px;
|
width: calc(100% - 60px);
|
}
|
|
.ListItemTitle {
|
height: 80px;
|
width: 100%;
|
font-size: 26px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
text-indent: 50px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
|
.MyPicture {
|
height: calc(100% - 60px);
|
width: calc(100% - 40px);
|
margin: 20px;
|
}
|
|
.MyPicture /deep/ .el-carousel__container {
|
height: 100%;
|
width: 100%;
|
}
|
|
.img {
|
height: 100%;
|
width: 100%;
|
}
|
|
|
|
|
.titleC {
|
width: 100%;
|
height: 44px;
|
background-image: url(../../../assets/images/titleC.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 36px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
text-indent: 70px;
|
letter-spacing: 3px;
|
|
span {
|
width: 85%;
|
height: 80%;
|
display: flex;
|
align-items: center;
|
|
}
|
|
button {
|
cursor: hand;
|
height: 80%;
|
width: 12%;
|
font-size: 30px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #FFFFFF;
|
border: solid 1px #04A7DC;
|
background-color: #020919;
|
border-radius: 10px;
|
}
|
|
|
|
}
|
</style>
|
