<template>
<div class="Dialog box" v-if="show" @mouseover="mouseover" @mouseout="mouseout" :style="{ top: top + 'px', left: left + 'px' }">
<div class="dialog-title">{{dialogTitle}}
<img src="@/assets/img/close.png" alt="" @click="closeHandle">
</div>
<div class="contents">
您有<span>XX</span>条{{typeName}}待填报,截止<span>9月15日</span>未填,{{typeName}}状态将列为超时未报。
</div>
<div class="contents">您有<span>{{listNum}}</span>条异常{{typeName}},请及时处理。</div>
<div class="btmBtns"><el-button type="primary" @click="closeHandle" size="small">不再提醒</el-button></div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import http from "@/service/interface.js";
export default {
components: {},
data () {
return {
roleId: localStorage.roleId,
dialogTitle: '填报提醒',
dialogVisible: false,
listNum: 0,
contents: '',
typeName: '任务',
show: true, // 是否展现飘窗
stepX: 1, // 水平方向的步长
stepY: 1, // 垂直方向的步长
timer: "", // 定时器
maxTop: 0, // 最大的 top 值
maxLeft: 0, // 最大的 left 值
top: 0,
left: 0
}
},
computed: {
...mapState(
'user', {
taskWarn: (state) => {
return state.taskWarn
},
leaderWarn: (state) => {
return state.leaderWarn
}
}
)
},
created () {
const routeName = this.$route.name
if (routeName == 'taskListLeader') {
this.show = this.leaderWarn
this.typeName = '批示'
this.getNotFillNumLeader()
} else {
this.show = this.taskWarn
this.typeName = '任务'
this.getNotFillNumTask()
}
},
mounted () {
this.init()
},
methods: {
// 飘窗
init () {
// 设置最大的top和left值:根元素可视区域宽高 - 飘窗的宽高 - 边距
this.maxTop = document.documentElement.clientHeight - 220;
this.maxLeft = document.documentElement.clientWidth - 390;
// 设置 top 和 left 的初始值
this.top = 0;
this.left = 0;
clearInterval(this.timer);
this.timer = setInterval(() => {
this.move();
}, 20);
this.onresize();
},
move () {
if (this.top >= this.maxTop || this.top < 0) {
this.stepY = -this.stepY;
}
if (this.left >= this.maxLeft || this.left < 0) {
this.stepX = -this.stepX;
}
this.top += this.stepY;
this.left += this.stepX;
},
mouseover () {
clearInterval(this.timer);
},
mouseout () {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.move();
}, 20);
},
// 关闭飘窗
closeHandle () {
const routeName = this.$route.name
if (routeName == 'taskListLeader') {
this.setLeaderWarn(false)
} else {
this.setTaskWarn(false)
}
clearInterval(this.timer);
this.show = false;
},
// 窗口大小调整时重置飘窗规则
onresize () {
window.addEventListener('resize', this.init);
},
...mapActions('user', {
setTaskWarn: 'setTaskWarn',
setLeaderWarn: 'setLeaderWarn'
}),
},
beforeDestroy () {
clearInterval(this.timer);
window.removeEventListener('resize', this.init);
},
}
</script>
<style lang='less' scoped>
* {
box-sizing: border-box;
}
.Dialog {
width: 390px;
height: 220px;
border-radius: 5px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 9;
.dialog-title {
height: 48px;
line-height: 48px;
font-size: 24px;
font-weight: normal;
color: #2985e6;
text-indent: 1.5em;
font-family: PangMenZhengDao-3, PangMenZhengDao;
background-image: url('~@/assets/img/dialogtitle.png');
background-size: auto;
img {
float: right;
margin: 15px 10px 0 0;
cursor: pointer;
}
}
.contents {
line-height: 30px;
font-size: 16px;
padding: 10px;
span {
color: red;
}
}
.btmBtns {
text-align: center;
}
}
</style>
07-25
452
03-19
1349
03-03
1091