|
@@ -7,7 +7,7 @@
|
|
|
* @FilePath: \UMIS\src\components\others\Header.vue
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="header" :class="[collapse? 'collapse':'expand']">
|
|
|
+ <div class="header" :class="[collapse ? 'collapse' : 'expand']">
|
|
|
<div class="el-fl-left"><v-tags></v-tags></div>
|
|
|
<div class="header-right">
|
|
|
<div class="header-user-con">
|
|
@@ -15,7 +15,7 @@
|
|
|
<!-- 用户头像 -->
|
|
|
<div class="user-avator" @click="editUserInfo">
|
|
|
<i class="iconfont" v-show="!cruUserInfo.photo" v-bottom-txt-tip data-txt="编辑用户信息"></i>
|
|
|
-
|
|
|
+
|
|
|
<div
|
|
|
class="imgs"
|
|
|
v-show="cruUserInfo.photo"
|
|
@@ -27,17 +27,17 @@
|
|
|
<div class="message">
|
|
|
<span class="main" @click="goMessage('unread')">
|
|
|
<!-- <i class="iconfont btn"></i> -->
|
|
|
- <img :src='"@assets/img/btn_news.png"' alt="">
|
|
|
+ <img :src="'@assets/img/btn_news.png'" alt="" />
|
|
|
<span class="iconfont point" v-if="messageNumber"></span>
|
|
|
</span>
|
|
|
- <div class="msg-content" v-if="messageList&&messageList.length">
|
|
|
+ <div class="msg-content" v-if="messageList && messageList.length">
|
|
|
<p>消息通知</p>
|
|
|
<ul>
|
|
|
- <li v-for="(items, index) in messageList" :key="index" @click="toUrl(items.typeId)" style="cursor: pointer;">
|
|
|
- <img :src='"@/assets/img/icon_msg"+(items.typeId)+".png"' style="width: 30px; height: 30px" />
|
|
|
+ <li v-for="(items, index) in messageList" :key="index" @click="toUrl(items.typeId)" style="cursor: pointer">
|
|
|
+ <img :src="'@/assets/img/icon_msg' + items.typeId + '.png'" style="width: 30px; height: 30px" />
|
|
|
<div>
|
|
|
- <span class="cont">【{{items.shortName}}】{{items.messageContent}}</span>
|
|
|
- <span class="time">{{items.dateCreate}}</span>
|
|
|
+ <span class="cont">【{{ items.shortName }}】{{ items.messageContent }}</span>
|
|
|
+ <span class="time">{{ items.dateCreate }}</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -46,18 +46,16 @@
|
|
|
<div class="msg-content" v-else>
|
|
|
<p>消息通知</p>
|
|
|
<ul>
|
|
|
- <li style="text-align: center;display: block;padding: 0 20px;line-height: 60px;">
|
|
|
- 暂无消息
|
|
|
- </li>
|
|
|
+ <li style="text-align: center; display: block; padding: 0 20px; line-height: 60px">暂无消息</li>
|
|
|
</ul>
|
|
|
- <el-button type="text" class="more" disabled>查看更多</el-button>
|
|
|
+ <el-button type="text" class="more" disabled>查看更多</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <span style="width: 1px; height: 16px; background: #FFFFFF; opacity: 0.5"></span> -->
|
|
|
<span class="border"></span>
|
|
|
- <div class="logout" @click="logOut">
|
|
|
- <el-tooltip placement="bottom" content="退出">
|
|
|
- <img src="@/assets/img/btn_quit.png" class="tab_head-right" @click="logOut" />
|
|
|
+ <div class="logout">
|
|
|
+ <el-tooltip placement="bottom" content="退出">
|
|
|
+ <img src="@/assets/img/btn_quit.png" class="tab_head-right" @click="logOut" />
|
|
|
</el-tooltip>
|
|
|
<!-- <i class="iconfont" v-bottom-txt-tip data-txt="退出"></i> -->
|
|
|
</div>
|
|
@@ -75,16 +73,16 @@ export default {
|
|
|
return {
|
|
|
name: '',
|
|
|
envConfig: envConfig,
|
|
|
- imgList:[
|
|
|
- require("@/assets/img/icon_msg1.png"),
|
|
|
- require("@/assets/img/icon_msg2.png"),
|
|
|
- require("@/assets/img/icon_msg3.png"),
|
|
|
- require("@/assets/img/icon_msg4.png"),
|
|
|
- require("@/assets/img/icon_msg5.png"),
|
|
|
- require("@/assets/img/icon_msg6.png"),
|
|
|
- require("@/assets/img/icon_msg7.png"),
|
|
|
- require("@/assets/img/icon_msg8.png"),
|
|
|
- require("@/assets/img/icon_msg9.png")
|
|
|
+ imgList: [
|
|
|
+ require('@/assets/img/icon_msg1.png'),
|
|
|
+ require('@/assets/img/icon_msg2.png'),
|
|
|
+ require('@/assets/img/icon_msg3.png'),
|
|
|
+ require('@/assets/img/icon_msg4.png'),
|
|
|
+ require('@/assets/img/icon_msg5.png'),
|
|
|
+ require('@/assets/img/icon_msg6.png'),
|
|
|
+ require('@/assets/img/icon_msg7.png'),
|
|
|
+ require('@/assets/img/icon_msg8.png'),
|
|
|
+ require('@/assets/img/icon_msg9.png')
|
|
|
]
|
|
|
};
|
|
|
},
|
|
@@ -102,35 +100,37 @@ export default {
|
|
|
...mapState(['messageList'])
|
|
|
},
|
|
|
methods: {
|
|
|
- toUrl(type){
|
|
|
- let url,appId;
|
|
|
- if(type==1||type==2){
|
|
|
- url=this.envConfig.warnDetailUrl;
|
|
|
- appId="1002";
|
|
|
- }else if(type==4){
|
|
|
- url=this.envConfig.taskManagementUrl;
|
|
|
- appId="1003";
|
|
|
- }else if(type==3||type==7){
|
|
|
- url=this.envConfig.eventHiddenDangerUrl;
|
|
|
- appId="1003";
|
|
|
- }else if(type==9){
|
|
|
+ toUrl(type) {
|
|
|
+ let url, appId;
|
|
|
+ if (type == 1 || type == 2) {
|
|
|
+ url = this.envConfig.warnDetailUrl;
|
|
|
+ appId = '1002';
|
|
|
+ } else if (type == 4) {
|
|
|
+ url = this.envConfig.taskManagementUrl;
|
|
|
+ appId = '1003';
|
|
|
+ } else if (type == 3 || type == 7) {
|
|
|
+ url = this.envConfig.eventHiddenDangerUrl;
|
|
|
+ appId = '1003';
|
|
|
+ } else if (type == 9) {
|
|
|
// url=this.envConfig.eventHiddenDangerUrl;
|
|
|
- appId="1012";
|
|
|
+ appId = '1012';
|
|
|
this.$router.push({
|
|
|
- path: '/msg',
|
|
|
- });
|
|
|
- return;
|
|
|
+ path: '/msg'
|
|
|
+ });
|
|
|
+ return;
|
|
|
}
|
|
|
- this.$http.postForm('/sc-message/message/judgingTheMessageJumpPermission',{
|
|
|
- url:url.split('/')[url.split('/').length - 1],
|
|
|
- appId:appId
|
|
|
- }).then(({ status, data, msg })=>{
|
|
|
- if(status==0&&data==0){
|
|
|
- window.open(url);
|
|
|
- }else{
|
|
|
- this.$message.error("您没有该系统权限")
|
|
|
- }
|
|
|
- })
|
|
|
+ this.$http
|
|
|
+ .postForm('/sc-message/message/judgingTheMessageJumpPermission', {
|
|
|
+ url: url.split('/')[url.split('/').length - 1],
|
|
|
+ appId: appId
|
|
|
+ })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (status == 0 && data == 0) {
|
|
|
+ window.open(url);
|
|
|
+ } else {
|
|
|
+ this.$message.error('您没有该系统权限');
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 退出登录
|
|
|
logOut() {
|
|
@@ -143,8 +143,8 @@ export default {
|
|
|
});
|
|
|
localStorage.removeItem('SC_token');
|
|
|
this.$store.commit('setloginInfo', '');
|
|
|
- this.$store.dispatch("tags", []);
|
|
|
- sessionStorage.removeItem("tabs");
|
|
|
+ this.$store.dispatch('tags', []);
|
|
|
+ sessionStorage.removeItem('tabs');
|
|
|
location.href = this.envConfig.loginUrl;
|
|
|
} else {
|
|
|
this.$message.error(msg);
|
|
@@ -178,32 +178,32 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
goMessage(msg) {
|
|
|
- let messageStatus = 2;//全部
|
|
|
+ let messageStatus = 2; //全部
|
|
|
if (msg == 'unread') {
|
|
|
- messageStatus = 0;//未读
|
|
|
+ messageStatus = 0; //未读
|
|
|
}
|
|
|
- this.$store.commit('setmessageStatus',messageStatus);
|
|
|
+ this.$store.commit('setmessageStatus', messageStatus);
|
|
|
this.$router.push({
|
|
|
- path: '/msg',
|
|
|
+ path: '/msg'
|
|
|
});
|
|
|
},
|
|
|
//获取最新消息列表
|
|
|
- getMessageList(){
|
|
|
- this.$http.postForm('/sc-message/message/queryLastMessage',{num:'5'}).then(({ status, data, msg }) => {
|
|
|
+ getMessageList() {
|
|
|
+ this.$http.postForm('/sc-message/message/queryLastMessage', { num: '5' }).then(({ status, data, msg }) => {
|
|
|
if (status === 0) {
|
|
|
this.$store.commit('setmessageList', data);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//查询未读消息数量
|
|
|
- getUnreadNumber(){
|
|
|
+ getUnreadNumber() {
|
|
|
this.$http.postForm('/sc-message/message/queryUnreadMessageStatic').then(({ status, data, msg }) => {
|
|
|
if (status === 0) {
|
|
|
- data.map((item,index)=>{
|
|
|
- if(item.cn){
|
|
|
- this.$store.commit('setmessageNumber', true);
|
|
|
+ data.map((item, index) => {
|
|
|
+ if (item.cn) {
|
|
|
+ this.$store.commit('setmessageNumber', true);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -212,7 +212,7 @@ export default {
|
|
|
if ('WebSocket' in window) {
|
|
|
var serviceIp = this.envConfig.websoketUrl;
|
|
|
this.websocket = new WebSocket('ws://' + serviceIp + '/sc-message/webSocket/' + id);
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
console.log('当前浏览器 Not support websocket');
|
|
|
}
|
|
|
let that = this;
|
|
@@ -236,16 +236,24 @@ export default {
|
|
|
|
|
|
//接收到消息的回调方法
|
|
|
this.websocket.onmessage = function (event) {
|
|
|
- let msg=JSON.parse(event.data);
|
|
|
- let i=msg.typeId-1;
|
|
|
- if(msg.userId){
|
|
|
+ let msg = JSON.parse(event.data);
|
|
|
+ let i = msg.typeId - 1;
|
|
|
+ if (msg.userId) {
|
|
|
that.$notify({
|
|
|
dangerouslyUseHTMLString: true,
|
|
|
showClose: true,
|
|
|
- customClass:'notice_icon',
|
|
|
+ customClass: 'notice_icon',
|
|
|
offset: 60,
|
|
|
- duration:3000,
|
|
|
- message: "<div class='notice'><img src="+that.imgList[i]+" class='img'/><div class='notice-content'><span class='title'>新消息通知</span><span class='nowrap'>"+"【"+msg.type+"】"+msg.content+"</span></div></div>"
|
|
|
+ duration: 3000,
|
|
|
+ message:
|
|
|
+ "<div class='notice'><img src=" +
|
|
|
+ that.imgList[i] +
|
|
|
+ " class='img'/><div class='notice-content'><span class='title'>新消息通知</span><span class='nowrap'>" +
|
|
|
+ '【' +
|
|
|
+ msg.type +
|
|
|
+ '】' +
|
|
|
+ msg.content +
|
|
|
+ '</span></div></div>'
|
|
|
});
|
|
|
that.getMessageList();
|
|
|
that.getUnreadNumber();
|
|
@@ -296,11 +304,11 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
-.border{
|
|
|
- width:1px;
|
|
|
- height: 10px;
|
|
|
- background: #FFFFFF;
|
|
|
- opacity: 0.3
|
|
|
+.border {
|
|
|
+ width: 1px;
|
|
|
+ height: 10px;
|
|
|
+ background: #ffffff;
|
|
|
+ opacity: 0.3;
|
|
|
}
|
|
|
.header {
|
|
|
height: 46px;
|
|
@@ -310,33 +318,33 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- &.expand::before{
|
|
|
- content: "";
|
|
|
+ &.expand::before {
|
|
|
+ content: '';
|
|
|
display: inline-block;
|
|
|
- width:230px;
|
|
|
- height:46px;
|
|
|
+ width: 230px;
|
|
|
+ height: 46px;
|
|
|
background: #2c354a;
|
|
|
position: absolute;
|
|
|
- left:0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
- &.collapse::before{
|
|
|
- content: "";
|
|
|
+ &.collapse::before {
|
|
|
+ content: '';
|
|
|
display: inline-block;
|
|
|
- width:95px;
|
|
|
- height:46px;
|
|
|
+ width: 95px;
|
|
|
+ height: 46px;
|
|
|
background: #2c354a;
|
|
|
position: absolute;
|
|
|
- left:0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
}
|
|
|
-.header-right {
|
|
|
+.header-right {
|
|
|
padding-right: 20px;
|
|
|
- color:rgba(255, 255, 255, 0.6);
|
|
|
- .name-txt{
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ .name-txt {
|
|
|
font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.header-user-con {
|
|
@@ -346,16 +354,16 @@ export default {
|
|
|
}
|
|
|
.logout {
|
|
|
margin-left: 20px;
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
}
|
|
|
-.iconfont{
|
|
|
+.iconfont {
|
|
|
font-size: 20px;
|
|
|
- color:rgba(255, 255, 255, 0.6);
|
|
|
- &:hover{
|
|
|
- color:rgba(255, 255, 255, 1);;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ &:hover {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
|
}
|
|
|
.user-avator {
|
|
@@ -376,18 +384,18 @@ export default {
|
|
|
&:hover {
|
|
|
.msg-content {
|
|
|
display: block;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
box-shadow: 0px 5px 20px 0px rgba(144, 144, 144, 0.4);
|
|
|
border-radius: 6px;
|
|
|
- z-index:200;
|
|
|
+ z-index: 200;
|
|
|
}
|
|
|
}
|
|
|
.main {
|
|
|
height: 60px;
|
|
|
line-height: 60px;
|
|
|
position: relative;
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
.point {
|
|
@@ -396,7 +404,7 @@ export default {
|
|
|
right: -1px;
|
|
|
width: 4px;
|
|
|
height: 4px;
|
|
|
- background: #FE7271;
|
|
|
+ background: #fe7271;
|
|
|
border-radius: 50%;
|
|
|
display: block;
|
|
|
}
|
|
@@ -404,7 +412,7 @@ export default {
|
|
|
|
|
|
.msg-content {
|
|
|
position: absolute;
|
|
|
- width: 380px;
|
|
|
+ width: 380px;
|
|
|
background: #ffffff;
|
|
|
z-index: 20;
|
|
|
right: 20px;
|
|
@@ -422,7 +430,7 @@ export default {
|
|
|
align-items: center;
|
|
|
height: 60px;
|
|
|
padding-left: 20px;
|
|
|
- border-top: 1px solid #F6F6F6;
|
|
|
+ border-top: 1px solid #f6f6f6;
|
|
|
font-size: 12px;
|
|
|
cursor: auto;
|
|
|
span {
|
|
@@ -436,14 +444,14 @@ export default {
|
|
|
}
|
|
|
.cont {
|
|
|
color: #424656;
|
|
|
- text-indent: -0.4em
|
|
|
+ text-indent: -0.4em;
|
|
|
}
|
|
|
.time {
|
|
|
- color: #7D7F87;
|
|
|
+ color: #7d7f87;
|
|
|
}
|
|
|
}
|
|
|
.more {
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|