<template>
|
<!-- <div class="noticeBtn" @click="noticeBtn">-->
|
<!-- <el-badge v-if="!view">-->
|
<!-- <img src="img/notice/xiaoxi-png.png" style="width: 26px;height: 26px; display: flex;" />-->
|
<!-- </el-badge>-->
|
<!-- <el-badge v-if="view">-->
|
<!-- <!– <i class="el-icon-bell"></i> –>-->
|
<!-- <img src="img/notice/xiaoxi-gif.gif" style="width: 26px;height: 26px; display: flex;" />-->
|
<!-- </el-badge>-->
|
<!-- </div>-->
|
|
|
<el-popover placement="bottom" width="350" trigger="click">
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
<el-tab-pane label="未读" name="2"></el-tab-pane>
|
<el-tab-pane label="已读" name="1"></el-tab-pane>
|
</el-tabs>
|
<el-scrollbar style="height:300px">
|
<avue-notice :data="data" :option="option" :finish="finish" @page-change="pageChange" @click="handleClick"></avue-notice>
|
</el-scrollbar>
|
<div slot="reference">
|
<!-- <el-badge is-dot>-->
|
<!-- <i class="el-icon-bell"></i>-->
|
<!-- </el-badge>-->
|
<el-badge :value="number" :max="99" class="item">
|
<i class="el-icon-bell"></i>
|
</el-badge>
|
</div>
|
<messageContent ref="messageContent" @reflushList="reflushList" />
|
</el-popover>
|
|
|
|
|
</template>
|
|
<script>
|
import { updateView, getList } from "@/api/task/reportForRepairs"
|
import {getMyMessage} from "@/api/messageRecord/messageUser";
|
import {mapGetters} from "vuex";
|
import MessageContent from "@/page/index/top/components/messageContent.vue";
|
export default {
|
name: "top-notice",
|
components: {MessageContent},
|
data () {
|
return {
|
finish: false,
|
baseUrl: "https://sk.hubeishuiyi.cn",
|
total: 0,
|
view: false,
|
activeName: '2',
|
page:{
|
current:1,
|
pageSize:5
|
},
|
option: {
|
props: {
|
img: 'img',
|
title: 'title',
|
subtitle: 'time',
|
tag: "tag",
|
status: "s",
|
},
|
},
|
data: [],
|
|
number:"",
|
}
|
},
|
computed: {
|
...mapGetters(["userInfo", "permission"]),
|
},
|
created () {
|
// this.getNoticeNumber()
|
|
this.getMessage(this.page)
|
|
|
},
|
mounted () {
|
this.createEventSource()
|
},
|
methods: {
|
// 刷新
|
reflushList () {
|
// this.getNotReadNumber();
|
this.getMessage(this.page)
|
},
|
// tab 点击事件
|
handleTabClick (tab, event) {
|
this.page = 1
|
this.activeName = tab.name
|
this.getMessage(this.page)
|
},
|
// 行点击
|
handleClick (row) {
|
// 弹窗
|
this.$nextTick(() => {
|
this.$refs.messageContent.init(row)
|
})
|
},
|
|
getMessage(page,params={}){
|
params.messageType = 'receive'
|
params.isRead = this.activeName
|
params.userId = this.userInfo.user_id
|
|
getMyMessage(page.current,page.size,params).then(res=>{
|
const data = res.data.data
|
const record = data.records
|
record.forEach((item) => {
|
item["tag"] = "查看"
|
item["s"] = "查看"
|
})
|
|
this.data = record
|
|
if (params.isRead == 2){
|
this.number = data.total
|
|
if (data.total == 0){
|
this.number = ""
|
}
|
|
}
|
|
if (data.total < 6) {
|
this.finish = true
|
} else {
|
this.finish = false
|
}
|
})
|
|
},
|
|
getNoticeNumber () {
|
var values = {
|
viewType: 2
|
}
|
var that = this
|
// 获取通知数量
|
getList(1, 10, values).then((res) => {
|
const data = res.data.data
|
that.total = data.total
|
if (that.total > 0) {
|
that.view = true
|
} else {
|
that.view = false
|
}
|
})
|
|
},
|
noticeBtn () {
|
this.view = false
|
const data = {}
|
// 更新状态
|
updateView(data).then((res) => {
|
})
|
// 菜单跳转
|
this.$router.push({ path: '/task/index' })
|
},
|
createEventSource () {
|
this.baseUrl = `${window.location.protocol}//${window.location.host}`
|
var that = this
|
if (window.EventSource) {
|
this.source = new EventSource(
|
this.baseUrl +
|
"/api/sse/sse/connect?type=web&userId=1"
|
)
|
this.source.addEventListener(
|
"open",
|
function () {
|
console.log("建立连接。。。")
|
},
|
false
|
)
|
this.source.addEventListener("message", function (e) {
|
console.log("收到消息", e.data)
|
// const data = JSON.parse(e.data)
|
// that.number = data.count
|
// 获取消息列表
|
that.getNoticeNumber()
|
})
|
this.source.addEventListener(
|
"error",
|
function (e) {
|
if (e.readyState === EventSource.CLOSED) {
|
console.log("连接关闭")
|
} else {
|
console.log(e)
|
}
|
},
|
false
|
)
|
} else {
|
console.log("你的浏览器不支持SSE")
|
}
|
},
|
pageChange (page, done) {
|
let params = {}
|
|
params.messageType = 'receive'
|
params.isRead = this.activeName
|
params.userId = this.userInfo.user_id
|
|
getMyMessage(page,page.size,params).then(res=>{
|
const data = res.data.data
|
const record = data.records
|
record.forEach((item) => {
|
item["tag"] = "查看"
|
item["s"] = "查看"
|
})
|
this.data = this.data.concat(record)
|
if (this.data.length == data.total) {
|
this.finish = true
|
}
|
done()
|
})
|
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
