Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

消息弹窗样式优化

Browse Source
yangwl
LAPTOP-R6EHHS26\86155 5 months ago
parent ff381433bf
commit edd172d74f
1 changed files with 128 additions and 26 deletions
Show Stats Download Patch File Download Diff File

154
src/layout/components/Navbar.vue
Unescape Escape View File

@ -31,26 +31,37 @@
></el-option>
</el-select>
<el-tooltip content="异常处理">
<span
class="exceptionHandling"
:class="{ warnTxt: (typeList && typeList.length) || 0 }"
@click="getAlarmData(true)"
><i class="el-icon-message"></i>{{
(typeList && typeList.length > 0 && typeList.length) || ""
}}
</span>
<span
class="exceptionHandling"
:class="{ warnTxt: (typeList && typeList.length) || 0 }"
@click="getAlarmData(true)"
><i class="el-icon-message"></i
>{{ (typeList && typeList.length > 0 && typeList.length) || "" }}
</span>
</el-tooltip>
<el-tooltip :content="unReadComments" effect="dark" v-if="showPrise">
<el-badge :value="commentNum" class="item" style="margin-right: 10px;">
<i class="el-icon-bell right-menu-item hover-effect"
style="line-height: 50px;color:#FF4D4F;font-size: 25px;padding-right: 0px;margin-top: -9px;"
@click="gotoComment"></i>
<el-badge :value="commentNum" class="item" style="margin-right: 10px">
<i
class="el-icon-bell right-menu-item hover-effect"
style="
line-height: 50px;
color: #ff4d4f;
font-size: 25px;
padding-right: 0px;
margin-top: -9px;
"
@click="gotoComment"
></i>
</el-badge>
</el-tooltip>
<el-tooltip :content="unReadComments" effect="dark" v-else>
<i class="el-icon-bell right-menu-item hover-effect" style="line-height: 50px;color:grey;font-size: 25px;" @click="gotoComment"></i>
</el-tooltip>
<i
class="el-icon-bell right-menu-item hover-effect"
style="line-height: 50px; color: grey; font-size: 25px"
@click="gotoComment"
></i>
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -137,6 +148,43 @@
<el-button @click="open1 = false">取 消</el-button>
</div>
</el-dialog>
<!-- 消息弹窗 -->
<el-dialog
title="消息提示"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
class="messagedialog"
>
<div class="message">
<div class="messagelist">
<div class="itemlist" v-for="(item,index) in commentNum" :key="index" >
<!-- <div class="timetip">2024-04-24 08:00:00</div> -->
<div class="item">
<div class="titilebox">
<div class="title">工单未开始超时提醒</div>
<div class="subtitle">上位机未及时执行工单的开始动作</div>
</div>
<div class="elcollapse">
<el-collapse accordion>
<el-collapse-item>
<template slot="title">
间读详情
</template>
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
@ -150,7 +198,7 @@ import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
import { getUnReadComment} from '@/api/plan/workorder';
import { getUnReadComment } from "@/api/plan/workorder";
import {
listNotice,
getNotice,
@ -160,6 +208,7 @@ import {
} from "@/api/system/notice";
//import { listData, editAlarmStatus } from "@/api/energy/exception/data.js";
import { changePoolName } from "@/api/system/user";
import Index from "./TagsView/index.vue";
export default {
dicts: ["alarmType", "alarmStatus"],
data() {
@ -178,9 +227,11 @@ export default {
// 非多个禁用
multiple1: true,
showPrise: false,
unReadComments: '您有0新的未读消息，请点击查看',
commentNum:0,
queryParams:{}
unReadComments: "您有0新的未读消息，请点击查看",
commentNum: 0,
queryParams: {},
dialogVisible: false,
messagedata:[],
};
},
created() {
@ -196,7 +247,7 @@ export default {
// 实现轮询
this.timer = setInterval(() => {
setTimeout(this.getUnReadList(), 30000);
}, 30000);
}, 30000);
},
components: {
Breadcrumb,
@ -245,6 +296,9 @@ export default {
[this.$createElement("el-button", {}, ["点击查看"])]
),
});
},
handleClose(){
},
// 处理报警
editAlarmStatus() {
@ -307,21 +361,23 @@ export default {
/** 获取未读消息数 */
getUnReadList() {
console.log("++未读消息查询++");
getUnReadComment(this.queryParams).then(response => {
if(response>0){
this.unReadComments='您有'+response+'新的未读消息，请点击查看';
getUnReadComment(this.queryParams).then((response) => {
if (response > 0) {
this.unReadComments = "您有" + response + "新的未读消息，请点击查看";
this.commentNum = response;
console.log(response,'ssssss',)
this.showPrise = true;
}else{
} else {
this.showPrise = false;
}
});
},
/** 跳转到【消息】 */
gotoComment() {
alert("301")
// alert("301");
this.showPrise = false;
}
this.dialogVisible = true;
},
},
};
</script>
@ -350,7 +406,7 @@ export default {
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.exceptionHandling {
/* line-height: 50px;
/* line-height: 50px;
display: inline-block;
color: black;*/
vertical-align: text-bottom;
@ -436,4 +492,50 @@ export default {
}
}
}
.messagedialog {
.message {
height: 400px;
background-color: #f9f9f9;
.messagelist {
padding-top: 10px;
.itemlist {
width: 85%;
margin: auto;
.timetip {
text-align: center;
margin-bottom: 10px;
}
.item {
border: 1px solid #eeeeee;
width: 100%;
padding: 10px;
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0px 0px 0px 2px #f1f1f1;
.titilebox {
margin-bottom: 30px;
.title {
font-size: 18px;
margin-bottom: 5px;
}
.subtitle {
font-size: 16px;
margin-bottom: 5px;
}
}
}
}
}
}
}
::v-deep .messagedialog .el-dialog__body {
padding: 0;
}
::v-deep .messagedialog .el-dialog__header {
border-bottom: 1px solid #eeeeee;
}
::v-deep .messagedialog .el-collapse-item__header {
border-bottom: none;
line-height: 32px;
}
</style>

Write Preview
Loading…
Cancel
Save