|
|
<template>
|
|
|
<div class="mainBox">
|
|
|
<div class="topZS"></div>
|
|
|
<div class="title">
|
|
|
实时监控（<span>{{ total }}</span>）
|
|
|
</div>
|
|
|
<el-form :model="formInline" class="search">
|
|
|
<el-form-item label="设备名称：" class="formItem">
|
|
|
<el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
</el-form>
|
|
|
|
|
|
<div class="monitorBox">
|
|
|
<div class="monitorItem" v-for="(item, index) in monitorList" :key="index">
|
|
|
<div class="online" v-if="item.isOnline">
|
|
|
<div class="left">{{ item.deviceVideoSubTypeCn }}</div>
|
|
|
<div class="right"><i class="dian"></i><span>在线</span></div>
|
|
|
</div>
|
|
|
<div class="outline" v-else>
|
|
|
<div class="left">{{ item.deviceVideoSubTypeCn }}</div>
|
|
|
<div class="right"><i class="dian"></i><span>离线</span></div>
|
|
|
</div>
|
|
|
<div class="videoImg">
|
|
|
<div class="boxshadow" v-if="isShow[index].show" @mouseleave="closeShadow(index)"
|
|
|
@click="showDia(item)">
|
|
|
<div><i class="el-icon-video-play"></i> 查看实时监控</div>
|
|
|
</div>
|
|
|
<img :src="item.snapURL" alt="" @mouseover="showShadow(index)">
|
|
|
</div>
|
|
|
<div class="bottomtext"><i class="el-icon-location online1" v-if="false"></i><i
|
|
|
class="el-icon-location outline1" v-else></i> {{ item.channelName }}</div>
|
|
|
<el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
|
|
|
<playVideo :video="{ url: item.wsFlv, index: index }" :control="true" v-if="diaVisible"></playVideo>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="block">
|
|
|
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
|
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
|
|
:page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<div class="bottomZS"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import playVideo from '@/components/videoPlayer'
|
|
|
import { realTimeMonitoring } from '@/api/archives'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
formInline: {},
|
|
|
pageSize: 5,
|
|
|
pageNum: 1,
|
|
|
total: 0,
|
|
|
isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
|
|
|
diaVisible: false,
|
|
|
monitorList: [],
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
playVideo
|
|
|
},
|
|
|
created() {
|
|
|
this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
realTimeMonitoring({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, }).then(res => {
|
|
|
this.monitorList = res.data
|
|
|
this.total = res.total
|
|
|
})
|
|
|
},
|
|
|
showShadow(val) {
|
|
|
this.isShow[val].show = true
|
|
|
},
|
|
|
closeShadow(val) {
|
|
|
this.isShow[val].show = false
|
|
|
},
|
|
|
showDia() {
|
|
|
this.diaVisible = true
|
|
|
},
|
|
|
handleSizeChange(val) {
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
this.pageNum = 1;
|
|
|
this.pageSize = val;
|
|
|
this.getList()
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
console.log(`当前页: ${val}`);
|
|
|
this.pageNum = val;
|
|
|
this.getList()
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.mainBox {
|
|
|
width: 100%;
|
|
|
height: 406px;
|
|
|
background: url('~@/assets/companyFile/背景22136.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 70px 20px 60px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.monitorBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.monitorItem {
|
|
|
height: 100%;
|
|
|
width: calc(20% - 40px);
|
|
|
background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.online {
|
|
|
height: 20px;
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
margin-bottom: 4px;
|
|
|
color: #4CF993;
|
|
|
line-height: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
.left {
|
|
|
color: #EAF6FF;
|
|
|
}
|
|
|
|
|
|
.dian {
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 10px;
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
background: #4CF993;
|
|
|
border-radius: 3px;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.outline {
|
|
|
height: 20px;
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
margin-bottom: 4px;
|
|
|
color: #ccc;
|
|
|
line-height: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
.left {
|
|
|
color: #EAF6FF;
|
|
|
}
|
|
|
|
|
|
.dian {
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 10px;
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
background: #ccc;
|
|
|
border-radius: 3px;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.videoImg {
|
|
|
height: 140px;
|
|
|
width: calc(100% - 20px);
|
|
|
position: relative;
|
|
|
|
|
|
.boxshadow {
|
|
|
position: absolute;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
z-index: 2;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 14px;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
|
|
|
i {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottomtext {
|
|
|
height: 20px;
|
|
|
width: 100%;
|
|
|
font-size: 12px;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 1.75px;
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
.online1 {
|
|
|
color: #4CF993;
|
|
|
}
|
|
|
|
|
|
.outline1 {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picForm {
|
|
|
/deep/ .el-dialog {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
background: url('~@/assets/companyFile/背景.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 811px;
|
|
|
height: 534px;
|
|
|
|
|
|
.el-dialog__title {
|
|
|
font-size: 16px;
|
|
|
color: #EBFFF4;
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.el-dialog__body {
|
|
|
box-sizing: border-box;
|
|
|
height: 480px;
|
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #f9f5f5;
|
|
|
}
|
|
|
|
|
|
.zhezhao {
|
|
|
width: 771px;
|
|
|
height: 420px;
|
|
|
position: absolute;
|
|
|
top: 30px;
|
|
|
left: 20px;
|
|
|
z-index: 1;
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
.el-button--default {
|
|
|
width: 99px;
|
|
|
height: 46px;
|
|
|
padding: 0;
|
|
|
line-height: 46px;
|
|
|
text-align: center;
|
|
|
background: #163C53;
|
|
|
font-size: 16px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.el-button--primary {
|
|
|
width: 99px;
|
|
|
height: 46px;
|
|
|
line-height: 46px;
|
|
|
padding: 0;
|
|
|
text-align: center;
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
border: 0;
|
|
|
background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
font-size: 16px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 20px;
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-button--primary {
|
|
|
margin-top: 5px;
|
|
|
margin-left: 20px;
|
|
|
width: 60px;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
padding: 0;
|
|
|
text-align: center;
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
border: 0;
|
|
|
background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
font-size: 14px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
/deep/.el-form-item {
|
|
|
display: flex;
|
|
|
|
|
|
.el-form-item__label {
|
|
|
color: #EAF6FF;
|
|
|
letter-spacing: 1px;
|
|
|
text-align: center;
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-input {
|
|
|
.el-input__inner {
|
|
|
// background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
|
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
border: 1px solid rgba(40, 132, 126, 1);
|
|
|
color: rgba(234, 246, 255, 0.7);
|
|
|
;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
left: 20px;
|
|
|
width: 162px;
|
|
|
height: 36px;
|
|
|
line-height: 36;
|
|
|
|
|
|
font-size: 16px;
|
|
|
color: #EBFFF4;
|
|
|
letter-spacing: 2px;
|
|
|
line-height: 36px;
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
|
|
|
font-weight: 400;
|
|
|
|
|
|
span {
|
|
|
color: #FF9191;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
</style> |
