317 lines
10 KiB
Vue
317 lines
10 KiB
Vue
<template>
|
|
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
|
|
<view slot="body" class="message">
|
|
<view class="tabsBox">
|
|
<uni-segmented-control
|
|
:current="current"
|
|
:values="items"
|
|
style-type="text"
|
|
active-color="#376cf3"
|
|
@clickItem="onClickItem"
|
|
/>
|
|
<!-- 角标 -->
|
|
<view class="badge-container">
|
|
<span v-for="(item, index) in items" :key="index" class="badge">
|
|
<uni-badge :text="badgeCounts[index] > 99 ? '99+' : badgeCounts[index]" />
|
|
<!-- {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }} -->
|
|
</span>
|
|
</view>
|
|
<!-- 筛选条件 -->
|
|
<Cn-filterCriteria
|
|
ref="cnFilterCriteria"
|
|
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
|
@select="select"
|
|
>
|
|
</Cn-filterCriteria>
|
|
</view>
|
|
<view class="content">
|
|
<Transient
|
|
ref="TransientRef"
|
|
v-if="current === 0"
|
|
:navHeight="navHeight"
|
|
:selectValue="selectValue"
|
|
@getDevCount="getDevCount"
|
|
/>
|
|
<SteadyState
|
|
ref="SteadyStateRef"
|
|
v-if="current === 1"
|
|
:navHeight="navHeight"
|
|
:selectValue="selectValue"
|
|
@getDevCount="getDevCount"
|
|
/>
|
|
<Alarm
|
|
ref="AlarmRef"
|
|
v-if="current === 2"
|
|
:navHeight="navHeight"
|
|
:selectValue="selectValue"
|
|
@getDevCount="getDevCount"
|
|
/>
|
|
<Run
|
|
ref="RunRef"
|
|
v-if="current === 3"
|
|
:navHeight="navHeight"
|
|
:selectValue="selectValue"
|
|
@getDevCount="getDevCount"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</Cn-page>
|
|
</template>
|
|
<script>
|
|
import Transient from '@/pages/message1/transient.vue'
|
|
import SteadyState from '@/pages/message1/steadyState.vue'
|
|
import Alarm from '@/pages/message1/alarm.vue'
|
|
import Run from '@/pages/message1/run.vue'
|
|
import { getDevCount } from '../../common/api/device.js'
|
|
import { updateStatus } from '@/common/api/message'
|
|
export default {
|
|
components: { Transient, SteadyState, Alarm, Run },
|
|
props: {},
|
|
data() {
|
|
return {
|
|
items: ['暂态事件', '稳态事件'], //'运行告警', '运行事件'
|
|
badgeCounts: [0, 0, 0, 0],
|
|
current: 0,
|
|
colorIndex: 0,
|
|
item: '',
|
|
loading: false,
|
|
width: 0,
|
|
navHeight: 0,
|
|
selectValue: {},
|
|
devCount: [],
|
|
// 筛选数据
|
|
}
|
|
},
|
|
onLoad() {},
|
|
mounted() {
|
|
this.setHeight()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refresh()
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要全部标记为已读吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
updateStatus({
|
|
// '暂态事件', 0
|
|
// '稳态事件', 1
|
|
// '运行告警', 3
|
|
// '运行事件' 2
|
|
type: this.current == 2 ? 3 : this.current == 3 ? 2 : this.current,
|
|
eventIds: [],
|
|
}).then(() => {
|
|
this.refresh()
|
|
this.getDevCount()
|
|
})
|
|
}
|
|
},
|
|
})
|
|
},
|
|
|
|
onShow() {
|
|
if (uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'operation_manager') {
|
|
this.items = ['暂态事件', '稳态事件', '运行告警', '运行事件']
|
|
}
|
|
const params = uni.getStorageSync('messageParams')
|
|
this.getDevCount()
|
|
this.$nextTick(() => {
|
|
if (params.type !== '') {
|
|
this.current = params.type - 0
|
|
}
|
|
if (params.name != '') {
|
|
this.$refs.cnFilterCriteria && this.$refs.cnFilterCriteria.external(params.name, params.id)
|
|
}
|
|
// this.refresh()
|
|
this.$refs.TransientRef && this.$refs.TransientRef.getConfig()
|
|
})
|
|
},
|
|
// 页面销毁
|
|
onHide() {
|
|
uni.setStorageSync('messageParams', {
|
|
name: '',
|
|
id: '',
|
|
type: '',
|
|
})
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
uni.createSelectorQuery()
|
|
.select('.tabsBox')
|
|
.boundingClientRect((rect) => {
|
|
this.width = rect.width
|
|
//
|
|
// #ifdef H5
|
|
this.navHeight = rect.height + 75
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
this.navHeight = rect.height + 20
|
|
// #endif
|
|
})
|
|
.exec()
|
|
},
|
|
|
|
refresh() {
|
|
switch (this.current) {
|
|
case 0:
|
|
this.$refs.TransientRef.store.reload()
|
|
break
|
|
case 1:
|
|
this.$refs.SteadyStateRef.store.reload()
|
|
break
|
|
case 2:
|
|
this.$refs.AlarmRef.store.reload()
|
|
break
|
|
case 3:
|
|
this.$refs.RunRef.store.reload()
|
|
break
|
|
}
|
|
},
|
|
onClickItem(e) {
|
|
if (this.current !== e.currentIndex) {
|
|
this.current = e.currentIndex
|
|
}
|
|
},
|
|
select(value) {
|
|
this.selectValue = value
|
|
setTimeout(() => {
|
|
this.setHeight()
|
|
}, 100)
|
|
},
|
|
// 设置角标
|
|
getDevCount() {
|
|
if (uni.getStorageSync('projectList')[1] != undefined) {
|
|
getDevCount(uni.getStorageSync('projectList')[1].engineeringId).then((res) => {
|
|
this.devCount = res.data
|
|
this.badgeCounts = [
|
|
this.devCount.eventCount,
|
|
this.devCount.harmonicCount,
|
|
this.devCount.alarmCount,
|
|
this.devCount.runCount,
|
|
]
|
|
uni.setStorage({
|
|
key: this.$cacheKey.messageCount,
|
|
data: this.devCount,
|
|
})
|
|
let messagePage =
|
|
this.devCount.runCount +
|
|
this.devCount.eventCount +
|
|
this.devCount.alarmCount +
|
|
this.devCount.harmonicCount
|
|
let minePage = this.devCount.feedBackCount
|
|
|
|
if (messagePage) {
|
|
uni.setTabBarBadge({
|
|
index: 1,
|
|
text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
|
|
})
|
|
} else {
|
|
uni.removeTabBarBadge({
|
|
index: 1,
|
|
})
|
|
}
|
|
if (minePage) {
|
|
uni.setTabBarBadge({
|
|
index: 2,
|
|
text: minePage + '',
|
|
})
|
|
} else {
|
|
uni.removeTabBarBadge({
|
|
index: 2,
|
|
})
|
|
}
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.setBadgeNumber(messagePage + minePage)
|
|
// #endif
|
|
})
|
|
}
|
|
},
|
|
|
|
// 根据索引动态计算右侧偏移位置，使徽章对准每个标签的右上角
|
|
getBadgeRightPosition(index) {
|
|
if (this.items == 4) {
|
|
return (index + 1) * (this.width / 4) + 'px'
|
|
} else {
|
|
return (index + 0) * (this.width / 2) + 'px'
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.messageBox {
|
|
overflow: hidden;
|
|
/deep/.tabsBox {
|
|
position: relative;
|
|
background-color: #fff;
|
|
.segmented-control {
|
|
// height: 40px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #cccccc70;
|
|
.segmented-control__item {
|
|
align-items: baseline;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.segmented-control__text {
|
|
font-size: 30rpx !important;
|
|
color: rgb(96, 98, 102);
|
|
}
|
|
.segmented-control__item--text {
|
|
font-weight: bold;
|
|
padding: 0 0 5rpx;
|
|
}
|
|
.choose {
|
|
// padding: 20rpx;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.subsection {
|
|
width: 90%;
|
|
margin: 20rpx auto;
|
|
}
|
|
.badge-container {
|
|
position: absolute;
|
|
top: -10rpx; /* 徽章向上偏移，与控件重叠 */
|
|
display: flex;
|
|
justify-content: space-around;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
pointer-events: none; /* 确保徽章不干扰点击事件 */
|
|
}
|
|
/deep/ .uni-badge--error {
|
|
background-color: #ff3b30;
|
|
}
|
|
|
|
.badge {
|
|
flex: 1;
|
|
// position: absolute;
|
|
// min-width: 18px;
|
|
// height: 16px;
|
|
// padding: 0 4px;
|
|
// background-color: #ff3b30; /* 红色徽章 */
|
|
// color: white;
|
|
// font-size: 22rpx;
|
|
// line-height: 16px;
|
|
// text-align: center;
|
|
// border-radius: 9px;
|
|
//
|
|
text-align: center;
|
|
// transform: translateX(-110%); /* 使徽章中心对齐右上角 */
|
|
.uni-badge--x {
|
|
left: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|