<template>
<div class="main-page">
<div class="main-header">
<div class="main-title">
<!-- <img src="@/assets/dashboard_images/icon-title.png"> -->
<span>{{ title }}</span>
</div>
</div>
<div class="home-icon">
<a @click="backToIndex">
<img src="@/assets/global_images/home-logo.png">
</a>
</div>
<div class="exit-icon">
<a href="#" @click="logout">
<img src="@/assets/global_images/exit-logo.png">
</a>
</div>
<!-- 左上角设备状态区域 -->
<div class="dev-status-block">
<el-row style="z-index: 99">
<el-col :span="6" class="sub-data-block dev-normal">
<div class="sub-title">正常</div>
<div class="statis-block">
<span v-text="dev.onLine"/>
</div>
</el-col>
<el-col :span="6" class="sub-data-block dev-alarm">
<div class="sub-title">报警</div>
<div class="statis-block">
<span v-text="dev.alarm"/>
</div>
</el-col>
<!--<el-col :span="6" class="sub-data-block dev-offline">-->
<!--<div class="statis-block">-->
<!--<span v-text="dev.offLine"/>-->
<!--</div>-->
<!--<div class="sub-title">离线</div>-->
<!--</el-col>-->
<!--<el-col :span="6" class="sub-data-block dev-closed">-->
<!--<div class="statis-block">-->
<!--<span v-text="dev.closed"/>-->
<!--</div>-->
<!--<div class="sub-title">关闭</div>-->
<!--</el-col>-->
</el-row>
</div>
<!-- 左侧当前报警列表区域 -->
<div v-show="alarmList.length > 0" class="alarm-now-block">
<div class="map-alarm-div-header">报警列表
<span class="icon-right" @click="tableShow=!tableShow">
<i v-if="tableShow" class="el-icon-arrow-up"/>
<i v-else class="el-icon-arrow-down"/>
</span>
</div>
<transition name="el-collapse-transition">
<el-scrollbar
v-show="tableShow"
:style="{ visibility: tableShow ? 'visible' : 'hidden'}"
:class="{ moredatascollor: alarmList.length > 6 }"
:native="false">
<el-table
:data="alarmList"
class="alarm-list-table"
border
stripe
@row-click="alarmRowClick">
<el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row[column.value] }}
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</transition>
</div>
<!-- 中间平面图区域 -->
<div class="map-overview">
<img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
<img
v-for="item in devList"
:id="item.id"
:key="item.id"
:src="item.imgUrl"
:style="{transform: 'rotate('+ item.angle +'deg)',
position: 'absolute',
top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
class="point-camera"
@click="detailDev(item, $event)" />
</div>
<!-- 平面图区域设备类型按钮 -->
<div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
<el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
<img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>人脸识别</span>
</el-col>
<el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>车牌轨迹</span>
</el-col>
<el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>周界防护</span>
</el-col>
<el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>标准数字</span>
</el-col>
<el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>智能球形</span>
</el-col>
<el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>标准半球</span>
</el-col>
</div>
<!-- 平面图区域设备类型按钮 -->
<div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
<el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
<img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
<img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
<span>全部</span>
</el-col>
<el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
<!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
<img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
<img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
<span>摄像头</span>
</el-col>
<el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
<img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
<img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
<span>电子围栏</span>
</el-col>
<el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
<img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
<img v-else src="@/assets/overview_images/icons/icon-temperature-unchecked.png">
<span>温湿度</span>
</el-col>
<el-col v-show="showSmoking" class="dev-icon" @click.native="selectDevByType('smoking', $event)">
<img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-smoking-checked.png">
<img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
<span>烟感</span>
</el-col>
<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
<span>声光报警</span>
</el-col>
</div>
<!-- 右侧平面图索引切换区域 -->
<div class="map-tab">
<!--<div class="tab-top" />-->
<div class="map-index-button index-selected" @click="selectMapTab('main', $event)">营区总览</div>
<div class="map-index-button" @click="selectMapTab('three', $event)">三号楼</div>
<div class="map-index-button" @click="selectMapTab('four', $event)">四号楼</div>
<!--<div class="tab-bottom" />-->
<div v-show="showSubTabGuider" ref="sub-tab" class="sub-tab-guider" />
<div v-show="showSubTabGuider" ref="sub-tab-border" class="sub-tab-border" />
<div v-show="showFloorThree" ref="sub-tab-floor-3" class="sub-tab-content" @click="changeMap('tg_3_1')">三号楼一层</div>
<div v-show="showFloorFour" ref="sub-tab-floor-4-1" class="sub-tab-content" @click="changeMap('tg_4_1')">四号楼一层</div>
<div v-show="showFloorFour" ref="sub-tab-floor-4-5" class="sub-tab-content" @click="changeMap('tg_4_5')">四号楼五层</div>
</div>
<!-- 右侧设备详情及操作区域 -->
<div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
<span class="dev-detail-close" @click="showDevDetail=false" />
<!--<el-row style="margin-top: -25px;">-->
<!--<el-col :span="24">设备名称-->
<!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
<!--</el-col>-->
<!--</el-row>-->
<el-row>
<el-col :span="24">设备编号
<span class="dev-detail-span">{{ dataForm.devcode }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">设备类型
<span class="dev-detail-span">{{ dataForm.typeName }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">在线状态
<span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
</el-col>
</el-row>
<el-row v-show="isFence">
<el-col :span="24">是否开启
<span class="dev-detail-span">{{ dataForm.deviceStatusName }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">安装日期
<span class="dev-detail-span">{{ dataForm.installDate }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">安装位置
<span class="dev-detail-span">{{ dataForm.position }}</span>
</el-col>
</el-row>
</div>
<!-- 右侧报警详情及操作区域 -->
<div v-show="showAlarmDetail" ref="alarm-detail-block" class="alarm-detail-block" style="color: red">
<span class="dev-detail-close" @click="showAlarmDetail=false" />
<el-row style="margin-top: -35px">
<el-col :span="24">设备编号
<span class="dev-detail-span">{{ dataForm.devcode }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">设备类型
<span class="dev-detail-span">{{ dataForm.typeName }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">报警编号
<span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">报警时间
<span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">报警内容
<span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
</el-col>
</el-row>
<el-row v-show="dataForm.type===1">
<el-col :span="24">报警数值
<span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">所属区域
<span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { getProject } from '@/utils/baseConfig'
import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
const cameraTypes = [4, 5, 8, 9, 10, 11]
const fenceTypes = [6, 7]
const smokingTypes = [2]
const temperatureTypes = [1]
const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
data() {
return {
showType: false,
wsPath: process.env.BASE_API+'/websocket/',
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
picture: '1',
deviceTypes: '4,5,8,9,10,11,12,7'
},
cameraClass:'dev-icon',
dev: {
alarm: 0,
onLine: 0,
closed: 0,
offLine: 0
},
imgSizeOriginal: {
width: 2245,
height: 1586
}, // 图片原尺寸
imgSize: {
width: 2245,
height: 1586
}, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
btnNum: 3,
cameraTypeNum: 6,
btnwidth: 210,
halfLeft: 0,
footLeft: 0, // footer部分设备类型按钮偏移量
showFence: true, // 是否显示电子围栏按钮
showTemp: false, // 是否显示温湿度按钮
showSmoking: false, // 是否显示烟感按钮
showSound: false, // 是否显示声光报警按钮
showSubTabGuider: false, // 是否显示二级菜单指引
showFloorThree: false, // 是否显示三层
showFloorFour: false, // 是否显示四层
showDevDetail: false, // 是否显示设备详情
showAlarmDetail: false, // 是否显示设备详情
alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
value: 'devcode',
align: 'center'
},
{
text: '报警内容',
value: 'alarmContent',
align: 'center'
},
{
text: '报警时间',
value: 'alarmTime',
align: 'center',
width: 165
}
], // 报警列表显示列
tableShow: true, // 是否显示告警列表
devList: [], // 设备列表（在地图上显示）
alarmForm: {
id:'',
alarmCode: '',
alarmTime: '',
alarmContent: '',
alarmValue: '',
devcode: '',
devName: '',
areaPosition: '',
areaType: '',
reason: '',
remark: ''
},
dataForm: {
id: '', // id
name: '', // 设备名
devcode: '', // 设备编号
typeName: '', // 设备类型
model: '', // 设备型号
onlineStatusName: '', // 在线状态
deviceStatus: 0, // 设备状态
deviceStatusName: '', // 设备状态
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
}, // 设备详情表单
isFence: false, // 是否电子围栏设备
itemColor: '#f58a88',
checkDevType: [true, false, false, false, false, false], // 选中设备类型
checkDevType1: [false, false, false, false, false, false] // 摄像头类型
}
},
watch:{
checkDevType: function(val) {
if(val[1]){
this.cameraClass = 'dev-icon dev-type-selected'
}else{
this.cameraClass = 'dev-icon'
}
}
},
destroyed() {
window.removeEventListener("click", this.handleKeyup, true);
this.socket.close()
},
mounted() {
window.addEventListener('click',this.handleKeyup, true)
this.wsPath = this.wsPath.replace(/http/,'ws')
this.webSocket()
this.initWindowSize()
this.fetchData()
this.fetchAlarmNowData()
const that = this
window.onresize = function() {
that.initWindowSize()
that.getBgImageSize()
// that.reDrawDevs()
}
},
methods: {
handleKeyup(val){ //单击收起摄像头分类
this.showAlarmDetail = false
this.showDevDetail = false
var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
// console.log(val.target.innerText)
for(var i=0;i<item.length;i++){
if(item[i]===val.target.innerText){
return
}
}
if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
return
}
if( val.target.innerText!=='摄像头') {
this.showType = false
const devTypes = document.querySelectorAll('.dev-icon')
for(var i=0;i<this.checkDevType.length;i++) {
if (this.checkDevType[i]) {
devTypes[i+6].className += ' dev-type-selected'
}
}
}
},
webSocket() {
const that = this
if (typeof (WebSocket) === 'undefined') {
this.$notify({
title: '提示',
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
type: 'warning',
duration: 0
})
} else {
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
const socketUrl = this.wsPath + this.$store.getters.token
this.socket = new WebSocket(socketUrl)
this.socket.onclose = function() {}
// 监听socket打开
this.socket.onopen = function() {
console.log('浏览器WebSocket已打开')
// 加入心跳监测
console.log(new Date())
}
// 监听socket消息接收
this.socket.onmessage = function(msg) {
that.fetchAlarmNowData()
// 转换为json对象
const data = JSON.parse(msg.data)
var str = ""
if(data.alarmValue.length!==0){
str = '('+data.alarmValue+'℃)'
}
console.log(data)
that.$notify({
title: '报警设备：' + data.devcode,
// 这里也可以把返回信息加入到message中显示
message: '报警内容：'+ data.alarmContent + str,
type: 'warning',
onClick: () => {
that.clickAlarm(data.deviceId,data.picture)
}
})
}
// 监听socket错误
this.socket.onerror = function() {
that.$notify({
title: '服务器错误',
message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
type: 'error',
duration: 0
})
}
// 监听socket关闭
this.socket.onclose = function(e) {
console.log('WebSocket已关闭', e, new Date())
}
}
},
handleSelect(key, keyPath) {
this.selectDevByType(key,undefined)
},
clickAlarm(val,pic){
console.log(val)
if(pic==='1'){
this.changeMap('tg_main')
}else if(pic==='2'){
this.changeMap('tg_3_1')
}else if(pic==='3'){
this.changeMap('tg_4_1')
}else if(pic==='4'){
this.changeMap('tg_4_1')
}
setTimeout(() => {
var obj = document.getElementById(val.toString());
var timer = setInterval(() => {
obj.style.display = obj.style.display=="none"?"":"none";
}, 500)
setTimeout(() => {
clearInterval(timer )
}, 10000);
}, 1000);
},
// 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
// 设置footer部分居中显示
if (this.winSize.width >= 1920) {
this.btnwidth= 210
this.footLeft = (this.winSize.width - 3 * 210) / 2
} else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
this.btnwidth= 155
this.footLeft = (this.winSize.width - 3 * 155) / 2
}
},
// 获取图像大小
getBgImageSize() {
// 获取图片尺寸
this.imgSize = {
width: this.$refs['bgImg'].width,
height: this.$refs['bgImg'].height
}
this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
// 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
const that = this
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
if (point !== null) {
if (item.x !== '' && item.y !== '') {
point.style.position = 'absolute'
point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
} else {
point.style.display = 'none'
}
}
})
},
// 获取设备列表
fetchDeviceData() {
overviewDeviceList(this.devListParams).then(response => {
if (response.code === 200) {
const that = this
this.devList = []
response.data.forEach(dev => {
if (dev.x !== '' && dev.y !== '') {
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
if(dev.type===10){ //球
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
}
}else if(dev.type===11){ //半球
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
}
}else if(dev.type===1){ //温湿度
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
}
}else if(dev.type===2){ //烟感
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
}
}else if(dev.type===12){ //声光
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
}
}else { //camera
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
}
}
that.devList.push(dev)
}
})
}
})
},
// 平面图就绪时执行函数
backgroundImageReady() {
this.getBgImageSize()
this.fetchDeviceData()
},
// 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
this.dev.alarm = response.data.alarm.length
this.dev.onLine = response.data.onLine.length
this.dev.closed = response.data.closed.length
this.dev.offLine = response.data.offLine.length
}
})
},
// 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
this.alarmList = response.data
} else {
this.$message.error(response.message)
}
})
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
},
backToIndex() {
this.$router.push('/ctrl')
},
// 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
for (let i = 0; i < devTypes.length; i++) {
if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
devTypes[i].className = 'dev-icon el-col el-col-24'
}
}
if(type !== 'camera'){
this.checkDevType = [false, false, false, false, false, false]
this.checkDevType1 = [false, false, false, false, false, false]
// 添加选中的样式
if (typeof event === 'undefined') {
devTypes[6].className += ' dev-type-selected'
} else {
event.currentTarget.className += ' dev-type-selected'
}
}
if (type === 'all') {
if(this.bgImageSrc===tg_main){
this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
}else if(this.bgImageSrc===tg_4_5){
this.devListParams.deviceTypes = '4'
}else{
this.devListParams.deviceTypes = '1,2,4,12'
}
this.checkDevType[0] = true
} else if(type==='camera'){
for(var i=0;i<this.checkDevType1.length;i++){
if(this.checkDevType1[i]) {
devTypes[i].className += ' dev-type-selected'
}
}
return
}
else if (type === 'fence') {
this.devListParams.deviceTypes = fenceTypes.toString()
this.checkDevType[2] = true
} else if (type === 'temperature') {
this.devListParams.deviceTypes = temperatureTypes.toString()
this.checkDevType[3] = true
} else if (type === 'smoking') {
this.devListParams.deviceTypes = smokingTypes.toString()
this.checkDevType[4] = true
}
else if (type === 'sound') {
this.devListParams.deviceTypes = soundTypes.toString()
this.checkDevType[5] = true
}
else if(type === '4'){
this.devListParams.deviceTypes = '4'
this.checkDevType[1] = true
this.checkDevType1[0] = true
}else if(type === '5'){
this.devListParams.deviceTypes = '5'
this.checkDevType[1] = true
this.checkDevType1[1] = true
}else if(type === '8'){
this.devListParams.deviceTypes = '8'
this.checkDevType[1] = true
this.checkDevType1[2] = true
}else if(type === '9'){
this.devListParams.deviceTypes = '9'
this.checkDevType[1] = true
this.checkDevType1[3] = true
}else if(type === '10'){
this.devListParams.deviceTypes = '10'
this.checkDevType[1] = true
this.checkDevType1[4] = true
}else if(type === '11'){
this.devListParams.deviceTypes = '11'
this.checkDevType[1] = true
this.checkDevType1[5] = true
}
this.fetchDeviceData()
},
// 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
for (let i = 0; i < mapTabs.length; i++) {
if (mapTabs[i].className.indexOf('index-selected') > -1) {
mapTabs[i].className = 'map-index-button'
}
}
// 添加选中的样式
event.currentTarget.className += ' index-selected'
// 选中三层
if (tab === 'three') {
this.showSubTabGuider = true
this.showFloorThree = true
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
this.$refs['sub-tab-border'].style.position = 'absolute'
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
if (this.winSize.width >= 1440) {
this.$refs['sub-tab'].style.right = '290px'
this.$refs['sub-tab'].style.top = '135px'
this.$refs['sub-tab-border'].style.right = '56px'
this.$refs['sub-tab-border'].style.top = '145px'
this.$refs['sub-tab-floor-3'].style.right = '70px'
this.$refs['sub-tab-floor-3'].style.top = '200px'
} else if (this.winSize.width < 1440) {
this.$refs['sub-tab'].style.right = '215px'
this.$refs['sub-tab'].style.top = '102px'
this.$refs['sub-tab-border'].style.right = '40px'
this.$refs['sub-tab-border'].style.top = '103px'
this.$refs['sub-tab-floor-3'].style.right = '50px'
this.$refs['sub-tab-floor-3'].style.top = '143px'
}
} else if (tab === 'four') {
this.showSubTabGuider = true
this.showFloorThree = false
this.showFloorFour = true
this.$refs['sub-tab'].style.position = 'absolute'
this.$refs['sub-tab-border'].style.position = 'absolute'
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
if (this.winSize.width >= 1440) {
this.$refs['sub-tab'].style.right = '290px'
this.$refs['sub-tab'].style.top = '210px'
this.$refs['sub-tab-border'].style.right = '56px'
this.$refs['sub-tab-border'].style.top = '288px'
this.$refs['sub-tab-floor-4-1'].style.right = '70px'
this.$refs['sub-tab-floor-4-1'].style.top = '330px'
this.$refs['sub-tab-floor-4-5'].style.right = '70px'
this.$refs['sub-tab-floor-4-5'].style.top = '370px'
}
else if (this.winSize.width < 1440) {
this.$refs['sub-tab'].style.right = '215px'
this.$refs['sub-tab'].style.top = '158px'
this.$refs['sub-tab-border'].style.right = '40px'
this.$refs['sub-tab-border'].style.top = '206px'
this.$refs['sub-tab-floor-4-1'].style.right = '50px'
this.$refs['sub-tab-floor-4-1'].style.top = '236px'
this.$refs['sub-tab-floor-4-5'].style.right = '50px'
this.$refs['sub-tab-floor-4-5'].style.top = '266px'
}
} else {
this.changeMap('tg_main')
}
},
// 切换地图
changeMap(index) {
this.showSubTabGuider = false
this.showFloorThree = false
this.showFloorFour = false
if (index === 'tg_main') {
this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
this.devListParams.picture = '1'
}else if (index === 'tg_3_1') {
this.devListParams.deviceTypes = '1,2,4,12'
this.devListParams.picture = '2'
} else if (index === 'tg_4_1') {
this.devListParams.deviceTypes = '1,2,4,12'
this.devListParams.picture = '3'
}else if (index === 'tg_4_5') {
this.devListParams.deviceTypes = '4'
this.devListParams.picture = '4'
}
overviewDeviceList(this.devListParams).then(response => {
if (response.code === 200) {
const that = this
this.devList = []
this.initMap(index)
response.data.forEach(dev => {
if (dev.x !== '' && dev.y !== '') {
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
if(dev.type===10){ //球
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
}
}else if(dev.type===11){ //半球
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
}
}else if(dev.type===1){ //温湿度
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
}
}else if(dev.type===2){ //烟感
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
}
}else if(dev.type===12){ //声光
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-green.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
}
}else { //camera
if(dev.deviceStatus === 0){ //normal
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
}else{ //alarm
dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
}
}
this.devList.push(dev)
}
})
}
})
},
initMap(index){
if (index === 'tg_main') {
this.bgImageSrc = tg_main
// this.devListParams.picture = '1'
this.imgSizeOriginal = { width: 2245, height: 1586 }
this.btnNum = 3
this.cameraTypeNum = 6
this.showFence = true // 显示电子围栏
this.showTemp = false // 隐藏温湿度设备
this.showSound = false // 隐藏声光报警设备
this.showSmoking = false // 隐藏烟感设备
// 将二级菜单的指引区隐藏
this.showSubTabGuider = false
this.showFloorThree = false
this.showFloorFour = false
} else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
// this.devListParams.picture = '2'
this.imgSizeOriginal = { width: 2245, height: 1586 }
this.btnNum = 5
this.cameraTypeNum = 1
this.showFence = false // 隐藏电子围栏
this.showTemp = true // 隐藏温湿度
this.showSmoking = true // 隐藏烟感
this.showSound = true // 隐藏声光报警器
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
// this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
this.btnNum = 5
this.cameraTypeNum = 1
this.showFence = false // 隐藏电子围栏
this.showTemp = true // 显示温湿度
this.showSmoking = true // 显示烟感
this.showSound = true // 显示声光报警器
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
// this.devListParams.picture = '4'
this.imgSizeOriginal = { width: 2245, height: 1586 }
this.btnNum = 2
this.cameraTypeNum = 1
this.showFence = false // 隐藏电子围栏
this.showTemp = false // 隐藏温湿度
this.showSmoking = false // 隐藏烟感
this.showSound = false // 隐藏声光报警器
}
this.selectDevByType('all')
},
// 查询并显示设备详情
detailDev(dev, event) {
this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
id: dev.id,
name: dev.name,
devcode: dev.devcode,
typeName: response.data.typeName,
model: dev.model,
onlineStatusName: response.data.onlineStatusName,
position: dev.position,
installDate: dev.installDate,
inOutName: response.data.inOutName,
deviceStatusName: response.data.deviceStatusName
}
// 电子围栏设备有开启字段
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
} else {
this.$message.error(response.message)
}
})
if(dev.deviceStatus===1){
alarmDetailbyCode(dev.devcode).then(response=>{
if(response.code === 200){
this.alarmForm = response.data
}
})
this.showDevDetail = false
this.showAlarmDetail = true
// 弹窗显示设备详情
const targetDev = event.currentTarget // 取到点击到的设备图标div
let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
top = top + 100
this.$refs['alarm-detail-block'].style.position = 'absolute'
this.$refs['alarm-detail-block'].style.top = top + 'px'
this.$refs['alarm-detail-block'].style.left = targetDev.style.left
}else{
this.showDevDetail = true
this.showAlarmDetail = false
// 弹窗显示设备详情
const targetDev = event.currentTarget // 取到点击到的设备图标div
let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
top = top + 100
this.$refs['dev-detail-block'].style.position = 'absolute'
this.$refs['dev-detail-block'].style.top = top + 'px'
this.$refs['dev-detail-block'].style.left = targetDev.style.left
}
},
// 点击报警列表
alarmRowClick(row) {
this.clickAlarm(row.deviceId,row.picture)
},
// 清除设备详情
resetDevDetail() {
this.alarmForm = {}
this.dataForm = {
id: '', // id
name: '', // 设备名
devcode: '', // 设备编号
typeName: '', // 设备类型
model: '', // 设备型号
onlineStatusName: '', // 在线状态
deviceStatus: 0, // 设备状态
deviceStatusName: '', // 设备状态
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
}
}
}
}
</script>
<style lang="scss">
.pop-camera {
margin-bottom: 12px;
.el-menu--popup{
min-width: 160px !important;
}
.el-menu-item{
font-size: 15px;
}
.el-menu-item:hover{
background-color: rgba(2, 61, 131, 0.57) !important;
color: #f58a88 !important;
}
}
</style>
<style lang="scss" scoped>
.bottom-center{
text-align:center;
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: 25px;
}
.main-page {
background-size: cover;
background-color: #023d83;
height: 100vh;
}
.main-header {
width: 100vw;
}
.main-title {
height: 90px;
text-align: center;
padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
width: 52px;
height: 32px;
vertical-align: text-bottom;
}
.home-icon {
width: 26px;
height: 26px;
position: fixed;
left: 20px;
top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
margin-top: 50px;
/*width: 1100px;*/
height: calc(90vh - 200px);
text-align: center;
position: relative;
}
.point {
width: 24px;
height: 24px;
position: relative;
display: inline-block;
cursor: pointer;
}
.point-camera {
/*transform:rotate(60deg);*/
background-size: contain;
@extend .point;
}
.point-fence {
background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
background-size: contain;
@extend .point;
}
.menu-camera {
/deep/ .el-submenu__title {
padding: 0px;
margin-left: 88px;
}
/deep/ .el-submenu__icon-arrow{
display: none;
}
}
/deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
/deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
background-color: rgba(255, 255, 255, 0) !important;
}
/deep/ .menu-camera li{
margin-left: -88px !important;
}
/deep/ .el-menu.el-menu--horizontal {
border-bottom: solid 0px #e6e6e6;
width: 60px !important;
}
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom-width: 0px;
}
.statis-block {
text-align: right;
margin-top: -20px;
margin-right: 40px;
font-size: 30px;
}
.sub-title {
text-align: left;
margin-left: 25px;
margin-top: 16px;
font-size: 30px;
}
.sub-data-block {
width: 215px;
height: 68px;
}
.dev-normal {
background: url("../../assets/overview_images/dev-box.png");
background-repeat: no-repeat;
background-size:cover;
color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/dev-box.png");
margin-left: 5px;
background-repeat: no-repeat;
background-size:cover;
color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
color: #00fff6;
}
.dev-status-block {
position: absolute;
top: 100px;
left: 20px;
color: #ffffff;
}
.alarm-now-block {
position: absolute;
z-index: 500;
top: 300px;
left: 20px;
width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
.icon-right {
cursor: pointer;
margin-left: 20px;
}
}
.el-scrollbar {
/*height: 200px;*/
width: 100%;
}
.moredatascollor {
height: 200px;
}
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 0px !important;
}
.el-table {
font-size: 12px;
}
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
}
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
padding: 10px 0px;
font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
background-color: #023D83;
}
.alarm-now-block /deep/ .el-table__body tr:hover > td {
background-color: #0757A0;
}
.alarm-now-block /deep/ tr.el-table__row--striped td {
background-color: #0757A0;
}
.map-tab {
position: absolute;
right: 10px;
top: 100px;
width: 56px;
button {
margin: 5px 0px;
}
}
.tab-top {
position: relative;
width: 284px;
height: 24px;
background: url("../../assets/overview_images/tab-top-bg.png");
}
.tab-bottom {
position: relative;
width: 284px;
height: 24px;
background: url("../../assets/overview_images/tab-bottom-bg.png");
}
.map-index-button {
position: relative;
width: 56px;
height: 144px;
background: url("../../assets/overview_images/tab-index-unchecked.png");
background-repeat:no-repeat;
writing-mode: vertical-rl;
font-size: 24px;
line-height: 30px;
text-align: center;
color: #FFFFFF;
cursor: pointer;
padding:0px;
display:flex;
-webkit-display:flex;
flex-direction:column;
/* align-content: center; */
/* vertical-align: middle; */
justify-content:center;
}
.index-selected {
background: url("../../assets/overview_images/tab-index-checked.png");
background-repeat:no-repeat;
}
.sub-tab-guider {
width: 149px;
height: 50px;
/*background: url("../../assets/overview_images/sub-tab-guider.png");*/
}
.sub-tab-border {
width: 235px;
height: 145px;
background: url("../../assets/overview_images/sub-tab-border.png");
}
.sub-tab-content {
text-align: center;
color: #FFFFFF;
font-size: 20px;
cursor: pointer;
width: 200px;
}
.dev-detail-block {
/*position: absolute;*/
/*right: 20px;*/
/*bottom: 100px;*/
width: 520px;
height: 335px;
color: #00FFFF;
font-size: 24px;
font-family: "Microsoft YaHei";
padding: 45px 60px;
line-height: 35px;
background: url("../../assets/overview_images/dev-info.png");
.dev-detail-span {
margin-left: 20px;
}
.dev-detail-close::before {
content: "\2716";
position: relative;
top: -20px;
right: -410px;
cursor: pointer;
}
}
.alarm-detail-block {
/*position: absolute;*/
/*right: 20px;*/
/*bottom: 100px;*/
width: 520px;
height: 335px;
font-size: 24px;
font-family: "Microsoft YaHei";
padding: 45px 60px;
line-height: 35px;
background: url("../../assets/overview_images/dev-info-red.png");
.dev-detail-span {
margin-left: 20px;
}
.dev-detail-close::before {
content: "\2716";
position: relative;
top: -20px;
right: -410px;
cursor: pointer;
}
}
.dev-footer {
position: absolute;
bottom: 25px;
}
.dev-icon {
width: 195px;
height: 105px;
vertical-align: middle;
line-height: 65px;
padding: 20px 30px !important;
margin-left: 15px;
cursor: pointer;
background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
font-size: 20px;
color: #00D2FF;
line-height: 65px;
height: 65px;
vertical-align:middle;
float: right;
}
.dev-type-selected {
background: url("../../assets/overview_images/dev-type-border-checked.png");
}
.dev-type-selected span {
color: #f58a88 !important;
}
/*@media(max-width: 1440px) {*/
/* .main-title {*/
/* height: 68px;*/
/* padding-top: 20px;*/
/* background: url("../../assets/overview_images/title-background-1440.png");*/
/* }*/
/* .main-title span {*/
/* font-size: 24px;*/
/* }*/
/* .main-title img {*/
/* margin-right: 15px;*/
/* width: 32px;*/
/* height: 32px;*/
/* }*/
/* .home-icon {*/
/* left: 18px;*/
/* width: 18px;*/
/* height: 18px;*/
/* }*/
/* .exit-icon {*/
/* right: 18px;*/
/* width: 18px;*/
/* height: 18px;*/
/* }*/
/* .home-icon img, .exit-icon img {*/
/* width: 18px;*/
/* height: 18px;*/
/* }*/
/* .dev-icon span {*/
/* font-size: 12px;*/
/* }*/
/*}*/
@media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
}
.main-title span {
font-size: 24px;
}
.main-title img {
margin-right: 15px;
width: 32px;
height: 32px;
}
.home-icon {
left: 16px;
width: 16px;
height: 16px;
}
.exit-icon {
right: 16px;
width: 16px;
height: 16px;
}
.home-icon img, .exit-icon img {
width: 20px;
height: 20px;
}
.map-overview {
margin-top: 35px;
height: calc(90vh - 150px);
}
.point {
width: 16px;
height: 16px;
}
.statis-block {
margin-top: -20px;
font-size: 24px;
}
.sub-title {
margin-top: 10px;
font-size: 24px;
}
.sub-data-block {
width: 161px;
height: 51px;
}
.dev-normal {
background: url("../../assets/overview_images/dev-box-1366.png");
}
.dev-alarm {
background: url("../../assets/overview_images/dev-box-1366.png");
}
.dev-offline {
background: url("../../assets/overview_images/offline-1366.png");
}
.dev-closed {
background: url("../../assets/overview_images/closed-1366.png");
}
.dev-status-block {
top: 90px;
left: 16px;
}
.alarm-now-block {
top: 220px;
left: 16px;
width: 360px;
.map-alarm-div-header {
line-height: 32px;
font-size: 20px;
}
}
.alarm-now-block /deep/ .el-table th {
padding: 8px 0px;
font-size: 16px;
}
.alarm-now-block /deep/ .el-table td {
padding: 5px 0px;
font-size: 12px;
}
.map-tab {
right: 10px;
top: 90px;
width: 40px;
button {
margin: 5px 0px;
}
}
.tab-top {
width: 213px;
height: 18px;
background: url("../../assets/overview_images/tab-top-bg-1366.png");
}
.tab-bottom {
width: 213px;
height: 18px;
background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
}
.map-index-button {
width: 40px;
height: 103px;
background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
font-size: 18px;
line-height: 25px;
}
.index-selected {
background: url("../../assets/overview_images/tab-index-checked-1366.png");
}
.sub-tab-guider {
width: 110px;
height: 37px;
/*background: url("../../assets/overview_images/sub-tab-guider-1366.png");*/
}
.sub-tab-border {
width: 168px;
height: 104px;
background: url("../../assets/overview_images/sub-tab-border-1366.png");
}
.sub-tab-content {
font-size: 16px;
cursor: pointer;
width: 145px;
}
.dev-detail-block {
width: 390px;
height: 251px;
font-size: 16px;
padding: 30px 40px;
line-height: 28px;
background: url("../../assets/overview_images/dev-info-1366.png");
.dev-detail-close::before {
top: -12px;
right: -312px;
}
}
.alarm-detail-block {
width: 390px;
height: 251px;
font-size: 16px;
padding: 30px 40px;
line-height: 28px;
background: url("../../assets/overview_images/dev-info-1366-red.png");
.dev-detail-close::before {
top: -12px;
right: -312px;
}
}
.dev-footer {
bottom: 20px;
}
.dev-icon {
width: 140px;
height: 76px;
line-height: 56px;
padding: 10px 16px !important;
margin-left: 15px;
background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
}
.dev-icon img {
height: 32px;
}
.dev-icon span {
font-size: 16px;
line-height: 56px;
height: 56px;
}
.dev-type-selected {
background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
}
}
</style>
