gy-app-shop/pages/home/temperature/alarmCenter.vue

171 lines
5.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>