<template>
|
<div class="alarm-template pr" ref="alarmTemplate">
|
<div class="pr mx-2" :title="`目前有${total}条警报`" @click="showList">
|
<div class="alarm-btn px-3 text-danger">
|
<i class="fas fa-bell"></i>
|
</div>
|
<span class="alarm-total bg-danger">{{ total > 99 ? '99+' : total }}</span>
|
</div>
|
<div class="alarm-list border" v-if="isShow">
|
<div class="popper__arrow"></div>
|
<div class="alarm-list-title flex-row-between pl-3 pt-3">
|
<h5 class="m-0">报警信息（{{total}}）</h5>
|
<div class="title-btns">
|
<b-btn variant="primary" size="sm" @click="isShow=false;$emit('check-compare-all')">查看全部</b-btn>
|
<b-btn variant="link" size="sm" @click="isShow=false">
|
<span class="ion ion-md-close text-light"></span>
|
</b-btn>
|
</div>
|
</div>
|
<hr class="mx-3 mt-2">
|
<!-- 渲染列表开始 -->
|
<div class="alarm-list-content px-3">
|
<div class="alarm-item" v-for="(item,index) in newAlarmList" :key="index">
|
<div class="alarm-img d-flex pr" @click="$emit('check-device',item)">
|
<div :class="['img-box flex-center' , item.sdkType !=='1' ? 'margin0auto w100' :'']">
|
<httpImg
|
:width="'100%'"
|
:height="item.sdkType !=='1' ? '100%' :'auto'"
|
:src="item.picSmUrl"
|
alt
|
/>
|
<!-- item.sdkType !=='1' ? 'auto' :'100%' -->
|
</div>
|
<div class="img-box flex-center" v-if="item.sdkType ==='1' ">
|
<httpImg width="100%" height="auto" :src="item.personPicUrl" alt/>
|
</div>
|
<div class="alarm-img-tag" v-if="item.sdkType ==='1'">{{item.likePer}}%</div>
|
</div>
|
<!-- sdkType -->
|
<div class="d-flex py-2">
|
<div class="alarm-info">
|
<p :title="item.picDate.substring(0,19)" class="time">{{item.picDate.substring(0,19)}}</p>
|
<p
|
:title="item.picAddress"
|
>{{getBytesLength(item.picAddress)>14? item.picAddress.substring(0,7)+'...':item.picAddress}}</p>
|
<b-btn variant="primary" size="sm" @click="$emit('checkModel',item)">查看详情</b-btn>
|
</div>
|
<div class="alarm-info">
|
<h5
|
v-if="item.sdkType ==='1'"
|
:title="item.BaseName"
|
class="font-weight-bolder text-danger"
|
>{{getBytesLength(item.BaseName)>14? item.BaseName.substring(0,7)+'...':item.BaseName}}</h5>
|
<h5
|
v-if="item.sdkType !=='1'"
|
:title="item.sdkType"
|
class="font-weight-bolder text-danger"
|
>{{getBytesLength(item.sdkType)>14? item.sdkType.substring(0,7)+'...':item.sdkType}}</h5>
|
<h5
|
v-if="item.name"
|
:title="item.name"
|
class="font-weight-bolder text-danger"
|
>{{getBytesLength(item.name)>14? item.name.substring(0,7)+'...':item.name}}</h5>
|
<h5 v-if="!item.name"></h5>
|
<!-- {{item.Id}} -->
|
<b-btn variant="primary" size="sm" @click="updateAlarm(item.Id)">报警确认</b-btn>
|
</div>
|
</div>
|
<hr>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import CommonModel from '@/server/models/CommonModel'
|
import { updateEsToAlarm } from '@/server/searchList/commomList.js'
|
export default {
|
name: 'alarmListModel',
|
props: {
|
tabType: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
/* webSocket声明 */
|
CanteenStateWS: new CommonModel(),
|
CAlarmWsClient: null,
|
isShow: false,
|
total: 0,
|
alarmList: [],
|
checkArr: []
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
access_token() {
|
const json = sessionStorage.getItem('loginedInfo')
|
? JSON.parse(sessionStorage.getItem('loginedInfo'))
|
: {}
|
return json && json.access_token
|
? json.access_token.replace('bearer ', '')
|
: ''
|
},
|
newAlarmList() {
|
// let list = this.alarmList.filter(item => !this.includes(item.Id))
|
let list = this.alarmList.filter(item => !this.checkArr.includes(item.Id))
|
if (list.length > 200) {
|
list.length = 200
|
}
|
// const ids = this.alarmList.map(item => item.Id)
|
// console.log(ids, '前台筛选', new Date().getTime())
|
return list
|
}
|
},
|
methods: {
|
getBytesLength(str) {
|
var num = str.length // 先用num保存一下字符串的长度（可以理解为：先假设每个字符都只占用一个字节）
|
for (var i = 0; i < str.length; i++) {
|
// 遍历字符串
|
if (str.charCodeAt(i) > 255) {
|
// 判断某个字符是否占用两个字节，如果是，num再+1
|
num++
|
}
|
}
|
return num // 返回最终的num，既是字符串总的字节长度
|
},
|
includes(val) {
|
for (let [item, index] of this.alarmList.entries()) {
|
if (item.id === val) {
|
this.alarmList.splice(index, 1)
|
break
|
}
|
}
|
for (let i = 0; i < this.checkArr.length; i++) {
|
if (this.checkArr[i] === val) {
|
this.checkArr.splice(i, 1)
|
return true
|
}
|
}
|
return false
|
},
|
// 报警确认
|
async updateAlarm(id) {
|
const res = await updateEsToAlarm({ id, ack_alarm: '0' })
|
if (res && res.success) {
|
this.checkArr = [...this.checkArr, id]
|
}
|
this.$toast({
|
type: res.success ? 'success' : 'error',
|
message: res.msg ? res.msg : ''
|
})
|
},
|
/* ws获取alarmList start */
|
getAllAlarmList(canteenId) {
|
try {
|
this.CanteenStateWS.getAllAlarmList(
|
{
|
orgId: this.orgId,
|
access_token: this.access_token
|
},
|
this.allAlarmListMsg,
|
err => {
|
console.log(err, '获取食堂人数--出错')
|
},
|
close => {
|
console.log(close, '获取食堂人数--被关闭')
|
},
|
e => {
|
this.CAlarmWsClient = e
|
}
|
)
|
} catch (ex) {
|
console.log('获取食堂人数--异常', ex)
|
}
|
},
|
allAlarmListMsg(res) {
|
// console.log(res, '获取食堂人数--接收数据')
|
|
if (res && res.success) {
|
// const ids = res.data.map(item => item.Id)
|
// console.log(ids, '后台返回数据', new Date().getTime())
|
this.alarmList = [...res.data, ...this.newAlarmList]
|
this.total = res.total
|
}
|
},
|
targetClose(ev) {
|
let target = ev.target
|
while (target !== this.$refs.alarmTemplate && target !== document.body) {
|
target = target.parentNode
|
}
|
if (target !== this.$refs.alarmTemplate) {
|
// console.log('这里要关闭，控制你的窗体关闭')
|
this.isShow = false
|
}
|
},
|
showList() {
|
if (this.tabType === 'map') {
|
this.isShow = !this.isShow
|
} else if (this.tabType === 'table') {
|
this.$emit('click-alarm')
|
}
|
}
|
},
|
created() {
|
/* ws 获取警报列表 */
|
// this.CAlarmWsClient && this.CAlarmWsClient.close()
|
this.getAllAlarmList()
|
},
|
mounted() {
|
// 注册添加事件
|
document.body.addEventListener('click', this.targetClose)
|
},
|
destroyed() {
|
/* ws 关闭 */
|
this.CAlarmWsClient && this.CAlarmWsClient.close()
|
// 销毁事件 （必须保证与注册时使用同一个函数）
|
document.body.removeEventListener('click', this.targetClose)
|
},
|
watch: {
|
isShow(newVal, oldVal) {
|
if (!newVal) {
|
this.$emit('remove-check-device')
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.alarm-template {
|
position: relative;
|
z-index: 9;
|
.alarm-btn {
|
height: 40px;
|
width: 60px;
|
line-height: 40px;
|
padding: 5px 10px;
|
color: #ccc;
|
cursor: pointer;
|
i {
|
font-size: 26px;
|
}
|
}
|
.alarm-total {
|
position: absolute;
|
top: -5px;
|
right: 4px;
|
width: 22px;
|
height: 22px;
|
font-size: 12px;
|
line-height: 23px;
|
border-radius: 50%;
|
text-align: center;
|
color: #fff;
|
}
|
.alarm-list {
|
position: absolute;
|
top: 52px;
|
left: 15px;
|
width: 300px;
|
height: 600px;
|
border-radius: 3px;
|
background: #fff;
|
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
|
.popper__arrow {
|
position: absolute;
|
top: -18px;
|
left: 10px;
|
&:after {
|
position: absolute;
|
top: 2px;
|
left: 1px;
|
content: ' ';
|
display: block;
|
width: 0;
|
height: 0;
|
border-width: 8px;
|
border-style: solid;
|
border-color: transparent transparent #fff transparent;
|
}
|
&::before {
|
content: ' ';
|
display: block;
|
width: 0;
|
height: 0;
|
border-width: 9px;
|
border-style: solid;
|
border-color: transparent transparent #ebeef5 transparent;
|
}
|
}
|
.alarm-list-title {
|
h5 {
|
line-height: 30px;
|
height: 30px;
|
}
|
.title-btns {
|
height: 30px;
|
line-height: 30px;
|
text-align: right;
|
}
|
}
|
}
|
.alarm-list-content {
|
overflow-y: auto;
|
height: 515px;
|
}
|
.alarm-item {
|
.alarm-img {
|
border: 1px solid #35bde7;
|
.img-box {
|
// width: 50%;
|
width: 132px;
|
height: 132px;
|
overflow: hidden;
|
text-align: center;
|
}
|
.img-box.w100 {
|
width: 100% !important;
|
// height: 100%;
|
}
|
.alarm-img-tag {
|
text-align: center;
|
line-height: 24px;
|
font-weight: 600;
|
color: #fff;
|
position: absolute;
|
left: 0px;
|
top: 110px;
|
bottom: -1px;
|
width: 100%;
|
height: 23px;
|
background: url('../../../assets/img/search/red.png') no-repeat center;
|
}
|
}
|
.alarm-info {
|
width: 50%;
|
text-align: center;
|
p,
|
h5 {
|
margin: 0;
|
height: 30px;
|
line-height: 30px;
|
font-size: 0.9rem;
|
}
|
p.time {
|
line-height: 15px;
|
}
|
}
|
}
|
}
|
</style>
|
