You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
531 lines
13 KiB
531 lines
13 KiB
<template>
|
|
<div>
|
|
|
|
<!-- "详情"弹出框 -->
|
|
<EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName"
|
|
@update:value="handleDialogClose" />
|
|
|
|
<!-- 添加或修改控制码对话框 -->
|
|
<DialogDeviceOffline :visible="modelDeviceVisible" :activeId="activeId"
|
|
@update:value="handleDeviceDialogClose" />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import Cookies from 'js-cookie'
|
|
import request from "@/utils/request";
|
|
import { WarningType as warningTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js"
|
|
import { param } from "../../../utils";
|
|
|
|
export default {
|
|
name: "WarningNotify",
|
|
props: {
|
|
|
|
},
|
|
components: {
|
|
},
|
|
provide() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
notifications: [],
|
|
notifyIndex: 0,
|
|
activeName: '-1',
|
|
eventDetailDialogVisible: false,
|
|
detailDialogFormData: {},
|
|
|
|
|
|
modelDeviceVisible:false,
|
|
activeId:''
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
//点击事件回调
|
|
closeNotify(para) {
|
|
// let type = para.type;
|
|
this.notifications[para.index].close();
|
|
},
|
|
showNotify(para){
|
|
let _this = this;
|
|
let obj = {};
|
|
if( para.subEvent == "0"){
|
|
let eventType = ["trafficAccident", "vehicleBroken", "trafficControl", "trafficJam", "illegalVehicle", "barrierClear", "construction", "serviceAreaAbnormal", "equipmentTrouble", "abnormalWeather", "otherEvent"];
|
|
obj = {
|
|
content: para.content.content,
|
|
time:para.content.event.occurrenceTime,
|
|
type: eventType[para.content.event.eventType*1-1],
|
|
level: "danger",
|
|
duration: 0
|
|
}
|
|
} else if( para.subEvent == "2"){
|
|
obj = {
|
|
content: para.content.content,
|
|
time:para.content.event.warningTime,
|
|
type: "otherEvent",
|
|
level: "danger",
|
|
title:'扫码报警',
|
|
duration: 0
|
|
}
|
|
} else if(para.subEvent === '1'){
|
|
obj = {
|
|
content: para.content.content,
|
|
time:para.content.event.warningTime,
|
|
type: "signal",
|
|
level: "info",
|
|
duration: 4000
|
|
}
|
|
} else if(para.subEvent === 'trafficFlowDataEarlyWarning'){
|
|
obj = {
|
|
content: para.content.content,
|
|
time:'',
|
|
type: "trafficJam",
|
|
level: "warning",
|
|
duration: 4000
|
|
}
|
|
} else if(para.subEvent === 'deviceOfflineRecord'){
|
|
obj = {
|
|
content: para.content.deviceOfflineRecord.createTime+' '+ para.content.content,
|
|
time:'',
|
|
type: "equipmentTrouble",
|
|
level: "danger",
|
|
duration: 4000
|
|
}
|
|
} else if(para.subEvent === '3'){
|
|
para.content.content = para.content.earlyWorningContent
|
|
obj = {
|
|
content: para.content.earlyWorningContent,
|
|
time:'',
|
|
type: "abnormalWeather",
|
|
level: "warning",
|
|
duration: 4000
|
|
}
|
|
}
|
|
this.speak(obj.time + '' + para.content.content);
|
|
if(Cookies.get('warning-notify') === 'off'){
|
|
return;
|
|
}
|
|
_this.notifications[_this.notifyIndex] = _this.$notify({
|
|
title: '',
|
|
dangerouslyUseHTMLString: true,
|
|
duration: obj.duration,
|
|
customClass: 'notify_whole',
|
|
offset: 50,
|
|
showClose: false,
|
|
onClick:function(){
|
|
// _this.showDialog(para)
|
|
// _this.notifications[idx].close();
|
|
},
|
|
message: _this.$createElement(
|
|
"div",
|
|
{ class: "notify_box " + obj.level },
|
|
[
|
|
_this.$createElement(
|
|
"div",
|
|
{ class: 'nofify_head' },
|
|
[
|
|
_this.$createElement(
|
|
"p",
|
|
{ class: "title" },
|
|
[
|
|
_this.$createElement(
|
|
"i",
|
|
{ class: 'icon el-icon-warning' }
|
|
), _this.$createElement(
|
|
"span",
|
|
{ class: 'text' },
|
|
(obj.title ? obj.title: (obj.level === 'warning' ? '预警':"告警"))
|
|
)
|
|
]
|
|
)
|
|
, _this.$createElement(
|
|
"button",
|
|
{
|
|
class: 'btn_close el-icon-close',
|
|
on: {
|
|
click: _this.closeNotify.bind(_this, { type: obj.type, index: _this.notifyIndex }),
|
|
},
|
|
}
|
|
)
|
|
]
|
|
),
|
|
_this.$createElement(
|
|
"div",
|
|
{ class: 'nofify_content',
|
|
on: {
|
|
click: function(){
|
|
_this.showDialog(para)
|
|
}
|
|
}
|
|
},
|
|
[
|
|
_this.$createElement(
|
|
"span",
|
|
{ class: 'type_icon' },
|
|
[
|
|
_this.$createElement(
|
|
"i",
|
|
{ class: 'iconfont icon-' + obj.type }
|
|
)
|
|
]
|
|
),
|
|
|
|
_this.$createElement(
|
|
"div",
|
|
{ class: 'info' },
|
|
[
|
|
_this.$createElement(
|
|
"p",
|
|
{ class: 'content' },
|
|
obj.content
|
|
)
|
|
,
|
|
_this.$createElement(
|
|
"p",
|
|
{ class: 'time' },
|
|
obj.time
|
|
)
|
|
]
|
|
),
|
|
|
|
]
|
|
),
|
|
|
|
]
|
|
),
|
|
});
|
|
_this.notifyIndex++;
|
|
},
|
|
|
|
handleDeviceDialogClose() {
|
|
this.modelDeviceVisible = false;
|
|
},
|
|
showDialog(info,idx){
|
|
if (info.subEvent == '1' || info.subEvent == '2') {
|
|
this.activeName = '-1' //感知事件
|
|
request({
|
|
url: `/perceivedEvents/warning/getWarningById`,//感知事件
|
|
method: "post",
|
|
data: { id:info.content.event.id }
|
|
}).then((result) => {
|
|
if (result.code != 200) return Message.error(result?.msg);
|
|
let data = result.data;
|
|
if(data.warningSource === 6){
|
|
return;
|
|
}
|
|
data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : '';
|
|
data.nickName = data.userName;
|
|
// data.direction = gzDirectionMapping[data.direction] || data.direction;
|
|
data.startTime = data.warningTime;
|
|
data.stringEventState = warningStateMapping[data.warningState];
|
|
data.stringEventType = warningTypeMapping[data.warningType];
|
|
data.actionSource = this.activeName
|
|
|
|
data.videoList = [];
|
|
if (data.otherConfig) {
|
|
let otherConfig = JSON.parse(data.otherConfig);
|
|
|
|
data.waterFilmThickness = otherConfig.waterFilmThickness;
|
|
data.windSpeed = otherConfig.windSpeed;
|
|
data.visibility = otherConfig.visibility;
|
|
|
|
data.pictures = otherConfig.pictures || otherConfig.imgUrl ||[];
|
|
data.videoList = otherConfig.videoList || otherConfig.videoUrl || [];
|
|
// data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4',
|
|
// 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
|
|
}
|
|
data.videoType = "mp4";
|
|
data.component = "Video";
|
|
data.description = data.remark;
|
|
|
|
this.detailDialogFormData = data;
|
|
this.eventDetailDialogVisible = true;
|
|
});
|
|
} else if(info.subEvent==='deviceOfflineRecord'){
|
|
this.activeId = info.content.deviceOfflineRecord.id.toString();
|
|
this.modelDeviceVisible = true;
|
|
} else {
|
|
this.activeName = info.eventState
|
|
request({
|
|
url: `/dc/system/event/${info.content.event.id}`,//交通事件
|
|
method: "get",
|
|
}).then(async (result) => {
|
|
if (result.code != 200) return Message.error(result?.msg);
|
|
let data = result.data;
|
|
data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
|
|
data.startTime = data?.occurrenceTime || '';
|
|
|
|
|
|
data.videoList = [];
|
|
data.component = "VideoMulti";
|
|
|
|
// const { downCamera, upCamera } = ((await getNearCameraNew(data.stakeMark))?.data || {});//新的上下游摄像头接口
|
|
// data.downCamId = downCamera?.camId;
|
|
// data.upCamId = upCamera?.camId;
|
|
data.videoType = "flv";
|
|
|
|
this.detailDialogFormData = data;
|
|
|
|
this.eventDetailDialogVisible = true;
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
handleDialogClose() {
|
|
this.eventDetailDialogVisible = false;
|
|
this.$root.$emit('refresh-event-list');
|
|
},
|
|
speak(text){
|
|
// 判断是否开启声音
|
|
if(Cookies.get('warning-sound') === 'off'){
|
|
return;
|
|
}
|
|
|
|
// 创建SpeechSynthesisUtterance实例
|
|
const utterance = new SpeechSynthesisUtterance(text);
|
|
|
|
// 设置语音的语言
|
|
utterance.lang = 'zh-CN'; // 中文简体
|
|
|
|
// 设置语音的音量（0到1之间）
|
|
utterance.volume = 10;
|
|
|
|
// 设置语音的语速（1是正常语速）
|
|
utterance.rate = 1;
|
|
|
|
// 设置语音的音调（可以是"default", "female", "male"）
|
|
utterance.pitch = 1;
|
|
|
|
// 使用SpeechSynthesis接口播放语音
|
|
window.speechSynthesis.speak(utterance);
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notify_whole {
|
|
padding: 0;
|
|
width: 420px !important;
|
|
// height: 120px !important;
|
|
margin-top: 40px !important;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.el-notification__group {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.el-notification__content {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.notify_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid;
|
|
|
|
.nofify_head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
align-items: center;
|
|
margin: 0 12px;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 17px;
|
|
margin-left: 4px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.btn_close {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.nofify_content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 20px 16px 0;
|
|
cursor: pointer;
|
|
.type_icon {
|
|
width: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.iconfont {
|
|
font-size: 48px;
|
|
&.icon-illegalVehicle{ font-size: 30px;}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
|
|
.content {
|
|
color: #FFF;
|
|
font-size: 16px;
|
|
word-wrap: break-word;
|
|
white-space: wrap;
|
|
}
|
|
|
|
.time {
|
|
color: #FFF;
|
|
font-size: 14px;
|
|
opacity: 0.5;
|
|
text-align: right;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$infoColor: #3DE8FF;
|
|
$dangerColor: #FF5F5F;
|
|
$warningColor: #FFD294;
|
|
.notify_box.info {
|
|
background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%);
|
|
border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2;
|
|
|
|
.nofify_head {
|
|
border-bottom: 1px solid #FFFFFF33;
|
|
|
|
.title {
|
|
.icon {
|
|
color: $infoColor;
|
|
}
|
|
|
|
.text {
|
|
color: $infoColor;
|
|
}
|
|
}
|
|
|
|
.btn_close {
|
|
color: $infoColor;
|
|
}
|
|
}
|
|
|
|
.nofify_content {
|
|
.type_icon {
|
|
.iconfont {
|
|
color: $infoColor;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
.content {}
|
|
|
|
.time {}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notify_box.danger {
|
|
background-image: linear-gradient(180deg, rgba(30, 0, 0, 0.9) 0%, rgba(111, 0, 0, 0.9) 100%);
|
|
border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2;
|
|
|
|
.nofify_head {
|
|
border-bottom: 1px solid #FFFFFF33;
|
|
|
|
.title {
|
|
.icon {
|
|
color: $dangerColor;
|
|
}
|
|
|
|
.text {
|
|
color: $dangerColor;
|
|
}
|
|
}
|
|
|
|
.btn_close {
|
|
color: $dangerColor;
|
|
}
|
|
}
|
|
|
|
.nofify_content {
|
|
.type_icon {
|
|
.iconfont {
|
|
color: $dangerColor;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
.content {}
|
|
|
|
.time {}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.notify_box.warning {
|
|
background: linear-gradient( 180deg, #573101 0%, #A46003 100%);
|
|
border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2;
|
|
|
|
.nofify_head {
|
|
border-bottom: 1px solid #FFFFFF33;
|
|
|
|
.title {
|
|
.icon {
|
|
color: $warningColor;
|
|
}
|
|
|
|
.text {
|
|
color: $warningColor;
|
|
}
|
|
}
|
|
|
|
.btn_close {
|
|
color: $warningColor;
|
|
}
|
|
}
|
|
|
|
.nofify_content {
|
|
.type_icon {
|
|
.iconfont {
|
|
color: $warningColor;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
.content {}
|
|
|
|
.time {}
|
|
}
|
|
}
|
|
}
|
|
</style>
|