527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
||
<div class="messageBox">
|
||
<!-- <div @click="send" style="line-height: 60px;">发送消息</div> -->
|
||
<el-popover
|
||
v-if="showQrCode"
|
||
placement="bottom"
|
||
class="header-btn"
|
||
width="200"
|
||
trigger="click"
|
||
>
|
||
<div id="qrCode" ref="qrCodeDiv"></div>
|
||
<el-button class="btn" slot="reference">
|
||
车辆录入二维码
|
||
<i class="el-icon-arrow-down"></i>
|
||
</el-button>
|
||
</el-popover>
|
||
<p
|
||
class="header-btn"
|
||
@click="goMsgCenter"
|
||
@mouseover="showDialog = true"
|
||
@mouseleave="showDialog = false"
|
||
>
|
||
<i class="el-icon-message-solid"></i> 消息
|
||
</p>
|
||
<i class="redDot" v-show="newsStatus"></i>
|
||
<div
|
||
class="messageList whiteBlock"
|
||
v-show="showDialog && messageList.length > 0"
|
||
@mouseover="showDialog = true"
|
||
@mouseleave="showDialog = false"
|
||
>
|
||
<ul>
|
||
<li v-for="item in messageList" :key="item.id">{{ item.title }}</li>
|
||
<li class="last" @click="goMsgCenter">查看所有 >></li>
|
||
</ul>
|
||
</div>
|
||
<audio
|
||
class="audio-tag"
|
||
:ref="`audioRef`"
|
||
:src="$store.state.FILEURL + fileUrl"
|
||
controls
|
||
></audio>
|
||
<!-- <span @click="sendmes">发送消息</span> -->
|
||
<el-dialog
|
||
:title="dialogTitle"
|
||
:modal-append-to-body="false"
|
||
:visible.sync="messsageCenterDialog"
|
||
width="80%"
|
||
class="dialog-wrap"
|
||
>
|
||
<div style="height: 738px">
|
||
<messageCenter></messageCenter>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getNoticeListApi } from "@/assets/js/api/company/project";
|
||
import { selectNoticeRemindSoundApi } from "@/assets/js/api/configManage";
|
||
import messageCenter from "./../views/messageV2.vue";
|
||
import mqtt from "mqtt";
|
||
import mqttX from "xhl-mqttx";
|
||
import QRCode from "qrcodejs2";
|
||
import axios from "axios";
|
||
const options = {
|
||
connectTimeout: 40000,
|
||
clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
|
||
username: "root",
|
||
password: "123456",
|
||
clean: true,
|
||
};
|
||
var client = null;
|
||
let i = 0;
|
||
// var client = mqtt.connect("mqtt://139.159.226.224:1883", options);
|
||
export default {
|
||
components: {
|
||
messageCenter,
|
||
},
|
||
data() {
|
||
return {
|
||
showQrCode: false,
|
||
showUrl: "",
|
||
messsageCenterDialog: false,
|
||
dialogTitle: "消息中心",
|
||
messageList: [],
|
||
showDialog: false,
|
||
userId: "",
|
||
topicName: "topic",
|
||
toDayDate: "",
|
||
soundList: [],
|
||
typeList: [
|
||
{
|
||
label: "高空火警",
|
||
value: "8",
|
||
},
|
||
{
|
||
label: "考勤提醒",
|
||
value: "1",
|
||
},
|
||
{
|
||
label: "防疫人员通知",
|
||
value: "2",
|
||
},
|
||
{
|
||
label: "防疫车辆通知",
|
||
value: "3",
|
||
},
|
||
{
|
||
label: "访客通知",
|
||
value: "16",
|
||
},
|
||
{
|
||
label: "混凝土监测",
|
||
value: "4",
|
||
},
|
||
{
|
||
label: "卸料平台",
|
||
value: "5",
|
||
},
|
||
{
|
||
label: "配电箱",
|
||
value: "6",
|
||
},
|
||
{
|
||
label: "扬尘",
|
||
value: "7",
|
||
},
|
||
{
|
||
label: "标养室",
|
||
value: "9",
|
||
},
|
||
{
|
||
label: "安全检查",
|
||
value: "10",
|
||
},
|
||
{
|
||
label: "质量检查",
|
||
value: "11",
|
||
},
|
||
{
|
||
label: "塔吊",
|
||
value: "12",
|
||
},
|
||
{
|
||
label: "升降机",
|
||
value: "13",
|
||
},
|
||
{
|
||
label: "电表",
|
||
value: "14",
|
||
},
|
||
{
|
||
label: "水表",
|
||
value: "15",
|
||
},
|
||
{
|
||
label: "人员的资质证书即将到期",
|
||
value: "20",
|
||
},
|
||
{
|
||
label: "隧道报警通知",
|
||
value: "50",
|
||
},
|
||
],
|
||
// 消息状态
|
||
newsStatus: false,
|
||
noticeRemindList: [],
|
||
fileUrl: "",
|
||
};
|
||
},
|
||
beforeDestroy() {
|
||
// console.log(client)
|
||
if (client) {
|
||
client.unsubscribe(this.topicName + this.userId, options);
|
||
client.end();
|
||
}
|
||
client = null;
|
||
console.log(client);
|
||
// client = null
|
||
// mqttX.unsubscribe(this.topicName + this.userId);
|
||
},
|
||
mounted() {
|
||
this.selectNowDate();
|
||
this.selectNoticeRemindSound();
|
||
if (localStorage.getItem("soundList")) {
|
||
this.soundList = JSON.parse(localStorage.getItem("soundList"));
|
||
}
|
||
if (process.env.NODE_ENV == "development") {
|
||
this.userId = this.$store.state.userInfo.userId;
|
||
this.topicName = this.$store.state.userInfo.scope;
|
||
// // client = mqtt.connect("ws://182.90.224.147:8083/mqtt", options);
|
||
client = mqtt.connect(mqttUrl, options);
|
||
this.getData();
|
||
this.mqttMSG();
|
||
} else if (process.env.NODE_ENV == "debug") {
|
||
} else if (process.env.NODE_ENV == "production") {
|
||
this.userId = this.$store.state.userInfo.userId;
|
||
this.topicName = this.$store.state.userInfo.scope;
|
||
// client = mqtt.connect("ws://182.90.224.147:8083/mqtt", options);
|
||
client = mqtt.connect(mqttUrl, options);
|
||
this.getData();
|
||
this.mqttMSG();
|
||
}
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler(newVal) {
|
||
if (newVal.path == "/project/quality/makeAnAppointment") {
|
||
this.showQrCode = true;
|
||
this.bindQRCode();
|
||
} else {
|
||
this.showQrCode = false;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
selectNoticeRemindSound() {
|
||
if (!this.$store.state.projectSn) return;
|
||
selectNoticeRemindSoundApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
console.log(res.result);
|
||
if ((res.code = 200)) {
|
||
this.noticeRemindList = res.result;
|
||
}
|
||
});
|
||
},
|
||
//生成车辆录入二维码
|
||
bindQRCode: function () {
|
||
document.getElementById("qrCode").innerHTML = "";
|
||
let httpUrl = window.location.origin;
|
||
let projectSn = this.$store.state.projectSn;
|
||
let baseUrl = axios.defaults.baseURL;
|
||
let newBaseUrl = baseUrl.slice(0, baseUrl.length - 1);
|
||
setTimeout(() => {
|
||
var qrcode = new QRCode(this.$refs.qrCodeDiv, {
|
||
text:
|
||
httpUrl +
|
||
"/doc/h52/index.html?projectSn=" +
|
||
projectSn +
|
||
"&baseUrl=" +
|
||
newBaseUrl,
|
||
// text:"下午好",
|
||
width: 200,
|
||
height: 200,
|
||
colorDark: "#333333", //二维码颜色
|
||
colorLight: "#ffffff", //二维码背景色
|
||
correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
|
||
});
|
||
}, 0);
|
||
},
|
||
// sendmes(){
|
||
// console.log(1)
|
||
// this.$emit('sendMsg', {type: 8})
|
||
// },
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds();
|
||
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
||
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
||
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
|
||
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
|
||
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
|
||
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
||
var timer = year + "-" + month + "-" + day;
|
||
this.toDayDate = timer;
|
||
console.log(timer);
|
||
// return timer;
|
||
},
|
||
// send(){
|
||
// this.$emit('sendMsg')
|
||
// },
|
||
goMsgCenter() {
|
||
// this.$router.push('/msgCenter')
|
||
// let routeUrl = this.$router.resolve({
|
||
// path: "/msgCenter",
|
||
// });
|
||
|
||
// window.open(routeUrl.href, "_blank");
|
||
this.messsageCenterDialog = true;
|
||
this.getData();
|
||
},
|
||
playAudio(playNum) {
|
||
if (playNum <= 0) return;
|
||
const audio = this.$refs[`audioRef`];
|
||
console.log(audio);
|
||
audio.play();
|
||
playNum = playNum - 1;
|
||
audio.onended = () => {
|
||
this.playAudio(playNum);
|
||
};
|
||
},
|
||
mqttMSG() {
|
||
//
|
||
// connectTimeout: 40000,
|
||
// clientId:
|
||
// "mqttjs_" +
|
||
// Math.random()
|
||
// .toString(16)
|
||
// .substr(2, 8),
|
||
// username: "mqttjs_" +
|
||
// Math.random()
|
||
// .toString(16)
|
||
// .substr(2, 8),
|
||
// password: "123456",
|
||
// clean: true
|
||
console.log("mqtt");
|
||
// let _this = this
|
||
// mqttX.init({
|
||
// id:"mqttjs_" +
|
||
// Math.random()
|
||
// .toString(16)
|
||
// .substr(2, 8),
|
||
// ip: '139.159.226.224',
|
||
// port: 8083,
|
||
// success:function(){
|
||
// console.log("mqttx连接成功",_this.topicName + _this.userId);
|
||
// ;
|
||
// mqttX.subscribe(_this.topicName + _this.userId,[0]);
|
||
// },
|
||
// error:function(){
|
||
// ;
|
||
// console.log("mqttx连接失败");
|
||
// },
|
||
// connectLost:function(){
|
||
// console.log("mqttx连接丢失");
|
||
// },
|
||
// onMessage:function(message){
|
||
// console.log("mqttx",message.payloadString);
|
||
// console.log(message);
|
||
// // console.log("收到来自", topic, "的消息", message.payloadString.toString());
|
||
// message = JSON.parse(message.payloadString);
|
||
// // if(message.content){
|
||
// // if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
|
||
// // this.$emit('sendMsg')
|
||
// // }
|
||
// // }
|
||
// _this.$emit('sendMsg', message)
|
||
// _this.$notify({
|
||
// title: message.title,
|
||
// message: message.content,
|
||
// });
|
||
// }
|
||
// });
|
||
|
||
// mqtt连接 +"/#" +workerId
|
||
client.on("connect", (e) => {
|
||
console.log("连接成功:", this.topicName + this.userId);
|
||
client.subscribe(this.topicName + this.userId, { qos: 0 }, (error) => {
|
||
if (!error) {
|
||
// console.log('订阅成功')
|
||
} else {
|
||
console.log("订阅失败");
|
||
}
|
||
});
|
||
});
|
||
// 接收消息处理
|
||
client.on("message", (topic, message) => {
|
||
// console.log(message);
|
||
console.log("收到来自", topic, "的消息", message.toString());
|
||
message = JSON.parse(message);
|
||
// if(message.content){
|
||
// if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
|
||
// this.$emit('sendMsg')
|
||
// }
|
||
// }
|
||
this.getData();
|
||
console.log("message", message.hasOwnProperty('payload'), message.payload != undefined, message.payload);
|
||
if(message.hasOwnProperty('payload')) {
|
||
console.log("message.payload", message.payload);
|
||
const payload = JSON.parse(message.payload);
|
||
if (payload) {
|
||
this.fileUrl = payload.messagePromptToneConfig;
|
||
this.$nextTick(() => {
|
||
this.playAudio(payload.playbackFrequency);
|
||
});
|
||
}
|
||
}
|
||
// if (message.type == 7) {
|
||
// const find = this.noticeRemindList.find(
|
||
// (item) => item.type == message.type
|
||
// );
|
||
// if (find) {
|
||
// this.fileUrl = find.fileUrl;
|
||
// this.$nextTick(() => {
|
||
// this.playAudio(find.playNum);
|
||
// })
|
||
// }
|
||
// } else if (message.type == 8) {
|
||
// const find = this.noticeRemindList.find(
|
||
// (item) => item.type == message.type && item.riskLevel == payload.level
|
||
// );
|
||
// if (find) {
|
||
// this.fileUrl = find.fileUrl;
|
||
// this.$nextTick(() => {
|
||
// this.playAudio(find.playNum);
|
||
// })
|
||
// }
|
||
// }
|
||
// message
|
||
setTimeout(() => {
|
||
this.$emit("sendMsg", message);
|
||
this.$notify({
|
||
title: message.title,
|
||
message: message.content,
|
||
position: "bottom-right",
|
||
});
|
||
}, 500);
|
||
});
|
||
// 断开发起重连
|
||
// client.on("reconnect", (error) => {
|
||
// console.log("正在重连:", error);
|
||
// });
|
||
// 链接异常处理
|
||
client.on("error", (error) => {
|
||
console.log("连接失败:", error);
|
||
});
|
||
},
|
||
getData() {
|
||
getNoticeListApi({
|
||
accountId: this.userId,
|
||
startTime: this.toDayDate,
|
||
endTime: this.toDayDate,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
}).then((res) => {
|
||
// console.log("res.result.records", res.result.records);
|
||
this.messageList = res.result.records;
|
||
|
||
// 判断是否有消息未读
|
||
if (res.result.records.length > 0) {
|
||
this.newsStatus = res.result.records.some(
|
||
(item) => item.isRead !== 1
|
||
);
|
||
|
||
// console.log("==========================this.newsStatus=======================", this.newsStatus);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.audio-tag {
|
||
display: none;
|
||
}
|
||
.header-btn {
|
||
line-height: 60px;
|
||
.btn {
|
||
background-color: transparent;
|
||
color: white;
|
||
border: none;
|
||
}
|
||
}
|
||
.dialog-wrap {
|
||
/deep/.el-dialog {
|
||
height: 90%;
|
||
margin: 0 !important;
|
||
// position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.messageBox {
|
||
position: relative;
|
||
display: flex;
|
||
}
|
||
.redDot {
|
||
display: block;
|
||
width: 6px;
|
||
height: 6px;
|
||
background-color: #f7b500;
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 15px;
|
||
border-radius: 50%;
|
||
box-shadow: 0px 0px 2px 3px rgba(247, 181, 0, 0.5);
|
||
}
|
||
.messageList {
|
||
position: absolute;
|
||
top: 60px;
|
||
// left: 0;
|
||
right: -20px;
|
||
width: 200px;
|
||
// height: 200px;
|
||
// border-radius: 3px;
|
||
box-shadow: 0 4px 6px 0px #606e9a;
|
||
z-index: 99;
|
||
background-color: #343d5f;
|
||
ul {
|
||
margin: 8px 15px;
|
||
}
|
||
li {
|
||
font-size: 12px;
|
||
// padding: 3px 0px;
|
||
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
line-height: 24px;
|
||
// &:last-child{
|
||
// border-bottom: none;
|
||
// }
|
||
}
|
||
.last {
|
||
margin-top: 8px;
|
||
padding-top: 5px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
text-decoration: underline;
|
||
text-align: center;
|
||
&:hover {
|
||
color: @--color-primary;
|
||
}
|
||
}
|
||
}
|
||
</style>
|