aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2024-08-11 18:32:44 +08:00
parent 4bfa391895
commit 6b2c89d821
4 changed files with 201 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -86,6 +86,7 @@
"save-svg-as-png": "^1.4.17", "save-svg-as-png": "^1.4.17",
"screenfull": "5.0.2", "screenfull": "5.0.2",
"sortablejs": "1.10.2", "sortablejs": "1.10.2",
"speak-tts": "^2.0.8",
"uuid": "^9.0.1", "uuid": "^9.0.1",
"vue": "2.7.0", "vue": "2.7.0",
"vue-amap": "^0.5.10", "vue-amap": "^0.5.10",

319
src/layout/components/TopNotice/index.vue
View File

@ -5,7 +5,7 @@
trigger="click" trigger="click"
v-model="visible" v-model="visible"
transition="el-zoom-in-top" transition="el-zoom-in-top"
popper-class="ele-notice-pop"> popper-class="xd-notice-pop">
<div slot="reference" > <div slot="reference" >
<div> <div>
<el-badge :value="allNum" :hidden="!allNum"> <el-badge :value="allNum" :hidden="!allNum">
@ -13,108 +13,108 @@
</el-badge> </el-badge>
</div> </div>
<div class="wrap"> <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>
</div> </div>
<el-tabs v-model="active"> <el-tabs v-model="active">
<!-- <el-tab-pane name="notice" :label="noticeLabel"> --> <el-tab-pane name="alertTab" label="消息提醒">
<el-tab-pane name="notice" label=""> <div class="xd-notice-list">
<div class="ele-notice-list ele-scrollbar-mini"> <div v-for="(item, index) in alertList" :key="index" class="xd-notice-item">
<div v-for="(item, index) in notice" :key="index" class="ele-notice-item"> <div>
<div class="ele-cell ele-notice-item-wrapper"> <i class="el-icon-bell"></i>
<i :class="[item.icon, 'ele-notice-item-icon']"></i> <!-- <i :class="[item.icon, 'xd-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>
</div> </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> </div>
<!-- <div v-if="notice.length" class="ele-cell ele-notice-actions"> <div v-if="alertList.length" class="ele-cell xd-notice-actions">
<div class="ele-cell-content" @click="clear('notice')">清空通知</div> <div class="xd-item-content" @click="clear('notice')">清空通知</div>
<el-divider direction="vertical" class="line-color-light"/> <el-divider direction="vertical" class="line-color-light"/>
<div class="ele-cell-content" @click="more('notice')">查看更多</div> <div class="xd-item-content" @click="more('notice')">查看更多</div>
</div> --> </div>
<el-empty v-if="!notice.length" description="没有最新消息" /> <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-tab-pane>
</el-tabs> </el-tabs>
<div>
</div>
</el-popover> </el-popover>
</template> </template>
<script> <script>
import {Notification} from "element-ui"; import {Notification} from "element-ui";
import Speech from 'speak-tts'
import {getTopNoticeListByUserId} from "@/api/system/notice"; import {getTopNoticeListByUserId} from "@/api/system/notice";
export default { export default {
name: 'TopNotice', name: 'TopNotice',
data() { data() {
return { return {
visible: false, visible: false,
active: 'notice', speech: null,
notice: [ active: 'alertTab',
// { isPlay:false,
// icon: 'el-icon-s-comment', alertList:[],
// title: '欢迎使用系统！', noticeList: [],
// time: '2023-07-27 18:30:18'
// },
],
xdNoticSdk:null, xdNoticSdk:null,
}; };
}, },
computed: { computed: {
// 通知标题
noticeLabel() {
return this.notice.length ? `通知(${this.notice.length})` : '通知';
},
// 所有消息数量 // 所有消息数量
allNum() { allNum() {
return this.notice.length; return this.noticeList.length;
} }
}, },
mounted() { mounted() {
window.addEventListener("click", this.setCanPlayTone);
this.initXDNoticSdk(); 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: { methods: {
musicAutoPlay() { speechInit() {
this.speech = new Speech();
this.speech.setLanguage("zh-CN");
this.speech.init().then(() => {});
},
setCanPlayTone() {
this.isPlay = true; this.isPlay = true;
}, },
latestSecurityIncidents() { playTone() {
//同时 触发提示音 //同时 触发提示音
if (this.isPlay){ if (this.isPlay){
document.getElementById('audioMusic').play(); document.getElementById('audioMusic').play();
} }
}, },
initXDNoticSdk(){ initXDNoticSdk(){
console.log("===>initXDNoticSdk==>")
this.xdNoticSdk = this.$xdNoticeSdk; this.xdNoticSdk = this.$xdNoticeSdk;
const userId=this.$store.getters.userId; const userId=this.$store.getters.userId;
// console.log("===>userId==>",userId); // console.log("===>userId==>",userId);
@ -141,43 +141,52 @@ export default {
// this.printerStatusMessage="通知组件已断开！"; // this.printerStatusMessage="通知组件已断开！";
}, },
onMessage(evt){ onMessage(evt){
// console.log("onMessage") console.log("===>onMessage==>",evt)
var messageBody = evt.data; if(evt==null||evt==undefined)
// Notification.info({ return;
// title: "通知", this.playTone();
// dangerouslyUseHTMLString: true,
// message: messageBody, var messageBody = evt;
// duration: 0, this.$notify.closeAll();
// offset: 40,
// onClick: function () { this.speech.speak({ text: messageBody }).then(() => {
// //self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数 console.log("读取成功");
// // 点击跳转的页面 });
// },
// });
},
noticeRemote() {
getTopNoticeListByUserId().then(response => {
for (let i = 0; i < response.length; i++) {
let messageBody = response[i];
setTimeout(() => {
this.notificationInfo(messageBody);
}, 100);
}
})
},
notificationInfo(messageBody) {
Notification.info({ Notification.info({
title: "通知", title: "通知",
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: messageBody.noticeContent, message: messageBody,
duration: 0, position: 'bottom-right',
offset: 40, // type: 'success',
// customClass:'notify-success',
onClick: function () { onClick: function () {
//self.warnDetailByWarnid(messageBody.warnId); //自定义回调,message为传的参数 //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() { // join() {
// //
// }, // },
@ -227,7 +236,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.ele-notice-group { .xd-notice-group {
display: block; display: block;
.el-badge { .el-badge {
@ -237,7 +246,7 @@ export default {
} }
/* 消息通知pop */ /* 消息通知pop */
.ele-notice-pop { .xd-notice-pop {
padding: 0 !important; padding: 0 !important;
/* tab */ /* tab */
@ -263,21 +272,73 @@ export default {
} }
/* 列表 */ /* 列表 */
.ele-notice-list { .xd-notice-list {
padding-top: 8px; // padding-top: 0px;
max-height: 360px; // max-height: 360px;
overflow: auto; // overflow: auto;
// padding-top: 8px;
box-sizing: border-box;
max-height: calc(100vh - 180px);
min-height: 60px;
overflow: auto;
} }
.ele-notice-item { .xd-notice-item {
.ele-notice-item-wrapper { display: flex;
padding: 12px 15px; padding: 14px 24px;
box-sizing: border-box;
transition: background-color .2s; transition: background-color .2s;
cursor: pointer; cursor: pointer;
border-top: 1px solid hsla(0, 0%, 60%, .2);
&:hover { &:hover {
background-color: hsla(0, 0%, 60%, .05); 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 { .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-tabs__header {
&.el-icon-s-check { padding: 0;
background-color: #F5686F; position: relative;
} margin: 0px!important;
&.el-icon-video-camera {
background-color: #7CD734;
}
&.el-icon-s-claim {
background-color: #FAAD14;
}
&.el-icon-message-solid {
background-color: #2BCACD;
}
} }
.xd-notice-actions{
display: flex;
align-items: center;
border-top: 1px solid hsla(0, 0%, 60%, .2);
}
/* 操作按钮 */ /* 操作按钮 */
.ele-notice-actions > .ele-cell-content { .xd-notice-actions > .xd-item-content {
line-height: 42px; flex: 1;
line-height: 46px;
text-align: center; text-align: center;
text-decoration: none;
transition: background-color .3s;
cursor: pointer; cursor: pointer;
color: black;
font-weight: 500;
&:hover { &:hover {
background-color: hsla(0, 0%, 60%, .05); 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> </style>

4
src/utils/XDNoticeSdk.js
View File

@ -163,11 +163,11 @@ class XDNoticeSdk {
}; };
this.ws.onmessage = e => { this.ws.onmessage = e => {
// console.log('ws onmessage:' + e.data) console.log('xdnotice==>ws onmessage:' + e.data)
if(this.onMessageCallback.length>0){ if(this.onMessageCallback.length>0){
this.onMessageCallback.forEach(callback=>{ this.onMessageCallback.forEach(callback=>{
if(callback!=null){ if(callback!=null){
callback(e); callback(e.data);
} }
}) })
} }

4
src/views/emis/emisUser/editForm.vue
View File

@ -165,8 +165,8 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="启用该员工" prop="blOpen" label-width="100px"> <el-form-item label="启用该员工" prop="blOpen" label-width="100px">
<el-radio-group v-model="form.blOpen"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>