md
This commit is contained in:
linfso
parent
4bfa391895
commit
6b2c89d821
@ -86,6 +86,7 @@
|
||||
"save-svg-as-png": "^1.4.17",
|
||||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"speak-tts": "^2.0.8",
|
||||
"uuid": "^9.0.1",
|
||||
"vue": "2.7.0",
|
||||
"vue-amap": "^0.5.10",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
trigger="click"
|
||||
v-model="visible"
|
||||
transition="el-zoom-in-top"
|
||||
popper-class="ele-notice-pop">
|
||||
popper-class="xd-notice-pop">
|
||||
<div slot="reference" >
|
||||
<div>
|
||||
<el-badge :value="allNum" :hidden="!allNum">
|
||||
@ -13,108 +13,108 @@
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<audio id="audioMusic" class="audio" src="/static/tone/notifyTone2.mp3" controls autoplay="autoplay" hidden="true" ref="audio"></audio>
|
||||
<audio id="audioMusic" class="audio" src="/static/tone/notifyTone1.mp3" controls autoplay="autoplay" hidden="true" ref="audio"></audio>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="active">
|
||||
<!-- <el-tab-pane name="notice" :label="noticeLabel"> -->
|
||||
<el-tab-pane name="notice" label="">
|
||||
<div class="ele-notice-list ele-scrollbar-mini">
|
||||
<div v-for="(item, index) in notice" :key="index" class="ele-notice-item">
|
||||
<div class="ele-cell ele-notice-item-wrapper">
|
||||
<i :class="[item.icon, 'ele-notice-item-icon']"></i>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-elip">{{ item.title }}</div>
|
||||
<div class="ele-text-secondary ele-elip">{{ item.time }}</div>
|
||||
</div>
|
||||
<el-tab-pane name="alertTab" label="消息提醒">
|
||||
<div class="xd-notice-list">
|
||||
<div v-for="(item, index) in alertList" :key="index" class="xd-notice-item">
|
||||
<div>
|
||||
<i class="el-icon-bell"></i>
|
||||
<!-- <i :class="[item.icon, 'xd-notice-item-icon']"></i> -->
|
||||
</div>
|
||||
<div class="xd-item-content">
|
||||
<div class="ele-elip notice-title">{{ item.noticeTitle }}</div>
|
||||
<div class="ele-text-secondary ele-elip notice-time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="notice.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clear('notice')">清空通知</div>
|
||||
<div v-if="alertList.length" class="ele-cell xd-notice-actions">
|
||||
<div class="xd-item-content" @click="clear('notice')">清空通知</div>
|
||||
<el-divider direction="vertical" class="line-color-light"/>
|
||||
<div class="ele-cell-content" @click="more('notice')">查看更多</div>
|
||||
</div> -->
|
||||
<el-empty v-if="!notice.length" description="没有最新消息" />
|
||||
<div class="xd-item-content" @click="more('notice')">查看更多</div>
|
||||
</div>
|
||||
<el-empty v-if="!alertList.length" description="没有最新消息" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="sysNoticeTab" label="系统消息">
|
||||
<div class="xd-notice-list">
|
||||
<div v-for="(item, index) in noticeList" :key="index" class="xd-notice-item">
|
||||
<div>
|
||||
<i class="el-icon-bell"></i>
|
||||
<!-- <i :class="[item.icon, 'xd-notice-item-icon']"></i> -->
|
||||
</div>
|
||||
<!-- <div><i :class="[item.icon, 'xd-notice-item-icon']"></i></div> -->
|
||||
<div class="xd-item-content">
|
||||
<div class="ele-elip notice-title">{{ item.noticeTitle }}</div>
|
||||
<div class="ele-text-secondary ele-elip notice-time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="noticeList.length" class="ele-cell xd-notice-actions">
|
||||
<div class="xd-item-content" @click="clear('notice')">清空通知</div>
|
||||
<el-divider direction="vertical" class="line-color-light"/>
|
||||
<div class="xd-item-content" @click="more('notice')">查看更多</div>
|
||||
</div>
|
||||
<el-empty v-if="!noticeList.length" description="没有最新消息" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {Notification} from "element-ui";
|
||||
import Speech from 'speak-tts'
|
||||
import {getTopNoticeListByUserId} from "@/api/system/notice";
|
||||
export default {
|
||||
name: 'TopNotice',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
active: 'notice',
|
||||
notice: [
|
||||
// {
|
||||
// icon: 'el-icon-s-comment',
|
||||
// title: '欢迎使用系统！',
|
||||
// time: '2023-07-27 18:30:18'
|
||||
// },
|
||||
],
|
||||
speech: null,
|
||||
active: 'alertTab',
|
||||
isPlay:false,
|
||||
alertList:[],
|
||||
noticeList: [],
|
||||
|
||||
xdNoticSdk:null,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 通知标题
|
||||
noticeLabel() {
|
||||
return this.notice.length ? `通知(${this.notice.length})` : '通知';
|
||||
},
|
||||
// 所有消息数量
|
||||
allNum() {
|
||||
return this.notice.length;
|
||||
return this.noticeList.length;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("click", this.setCanPlayTone);
|
||||
this.initXDNoticSdk();
|
||||
window.addEventListener("click", this.musicAutoPlay);
|
||||
this.speechInit();
|
||||
this.getNoticeUserList();
|
||||
|
||||
|
||||
// this.notice();
|
||||
// const wsuri = this.url;
|
||||
// this.ws = new WebSocket(wsuri);
|
||||
// const self = this;
|
||||
// this.ws.onopen = function (event) {
|
||||
// //self.text_content = self.text_content + "已经打开连接!" + "\n";
|
||||
// };
|
||||
// this.ws.onmessage = function (event) {
|
||||
// //self.text_content = event.data + "\n";
|
||||
// var messageBody = JSON.parse(event.data);
|
||||
// Notification.info({
|
||||
// title: "通知",
|
||||
// dangerouslyUseHTMLString: true,
|
||||
// message: messageBody.noticeContent,
|
||||
// duration: 0,
|
||||
// offset: 40,
|
||||
// onClick: function () {
|
||||
// //self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数
|
||||
// // 点击跳转的页面
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
// this.ws.onclose = function (event) {
|
||||
// //self.text_content = self.text_content + "已经关闭连接!" + "\n";
|
||||
// };
|
||||
},
|
||||
methods: {
|
||||
musicAutoPlay() {
|
||||
speechInit() {
|
||||
this.speech = new Speech();
|
||||
this.speech.setLanguage("zh-CN");
|
||||
this.speech.init().then(() => {});
|
||||
},
|
||||
setCanPlayTone() {
|
||||
this.isPlay = true;
|
||||
},
|
||||
latestSecurityIncidents() {
|
||||
playTone() {
|
||||
//同时 触发提示音
|
||||
if (this.isPlay){
|
||||
document.getElementById('audioMusic').play();
|
||||
}
|
||||
},
|
||||
initXDNoticSdk(){
|
||||
console.log("===>initXDNoticSdk==>")
|
||||
this.xdNoticSdk = this.$xdNoticeSdk;
|
||||
const userId=this.$store.getters.userId;
|
||||
// console.log("===>userId==>",userId);
|
||||
@ -141,43 +141,52 @@ export default {
|
||||
// this.printerStatusMessage="通知组件已断开！";
|
||||
},
|
||||
onMessage(evt){
|
||||
// console.log("onMessage")
|
||||
var messageBody = evt.data;
|
||||
// Notification.info({
|
||||
// title: "通知",
|
||||
// dangerouslyUseHTMLString: true,
|
||||
// message: messageBody,
|
||||
// duration: 0,
|
||||
// offset: 40,
|
||||
// onClick: function () {
|
||||
// //self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数
|
||||
// // 点击跳转的页面
|
||||
// },
|
||||
// });
|
||||
},
|
||||
noticeRemote() {
|
||||
getTopNoticeListByUserId().then(response => {
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
let messageBody = response[i];
|
||||
setTimeout(() => {
|
||||
this.notificationInfo(messageBody);
|
||||
}, 100);
|
||||
}
|
||||
})
|
||||
},
|
||||
notificationInfo(messageBody) {
|
||||
console.log("===>onMessage==>",evt)
|
||||
if(evt==null||evt==undefined)
|
||||
return;
|
||||
this.playTone();
|
||||
|
||||
var messageBody = evt;
|
||||
this.$notify.closeAll();
|
||||
|
||||
this.speech.speak({ text: messageBody }).then(() => {
|
||||
console.log("读取成功");
|
||||
});
|
||||
|
||||
Notification.info({
|
||||
title: "通知",
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: messageBody.noticeContent,
|
||||
duration: 0,
|
||||
offset: 40,
|
||||
message: messageBody,
|
||||
position: 'bottom-right',
|
||||
// type: 'success',
|
||||
// customClass:'notify-success',
|
||||
onClick: function () {
|
||||
//self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数
|
||||
// 点击跳转的页面
|
||||
},
|
||||
});
|
||||
},
|
||||
getNoticeUserList() {
|
||||
getTopNoticeListByUserId().then(response => {
|
||||
this.noticeList=response.rows;
|
||||
})
|
||||
},
|
||||
// notificationInfo(messageBody) {
|
||||
// // this.speech.speak({ text: messageBody }).then(() => {
|
||||
// // console.log("读取成功");
|
||||
// // });
|
||||
|
||||
// Notification.info({
|
||||
// title: "通知",
|
||||
// dangerouslyUseHTMLString: true,
|
||||
// message: messageBody.noticeContent,
|
||||
// position: 'bottom-right',
|
||||
// onClick: function () {
|
||||
// //self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数
|
||||
// // 点击跳转的页面
|
||||
// },
|
||||
// });
|
||||
// },
|
||||
// join() {
|
||||
//
|
||||
// },
|
||||
@ -227,7 +236,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ele-notice-group {
|
||||
.xd-notice-group {
|
||||
display: block;
|
||||
|
||||
.el-badge {
|
||||
@ -237,7 +246,7 @@ export default {
|
||||
}
|
||||
|
||||
/* 消息通知pop */
|
||||
.ele-notice-pop {
|
||||
.xd-notice-pop {
|
||||
padding: 0 !important;
|
||||
|
||||
/* tab */
|
||||
@ -263,21 +272,73 @@ export default {
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.ele-notice-list {
|
||||
padding-top: 8px;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
.xd-notice-list {
|
||||
// padding-top: 0px;
|
||||
// max-height: 360px;
|
||||
// overflow: auto;
|
||||
|
||||
// padding-top: 8px;
|
||||
box-sizing: border-box;
|
||||
max-height: calc(100vh - 180px);
|
||||
min-height: 60px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ele-notice-item {
|
||||
.ele-notice-item-wrapper {
|
||||
padding: 12px 15px;
|
||||
.xd-notice-item {
|
||||
display: flex;
|
||||
padding: 14px 24px;
|
||||
box-sizing: border-box;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, .05);
|
||||
}
|
||||
|
||||
// .xd-notice-item-wrapper {
|
||||
// // padding: 5px 8px;
|
||||
// // transition: background-color .2s;
|
||||
// // cursor: pointer;
|
||||
// // display:inline-flex;
|
||||
|
||||
// }
|
||||
|
||||
|
||||
.xd-notice-item-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background-color: #60b2fc;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.el-icon-s-check {
|
||||
background-color: #F5686F;
|
||||
}
|
||||
|
||||
&.el-icon-video-camera {
|
||||
background-color: #7CD734;
|
||||
}
|
||||
|
||||
&.el-icon-s-claim {
|
||||
background-color: #FAAD14;
|
||||
}
|
||||
|
||||
&.el-icon-message-solid {
|
||||
background-color: #2BCACD;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-title{
|
||||
color:#025cd9;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ele-text-secondary {
|
||||
@ -291,43 +352,55 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.ele-notice-item-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px !important;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
background-color: #60B2FC;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
&.el-icon-s-check {
|
||||
background-color: #F5686F;
|
||||
}
|
||||
|
||||
&.el-icon-video-camera {
|
||||
background-color: #7CD734;
|
||||
}
|
||||
|
||||
&.el-icon-s-claim {
|
||||
background-color: #FAAD14;
|
||||
}
|
||||
|
||||
&.el-icon-message-solid {
|
||||
background-color: #2BCACD;
|
||||
}
|
||||
.el-tabs__header {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0px!important;
|
||||
}
|
||||
|
||||
.xd-notice-actions{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-notice-actions > .ele-cell-content {
|
||||
line-height: 42px;
|
||||
.xd-notice-actions > .xd-item-content {
|
||||
flex: 1;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background-color .3s;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, .05);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-success {
|
||||
top: 1.7rem !important;
|
||||
height: 8rem !important;
|
||||
background: #fff !important;
|
||||
border-radius: 0.04rem 0px 0px 0.04rem !important;
|
||||
border: 2px solid red !important;
|
||||
.el-notification .el-icon-info {
|
||||
color: red!important;
|
||||
}
|
||||
}
|
||||
.notify-error{
|
||||
top: 2.7rem !important;
|
||||
// right: 0.32rem !important;
|
||||
// width: 2rem !important;
|
||||
// height: 0.96rem !important;
|
||||
background: rgba(255, 31, 36, 0.05) !important;
|
||||
border-radius: 0.04rem 0px 0px 0.04rem !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -163,11 +163,11 @@ class XDNoticeSdk {
|
||||
};
|
||||
|
||||
this.ws.onmessage = e => {
|
||||
// console.log('ws onmessage:' + e.data)
|
||||
console.log('xdnotice==>ws onmessage:' + e.data)
|
||||
if(this.onMessageCallback.length>0){
|
||||
this.onMessageCallback.forEach(callback=>{
|
||||
if(callback!=null){
|
||||
callback(e);
|
||||
callback(e.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -165,8 +165,8 @@
|
||||
<el-col :span="24">
|
||||
<el-form-item label="启用该员工" prop="blOpen" label-width="100px">
|
||||
<el-radio-group v-model="form.blOpen">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
<el-radio label="0">启用</el-radio>
|
||||
<el-radio label="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user