171 lines
5.0 KiB
Vue
171 lines
5.0 KiB
Vue
<style lang='scss' scoped>
|
||
.alarmCenter{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #FBF8FB;
|
||
&-header{
|
||
display: flex;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
&-picker{
|
||
width: 200rpx;
|
||
text-align: center;
|
||
}
|
||
&-search{
|
||
width: calc(100% - 200rpx);
|
||
}
|
||
}
|
||
&-list{
|
||
padding: $paddingTB $paddingLR;
|
||
background-color: #FBF8FB;
|
||
}
|
||
&-box{
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: $box-shadow;
|
||
position: relative;
|
||
margin-bottom: 30rpx;
|
||
&-rightTop-icon{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 30rpx;
|
||
|
||
}
|
||
&-top{
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
&-info{
|
||
display: flex;
|
||
padding-top: 20rpx;
|
||
align-items: center;
|
||
}
|
||
}
|
||
&-bottom{
|
||
padding: $paddingTB $paddingLR;
|
||
&-row{
|
||
padding-bottom: 10rpx;
|
||
&-label{
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarmCenter-content{
|
||
padding: 70rpx $paddingLR;
|
||
padding-bottom: 40rpx;
|
||
&-row{
|
||
padding-bottom: 10rpx;
|
||
}
|
||
&-bottom-btn{
|
||
padding: 0 30rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="alarmCenter">
|
||
<view class="alarmCenter-header">
|
||
<view class="alarmCenter-header-picker flex-center" @click="selectShow = true">
|
||
<text>{{currentLabel}}</text>
|
||
<u-icon name="arrow-down-fill" class="pl20" color="#aaa" size="20"></u-icon>
|
||
</view>
|
||
<u-search class="alarmCenter-header-search" :show-action="false"></u-search>
|
||
</view>
|
||
<mescroll-body top="0" ref="mescrollRef" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="alarmCenter-list">
|
||
<view class="alarmCenter-box" v-for="(item,index) in 3" :key="index" @click="goAlarmDetailFn(item)">
|
||
<view class="alarmCenter-box-top">
|
||
<tuiIcon v-if="true" name="yichuli" @click.stop="alarmShowFlag = true" color="#82C974" size="80" class="alarmCenter-box-rightTop-icon"></tuiIcon>
|
||
<u-tag v-else text="我知道了" size="mini" color="#1B9DFF" shape="circle" class="alarmCenter-box-rightTop-icon" ></u-tag>
|
||
<view class="alarmCenter-box-top-name text-bold">烟雾探测报警器</view>
|
||
<view class="alarmCenter-box-top-info">
|
||
<tuiIcon name="zaixian" class="pr20" color="#2C9004" size="60" ></tuiIcon>
|
||
<view class="">
|
||
<view class="alarmCenter-box-address">
|
||
<text>区域：</text>
|
||
<text>中青大厦18楼101北区</text>
|
||
</view>
|
||
<view class="alarmCenter-box-state">
|
||
<text>状态：</text>
|
||
<text>正常</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="alarmCenter-box-bottom">
|
||
<view class="alarmCenter-box-bottom-row">
|
||
<text class="alarmCenter-box-bottom-row-label">编号：</text>
|
||
<text>20210210210210101</text>
|
||
</view>
|
||
<view class="alarmCenter-box-bottom-row">
|
||
<text class="alarmCenter-box-bottom-row-label">位置：</text>
|
||
<text>中青大厦18楼101北区</text>
|
||
</view>
|
||
<view class="alarmCenter-box-bottom-row">
|
||
<text class="alarmCenter-box-bottom-row-label">时间：</text>
|
||
<text>2021-01-21 10:20:20</text>
|
||
</view>
|
||
<view class="alarmCenter-box-bottom-row">
|
||
<text class="alarmCenter-box-bottom-row-label">详细地址：</text>
|
||
<text>福建省福州市闽侯县上街镇乌龙江大道</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
<u-select v-model="selectShow" :list="stateList" @confirm="onConfirmSelectFn"></u-select>
|
||
<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
|
||
<view class="alarmCenter-content">
|
||
<view class="alarmCenter-content-row">项目：上海德润谷云物联科技有限公司集团有限公司</view>
|
||
<view class="alarmCenter-content-row">地址：福建省福州市闽侯县</view>
|
||
<view class="alarmCenter-content-row">线路：总路</view>
|
||
<view class="alarmCenter-content-row">报警类型：异常分闸</view>
|
||
<view class="alarmCenter-content-row">报警时间：2020年12月8日09:30:41</view>
|
||
<view class="alarmCenter-content-row">联系人：林工</view>
|
||
<view class="alarmCenter-content-row">联系电话：15860886888</view>
|
||
<view class="alarmCenter-content-bottom-btn">
|
||
<u-button type="primary" shape="circle">立即处理</u-button>
|
||
<view class="pt20"></view>
|
||
<u-button type="primary" shape="circle">填写维保</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentLabel:"全部",
|
||
selectShow:false, // 选择框开关
|
||
alarmShowFlag:false, // 警报信息开关
|
||
stateList:[{
|
||
label:"全部",
|
||
value:1
|
||
},{
|
||
label:"已处理",
|
||
value:2
|
||
},{
|
||
label:"未处理",
|
||
value:3
|
||
}]
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
onLoad() {},
|
||
methods: {
|
||
onConfirmSelectFn(e){
|
||
console.log(e,"eeeeees");
|
||
this.currentLabel = e[0].label;
|
||
},
|
||
goAlarmDetailFn(item){
|
||
uni.navigateTo({
|
||
url:"./alarmDetail"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|