<template>
|
<div>
|
<b-tabs >
|
<b-tab v-for="mapIteam in mapList" :key="mapIteam.id" :title="mapIteam.name" :active="tabMap === mapIteam.id" @click="changeTabMap(mapIteam)" ></b-tab>
|
</b-tabs>
|
<b-card no-body class="border-top-0 pr" style="height: 80vh;">
|
<div class="mapDeviceType-box border">
|
<!-- mapDeviceType -->
|
<div class="mapDeviceType-item flex-box py-2 pl10 pr20" v-for="(item,index) in mapDeviceType" :key="index">
|
<div class="icon pr5">
|
<img :src="'/static/img/map/'+item.deviceTypeIcon+'.png'" width="20px" height="20px" :onerror="noneImg" :alt="item.icon" @mousedown.prevent>
|
</div>
|
<div class="content">{{item.deviceTypeName}}（{{item.count}}）</div>
|
</div>
|
</div>
|
<div class="alarm-box">
|
<div class="badge badge-success">正常（{{alarmCountInfo&&alarmCountInfo.noAlarmCount?alarmCountInfo.noAlarmCount:'0'}}）</div>
|
<div class="badge badge-danger">报警（{{alarmCountInfo&&alarmCountInfo.alarmCount?alarmCountInfo.alarmCount:'0'}}）</div>
|
<div class="badge badge-default">未在线（{{alarmCountInfo&&alarmCountInfo.unOnlieCount?alarmCountInfo.unOnlieCount:'0'}}）</div>
|
</div>
|
<svgDIYMapModel :mapInfo="mapInfo" :iconArr="deviceArr" @iconIteamFn="clickMapDevice" :alarmDeviceList="alarmCountInfo && alarmCountInfo.alarmData"/>
|
<h5 class="box-title">校园监控设备分布图</h5>
|
</b-card>
|
<deviceInfoModal ref="deviceInfoModal" :deviceInfo="deviceInfo"/>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* 权限菜单弹窗
|
* @param { Array } rolesList 权限菜单树形结构
|
* @param { Array } rolePermission 权限菜单回显数组，为权限菜单对应id
|
* @return { String } submit 返回选中权限id
|
* @return { Function } showModel 打开弹窗
|
* @return { Function } hideModal 关闭弹窗
|
*/
|
import CommonModel from '@/server/models/CommonModel'
|
import {
|
getDIYMapBasicInfo,
|
getDIYMapmapDevices,
|
getDeviceHumidityNum,
|
getDeviceTemperatureNum
|
} from '@/server/common.js'
|
import { getMapDeviceType } from '@/server/home.js'
|
import svgDIYMapModel from '@/components/map/svgDIYMapModel'
|
import deviceInfoModal from './DeviceInfoModal'
|
export default {
|
name: 'homeSvgMap',
|
props: {},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
/* webSocket声明 */
|
CanteenStateWS: new CommonModel(),
|
alarmDeviceCountWsClient: null,
|
alarmCountInfo: null,
|
|
mapList: [],
|
tabMap: '',
|
/* 地图组件使用 */
|
mapInfo: null,
|
deviceArr: [],
|
|
deviceInfo: null,
|
|
mapDeviceType: []
|
}
|
},
|
methods: {
|
/* 设备类型 */
|
async getMapDeviceType(mapId) {
|
let res = await getMapDeviceType({
|
orgId: this.userInfo.orgId,
|
mapId
|
})
|
if (res && !res.error) {
|
this.mapDeviceType = res
|
}
|
},
|
async getDIYMapBasicInfo() {
|
let res = await getDIYMapBasicInfo({
|
orgId: this.userInfo.orgId,
|
modules: 'home'
|
})
|
if (res && res.length) {
|
this.mapList = res
|
/* 初始化 */
|
this.tabMap = res.length ? '' : res[0].id
|
this.mapInfo = res.length ? null : res[0]
|
// res[0] && res[0].id && this.getDIYMapmapDevices(res[0].id)
|
} else {
|
this.$toast({
|
message: '暂无地图',
|
type: 'warning'
|
})
|
}
|
},
|
async getDIYMapmapDevices(mapId) {
|
let res = await getDIYMapmapDevices({
|
orgId: this.userInfo.orgId,
|
mapId
|
})
|
if (res && !res.error) {
|
this.deviceArr = res
|
}
|
},
|
/* 获取湿度数值 */
|
async getDeviceHumidityNum(data) {
|
let res = await getDeviceHumidityNum({
|
orgId: this.userInfo.orgId,
|
deviceId: data.id
|
})
|
if (res && !res.error) {
|
this.deviceInfo = {
|
...this.deviceInfo,
|
humidityNum: res.result ? res.result : null
|
}
|
} else if (res.error) {
|
this.$toast({
|
message: res && res.message ? res.message : '',
|
type: 'error'
|
})
|
}
|
},
|
/* 获取温度数值 */
|
async getDeviceTemperatureNum(data) {
|
let res = await getDeviceTemperatureNum({
|
orgId: this.userInfo.orgId,
|
deviceId: data.id
|
})
|
if (res && !res.error) {
|
this.deviceInfo = {
|
...this.deviceInfo,
|
temperatureNum: res.result ? res.result : null
|
}
|
} else if (res.error) {
|
this.$toast({
|
message: res && res.message ? res.message : '',
|
type: 'error'
|
})
|
}
|
},
|
/* ws获取地图警报数量 start */
|
getAllAlarmDeviceCountMap(mapId) {
|
try {
|
let token =
|
sessionStorage.getItem('loginedInfo') &&
|
JSON.parse(
|
sessionStorage.getItem('loginedInfo')
|
).access_token.replace('bearer ', '')
|
this.CanteenStateWS.getAllAlarmDeviceCountMap(
|
{
|
orgId: this.userInfo.orgId,
|
access_token: token,
|
mapId,
|
startTime: this.$moment(
|
this.$moment().format('YYYY-MM-DD 00:00:00'),
|
'YYYY-MM-DD HH:mm:ss'
|
).valueOf(),
|
endTime: this.$moment(
|
this.$moment().format('YYYY-MM-DD 23:59:59'),
|
'YYYY-MM-DD HH:mm:ss'
|
).valueOf()
|
},
|
this.alarmCountInfoMsg,
|
err => {
|
console.log(err, '获取地图警报数量--出错')
|
},
|
close => {
|
console.log(close, '获取地图警报数量--关闭')
|
},
|
e => {
|
this.alarmDeviceCountWsClient = e
|
}
|
)
|
} catch (ex) {
|
console.log('获取地图警报数量--异常', ex)
|
}
|
},
|
alarmCountInfoMsg(res) {
|
if (res) {
|
this.alarmCountInfo = res
|
}
|
// console.log(res, '获取地图警报数量--接收数据')
|
},
|
/* ws获取地图警报数量 end */
|
changeTabMap(mapIteam) {
|
if (mapIteam.id && mapIteam.url && mapIteam.id) {
|
this.tabMap = mapIteam.id
|
this.mapInfo = mapIteam
|
/* 查询设备 */
|
this.getDIYMapmapDevices(mapIteam.id)
|
this.getMapDeviceType(mapIteam.id)
|
} else {
|
this.$notify({
|
group: 'foo',
|
type: 'warn',
|
title: '抱歉，这条数据有错误',
|
text: '这条数据有错误，请联系管理员'
|
})
|
return false
|
}
|
},
|
clickMapDevice({ data }) {
|
const josn = JSON.parse(JSON.stringify(data))
|
if (data) {
|
/* 根据 data.deviceType */
|
josn.deviceLable = this.$store.state.deviceDict[data.deviceType]
|
switch (data.deviceType) {
|
case '1':
|
break
|
case '2':
|
break
|
case '3':
|
break
|
case '4':
|
this.getDeviceTemperatureNum(josn)
|
break
|
case '5':
|
this.getDeviceHumidityNum(josn)
|
break
|
}
|
this.deviceInfo = josn
|
this.$refs.deviceInfoModal.showModal()
|
}
|
}
|
},
|
created() {
|
this.getDIYMapBasicInfo()
|
},
|
watch: {
|
mapInfo: {
|
handler(newVal, oldVal) {
|
if (newVal && newVal !== oldVal) {
|
/* ws 获取报警数量 */
|
this.alarmDeviceCountWsClient && this.alarmDeviceCountWsClient.close()
|
this.getAllAlarmDeviceCountMap(newVal.id)
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
components: {
|
svgDIYMapModel,
|
deviceInfoModal
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box-title{
|
position: absolute;
|
bottom: 0px;
|
right: 60px;
|
color: #26b4ff;
|
}
|
.btn-content {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.alarm-box {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
z-index: 9;
|
.badge-default {
|
background: #ccc;
|
}
|
}
|
div,ul,li,img,span,a,p{
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
.mapDeviceType-box{
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
z-index: 9;
|
background: rgba(255,255,255,0.8)
|
}
|
.mapDeviceType-box .mapDeviceType-item{
|
/* .icon{} */
|
.content{
|
line-height: 20px;
|
}
|
}
|
</style>
|
