绘制电脑治理信息页面
This commit is contained in:
guanj
@@ -2,13 +2,8 @@
|
||||
<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"
|
||||
/>
|
||||
<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">
|
||||
@@ -17,59 +12,28 @@
|
||||
</span>
|
||||
</view>
|
||||
<!-- 筛选条件 -->
|
||||
<Cn-filterCriteria
|
||||
ref="cnFilterCriteria"
|
||||
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
||||
@select="select"
|
||||
>
|
||||
<picker
|
||||
v-if="current === 0"
|
||||
@change="bindPickerChange"
|
||||
:value="sortIndex"
|
||||
:range="sortOptions"
|
||||
style="margin-left: auto"
|
||||
>
|
||||
<view class="sort-picker">
|
||||
{{ sortOptions[sortIndex] }}排序
|
||||
<uni-icons
|
||||
custom-prefix="iconfont"
|
||||
type="icon-paixu1"
|
||||
size="10"
|
||||
color="#2563EB"
|
||||
></uni-icons>
|
||||
<Cn-filterCriteria ref="cnFilterCriteria" :level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
||||
@select="select">
|
||||
<picker v-if="current === 0" @change="bindPickerChange" :value="sortIndex" :range="sortOptions">
|
||||
<view class="nav-menu nav-menu1">
|
||||
<view class="nav-text">
|
||||
{{ sortOptions[sortIndex] }}排序
|
||||
</view>
|
||||
|
||||
<uni-icons type="bottom" size="14"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</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"
|
||||
/>
|
||||
<Transient ref="TransientRef" v-if="current === 0" :navHeight="navHeight" :selectValue="selectValue"
|
||||
:sortIndex="sortIndex" @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>
|
||||
@@ -100,7 +64,7 @@ export default {
|
||||
sortOptions: ['发生时间', '暂降深度', '持续时间'],
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onLoad() { },
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
},
|
||||
@@ -204,9 +168,11 @@ export default {
|
||||
},
|
||||
bindPickerChange(e) {
|
||||
this.sortIndex = e.detail.value
|
||||
if (this.$refs.TransientRef) {
|
||||
this.$refs.TransientRef.setSort(this.sortIndex)
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (this.$refs.TransientRef) {
|
||||
this.$refs.TransientRef.init()
|
||||
}
|
||||
}, 0)
|
||||
},
|
||||
// 设置角标
|
||||
getDevCount() {
|
||||
@@ -275,13 +241,16 @@ export default {
|
||||
<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;
|
||||
@@ -292,10 +261,12 @@ export default {
|
||||
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;
|
||||
@@ -309,16 +280,20 @@ export default {
|
||||
width: 90%;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
.badge-container {
|
||||
position: absolute;
|
||||
top: -10rpx; /* 徽章向上偏移，与控件重叠 */
|
||||
top: -10rpx;
|
||||
/* 徽章向上偏移，与控件重叠 */
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
pointer-events: none; /* 确保徽章不干扰点击事件 */
|
||||
pointer-events: none;
|
||||
/* 确保徽章不干扰点击事件 */
|
||||
}
|
||||
|
||||
/deep/ .uni-badge--error {
|
||||
background-color: #ff3b30;
|
||||
}
|
||||
@@ -326,6 +301,7 @@ export default {
|
||||
.badge {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.uni-badge--x {
|
||||
left: 70rpx;
|
||||
}
|
||||
@@ -339,4 +315,32 @@ export default {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.nav-menu1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 150px);
|
||||
}
|
||||
|
||||
/* 文字容器：单行溢出省略 */
|
||||
.nav-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
text-overflow: ellipsis;
|
||||
// -webkit-line-clamp: 1;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
// text-overflow: ellipsis;
|
||||
// word-break: break-all;
|
||||
// white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user