< template >
< div class = "main" >
< div class = "box" >
< div class = "title" > 要素资源 < / div >
< div class = "leftBox" >
< zhmap class = "map" :companyInfoList ="companyInfoList" :deviceVideoInfoList ="deviceVideoInfoList"
@ showCompanyData = "showCompanyData" @ showCameraData = "showCameraData" >
< / zhmap >
< div class = "searchBox" >
< el -select v-model ="Selectvalue" placeholder="请选择" class="topSelect1" >
< el -option label = "企业" value = "企业" >
< / e l - o p t i o n >
< el -option label = "监控" value = "监控" >
< / e l - o p t i o n >
< / e l - s e l e c t >
< el -form :model ="formInline" class = "search" >
< el -form -item class = "formItem" >
< el -input v -model .trim = " formInline.name " placeholder = "请输入名称搜索" clearable
class = "formIpt" > < / e l - i n p u t >
< / e l - f o r m - i t e m >
< el -button type = "primary" @click ="getCompanyList()" > 搜 索 < / el -button >
< el -button @click ="reset()" > 重 置 < / el -button >
< / e l - f o r m >
< / div >
< div class = "companyCanban" v-if ="showCompany" >
< div class = "close" @ click = "showCompany = false" > < / div >
< el -tooltip :content ="companyData.companyName" placement = "top-start" >
< div class = "companyName" > { { companyData . companyName } } < / div >
< / e l - t o o l t i p >
< div class = "companybiaoqian" > 企业类型 ： < div
: class = "{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
v - for = "a in companyData.companyTypeList" : key = "a" > { { a } }
< / div >
< / div >
< div class = "companyxinxi" > 企业地址 ： < span > { { companyData . companyAddress } } < / span > < / div >
< div class = "companyxinxi" > 企业性质 ： < span > { { companyData . companyNature } } < / span > < / div >
< div class = "companyxinxi" > 成立日期 ： < span > { { companyData . establishDate } } < / span > < / div >
< div class = "companyxinxi" > 营业期限 ： < span > { { companyData . businessTermDate } } < / span > < / div >
< div class = "companyxinxi" > 登记机关 ： < span > { { companyData . registerAuthority } } < / span > < / div >
< div class = "companyxinxi" > 企业法人 ： < span > { { companyData . legalPerson } } < / span > < / div >
< div class = "companyxinxi" > 安全责任人 ： < span > { { companyData . emergencyContact } } < / span > < / div >
< div class = "companyxinxi" > 责任人电话 ： < span > { { companyData . emergencyContactPhone } } < / span > < / div >
< div class = "companyxinxi" > 经营范围 ： < span > { { companyData . businessScope } } < / span > < / div >
< div class = "todangan" @click ="toArchive" > 查 看 企 业 档 案 < img src = "../../../public/pbImg/跳转.png" alt = "" > < / div >
< / div >
< div class = "cameraCanban" v-if ="showCamera" >
< div class = "close" @ click = "showCamera = false" > < / div >
< el -tooltip :content ="cameraData.deviceName" placement = "top-start" >
< div class = "companyName" > { { cameraData . deviceName } } < / div >
< / e l - t o o l t i p >
< div class = "companyxinxi" > 隶属企业 ： < span > { { cameraData . companyName } } < / span > < / div >
< div class = "companyxinxi" > 监控 ： < span > { { cameraData . deviceAddress } } < / span > < / div >
< div class = "companyxinxi" > 监控状态 ： < span class = "online" v-if ="cameraData.isOnline == 1" > 在 线 < / span > < span
class = "outline" v - else > 离线 < / span > < / div >
< div class = "todangan" @click ="showVideo" > 查 看 实 时 监 控 < img src = "../../../public/pbImg/跳转.png" alt = "" > < / div >
< / div >
< div class = "tucengCanban" >
< div class = "topText" > 图层 < / div >
< div class = "tucengBox" >
< el -checkbox :indeterminate ="isIndeterminate" v -model = " checkAll "
@ change = "handleCheckAllChange" > 全选 < / e l - c h e c k b o x >
< div style = "margin: 15px 0;" > < / div >
< el -checkbox -group v-model ="checkedCities" @change="handleCheckedCitiesChange" >
< el -checkbox v-for ="city in cities" :label="city" :key ="city" > {{ city
} } < span v-if ="city == '园区企业'" > （ {{ companyInfoList.length }} ） < / span > < span v-else > （ {{
deviceVideoInfoList . length
} } ） < / span > < / e l - c h e c k b o x >
< / e l - c h e c k b o x - g r o u p >
< / div >
< / div >
< el -dialog title = "实时监控" :visible.sync ="diaVisible" class = "picForm" >
< playVideo : video = "{ url: monitorData.wsFlv, index: 1 }" :control ="true" v-if ="diaVisible" > < / playVideo >
< / e l - d i a l o g >
< / div >
< / div >
< / div >
< / template >
< script >
import { statistic , queryCompany , queryVideo } from '@/api/factorResources'
import { realTimeMonitoring } from '@/api/archives'
import playVideo from '@/components/videoPlayer'
import zhmap from './map.vue'
export default {
components : {
zhmap ,
playVideo
} ,
data ( ) {
return {
total : 0 ,
companyInfoList : [ ] ,
deviceVideoInfoList : [ ] ,
diaVisible : false ,
checkedDepts : [ ] ,
deptList : [ ] ,
chuzhiData : { } ,
Selectvalue : '企业' ,
formInline : { } ,
companyData : { } ,
showCompany : false ,
cameraData : { } ,
showCamera : false ,
monitorData : { } ,
checkAll : false ,
cityOptions : [ '视频监控' , '园区企业' ] ,
checkedCities : [ '视频监控' , '园区企业' ] ,
cities : [ '视频监控' , '园区企业' ] ,
isIndeterminate : true
}
} ,
created ( ) {
this . getList ( )
} ,
methods : {
getList ( ) {
statistic ( ) . then ( res => {
this . companyInfoList = res . data . companyInfoList
this . deviceVideoInfoList = res . data . deviceVideoInfoList
} )
} ,
getCompanyList ( ) {
if ( this . Selectvalue == '企业' ) {
queryCompany ( { ... this . formInline } ) . then ( res => {
this . companyInfoList = res . data
this . deviceVideoInfoList = [ ]
} )
} else {
queryVideo ( { ... this . formInline } ) . then ( res => {
this . deviceVideoInfoList = res . data
this . companyInfoList = [ ]
} )
}
} ,
reset ( ) {
this . formInline = { }
this . getList ( )
} ,
showCompanyData ( val ) {
this . companyData = val
this . showCompany = true
} ,
showCameraData ( val ) {
this . cameraData = val
this . showCamera = true
} ,
toArchive ( ) {
sessionStorage . setItem ( 'companyID' , this . companyData . id )
sessionStorage . setItem ( 'companyName' , this . companyData . companyName )
this . $router . push ( {
name : 'archives' ,
} )
} ,
showVideo ( ) {
realTimeMonitoring ( { pageSize : 10 , pageNum : 1 , deviceName : this . cameraData . deviceName , companyId : this . cameraData . companyId } ) . then ( res => {
this . monitorData = res . data [ 0 ]
this . diaVisible = true
} )
} ,
handleCheckAllChange ( val ) {
console . log ( val , 'val' ) ;
this . checkedCities = val ? this . cityOptions : [ ] ;
this . isIndeterminate = false ;
if ( val ) {
this . getList ( )
} else {
this . companyInfoList = [ ]
this . deviceVideoInfoList = [ ]
}
} ,
handleCheckedCitiesChange ( value ) {
console . log ( value , 'value' ) ;
if ( value . length ) {
if ( value . length == 2 ) {
this . getList ( )
} else {
if ( value [ 0 ] == "视频监控" ) {
statistic ( ) . then ( res => {
this . companyInfoList = [ ]
this . deviceVideoInfoList = res . data . deviceVideoInfoList
} )
} else {
statistic ( ) . then ( res => {
this . companyInfoList = res . data . companyInfoList
this . deviceVideoInfoList = [ ]
} )
}
}
} else {
this . companyInfoList = [ ]
this . deviceVideoInfoList = [ ]
}
let checkedCount = value . length ;
this . checkAll = checkedCount === this . cities . length ;
this . isIndeterminate = checkedCount > 0 && checkedCount < this . cities . length ;
} ,
}
}
< / script >
< style lang = "less" scoped >
. main {
width : 100 % ;
height : calc ( 100 % - 80 px ) ;
box - sizing : border - box ;
padding : 20 px ;
. box {
width : 100 % ;
height : 100 % ;
position : relative ;
padding : 70 px 25 px 20 px ;
background : url ( '~@/assets/realtimeWarning/231.png' ) no - repeat ;
background - size : 100 % 100 % ;
box - sizing : border - box ;
display : flex ;
. title {
position : absolute ;
top : 25 px ;
left : 25 px ;
font - size : 18 px ;
color : # FFFFFF ;
letter - spacing : 1 px ;
font - weight : 500 ;
}
. leftBox {
width : calc ( 100 % ) ;
height : 100 % ;
//margin-right: 20px;
box - sizing : border - box ;
background : url ( '~@/assets/realtimeWarning/back002.png' ) no - repeat ;
background - size : 100 % 100 % ;
padding : 20 px ;
position : relative ;
. map {
height : 100 % ;
width : 100 % ;
}
. searchBox {
position : absolute ;
height : 40 px ;
width : 500 px ;
top : 40 px ;
right : 20 px ;
display : flex ;
box - sizing : border - box ;
. topSelect1 {
margin - top : 20 px ;
/deep/ . el - input {
width : 100 px ;
height : 35 px ;
. el - select _ _caret {
line - height : 35 px ;
}
. el - input _ _inner {
height : 35 px ;
// background: url('~@/assets/safetyIndex/选择框.png') no-repeat;
// background-size: 100% 100%;
background : # 3 B4450 ;
font - size : 14 px ;
color : # C4E5FF ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
border : 0 ;
}
}
}
. search {
height : 35 px ;
box - sizing : border - box ;
}
/deep/ . el - input _ _inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
color : rgba ( 234 , 246 , 255 , 0.7 ) ;
height : 35 px ;
. el - range - separator {
color : # ccc ;
}
. el - range - input {
background : rgba ( 0 , 0 , 0 , 0 ) ;
color : # ccc ;
}
}
/deep/ . el - form - item {
margin : 0 ;
. el - form - item _ _content {
line - height : 35 px ;
}
. el - form - item _ _label {
color : # EAF6FF ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
}
}
/deep/ . el - button -- primary {
width : 60 px ;
height : 35 px ;
line - height : 30 px ;
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 : 14 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
/deep/ . el - button -- default {
width : 60 px ;
height : 35 px ;
line - height : 30 px ;
padding : 0 ;
text - align : center ;
background : # 3 B4450 ;
border : 0 ;
font - size : 14 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
}
. companyCanban {
width : 320 px ;
height : 540 px ;
position : absolute ;
top : 120 px ;
right : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 14 px ;
overflow : auto ;
& : : - webkit - scrollbar {
width : 6 px ;
}
// 滚动条里面默认的小方块,自定义样式
& : : - webkit - scrollbar - thumb {
background : rgba ( 255 , 255 , 255 , 0.44 ) ;
border - radius : 5 px ;
}
// 滚动条里面的轨道
& : : - webkit - scrollbar - track {
background : transparent ;
}
. close {
position : absolute ;
top : 14 px ;
right : 14 px ;
width : 18 px ;
height : 18 px ;
background : url ( '../../../public/pbImg/close.png' ) no - repeat ;
background - size : 100 % 100 % ;
cursor : pointer ;
}
. companyName {
width : 100 % ;
height : 20 px ;
font - size : 14 px ;
color : # FFE6D9 ;
letter - spacing : 0 ;
line - height : 16 px ;
text - shadow : 0 0 8 px rgba ( 255 , 119 , 52 , 0.50 ) ;
font - weight : 500 ;
padding - right : 20 px ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ; //禁止换行
}
. companybiaoqian {
margin - top : 10 px ;
width : 100 % ;
height : 28 px ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
overflow : hidden ;
white - space : nowrap ; //禁止换行
width : 270 px ;
text - overflow : ellipsis ; //...
. shewei {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/sheweiback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # B5EBFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhongdian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhongdianback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhibao {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhibaoback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhianback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
}
. companyxinxi {
margin - top : 10 px ;
width : 100 % ;
//height: 28px;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
span {
font - size : 14 px ;
color : # FFFFFF ;
letter - spacing : 0 ;
}
}
. todangan {
margin - top : 15 px ;
width : 100 % ;
height : 30 px ;
line - height : 30 px ;
cursor : pointer ;
font - size : 14 px ;
color : # 4 BCCFF ;
letter - spacing : 0 ;
display : flex ;
justify - content : center ;
align - items : center ;
img {
width : 20 px ;
height : 20 px ;
}
}
}
. tucengCanban {
width : 180 px ;
height : 113 px ;
position : absolute ;
top : 30 px ;
left : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 0 14 px ;
. topText {
height : 30 px ;
border - bottom : 1 px solid rgba ( 212 , 212 , 212 , 0.25 ) ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
display : flex ;
align - items : center ;
justify - content : center ;
}
. tucengBox {
height : 150 px ;
height : 100 % ;
/deep/ . el - checkbox {
color : # D0DEEE ;
}
}
}
. cameraCanban {
width : 320 px ;
height : 232 px ;
position : absolute ;
top : 120 px ;
right : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 14 px ;
overflow : auto ;
& : : - webkit - scrollbar {
width : 6 px ;
}
// 滚动条里面默认的小方块,自定义样式
& : : - webkit - scrollbar - thumb {
background : rgba ( 255 , 255 , 255 , 0.44 ) ;
border - radius : 5 px ;
}
// 滚动条里面的轨道
& : : - webkit - scrollbar - track {
background : transparent ;
}
. close {
position : absolute ;
top : 14 px ;
right : 14 px ;
width : 18 px ;
height : 18 px ;
background : url ( '../../../public/pbImg/close.png' ) no - repeat ;
background - size : 100 % 100 % ;
cursor : pointer ;
}
. companyName {
width : 100 % ;
height : 20 px ;
font - size : 14 px ;
color : # FFE6D9 ;
letter - spacing : 0 ;
line - height : 16 px ;
text - shadow : 0 0 8 px rgba ( 255 , 119 , 52 , 0.50 ) ;
font - weight : 500 ;
}
. companybiaoqian {
margin - top : 10 px ;
width : 100 % ;
height : 28 px ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
overflow : hidden ;
white - space : nowrap ; //禁止换行
width : 270 px ;
text - overflow : ellipsis ; //...
. shewei {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/sheweiback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # B5EBFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhongdian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhongdianback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhibao {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhibaoback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. zhian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/zhianback.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
}
. companyxinxi {
margin - top : 20 px ;
width : 100 % ;
//height: 28px;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
. online {
font - size : 14 px ;
color : # 4 CF993 ;
letter - spacing : 0 ;
font - weight : 400 ;
}
. outline {
font - size : 14 px ;
color : # FF7171 ;
letter - spacing : 0 ;
font - weight : 400 ;
}
span {
font - size : 14 px ;
color : # FFFFFF ;
letter - spacing : 0 ;
}
}
. todangan {
margin - top : 15 px ;
width : 100 % ;
height : 30 px ;
line - height : 30 px ;
cursor : pointer ;
font - size : 14 px ;
color : # 4 BCCFF ;
letter - spacing : 0 ;
display : flex ;
justify - content : center ;
align - items : center ;
img {
width : 20 px ;
height : 20 px ;
}
}
}
}
. picForm {
/deep/ . el - dialog {
background - color : rgba ( 0 , 0 , 0 , 0 ) ;
background : url ( '~@/assets/companyFile/背景.png' ) no - repeat ;
background - size : 100 % 100 % ;
width : 811 px ;
height : 534 px ;
. el - dialog _ _title {
font - size : 16 px ;
color : # EBFFF4 ;
letter - spacing : 2 px ;
text - shadow : 0 0 9 px rgba ( 21 , 255 , 195 , 0.77 ) ;
font - weight : 400 ;
}
. el - dialog _ _body {
box - sizing : border - box ;
height : 480 px ;
position : relative ;
img {
width : 100 % ;
height : 100 % ;
background : # f9f5f5 ;
}
. zhezhao {
width : 771 px ;
height : 420 px ;
position : absolute ;
top : 30 px ;
left : 20 px ;
z - index : 1 ;
background : rgba ( 0 , 0 , 0 , 0.4 ) ;
display : flex ;
justify - content : center ;
align - items : center ;
. el - button -- default {
width : 99 px ;
height : 46 px ;
padding : 0 ;
line - height : 46 px ;
text - align : center ;
background : # 163 C53 ;
font - size : 16 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
border : 0 ;
}
. el - button -- primary {
width : 99 px ;
height : 46 px ;
line - height : 46 px ;
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 : 16 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
}
}
}
}
}
}
< / style >
