提交app
This commit is contained in:
guanj
287
pages/index/message1.vue
Normal file
287
pages/index/message1.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<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"
|
||||
:style="{ left: getBadgeRightPosition(index) }"
|
||||
v-if="badgeCounts[index] > 0"
|
||||
>
|
||||
{{ 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() {
|
||||
this.getDevCount()
|
||||
this.$nextTick(() => {
|
||||
this.refresh()
|
||||
this.$refs.cnFilterCriteria.getProjectList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
setHeight() {
|
||||
uni.createSelectorQuery()
|
||||
.select('.tabsBox')
|
||||
.boundingClientRect((rect) => {
|
||||
this.width = rect.width
|
||||
//
|
||||
// #ifdef H5
|
||||
this.navHeight = rect.height + 70
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.navHeight = rect.height + 20
|
||||
// #endif
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
|
||||
refresh() {
|
||||
switch (this.current) {
|
||||
case 0:
|
||||
// this.$refs.TransientRef.getConfig()
|
||||
// this.$refs.TransientRef.filterValue = ''
|
||||
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) {
|
||||
return (index + 1) * (this.width / 4) + 'px'
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.messageBox {
|
||||
overflow: hidden;
|
||||
/deep/.tabsBox {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
.segmented-control {
|
||||
height: 49px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #cccccc70;
|
||||
}
|
||||
|
||||
.segmented-control__text {
|
||||
font-size: 27rpx !important;
|
||||
color: rgb(96, 98, 102);
|
||||
}
|
||||
.segmented-control__item--text {
|
||||
font-weight: bold;
|
||||
}
|
||||
.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; /* 徽章向上偏移，与控件重叠 */
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
pointer-events: none; /* 确保徽章不干扰点击事件 */
|
||||
}
|
||||
|
||||
.badge {
|
||||
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;
|
||||
transform: translateX(-150%); /* 使徽章中心对齐右上角 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user