166 lines
4.1 KiB
Vue
166 lines
4.1 KiB
Vue
<style lang='scss' scoped>
|
||
.device{
|
||
width: 100%;
|
||
&-content{
|
||
padding: 30rpx $paddingLR;
|
||
}
|
||
&-total{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #E5E5E5;
|
||
&-icon{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background-color: #1C9AFF;
|
||
}
|
||
}
|
||
&-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
align-items: center;
|
||
border-bottom: 1px solid #E5E5E5;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="device">
|
||
<pickerGroup :leftSelectList="leftSelectList" leftValue="1" :rightValue="rightValue"
|
||
:rightSelectList="rightSelectList" @onRightConfirm="onRightConfirmFn"></pickerGroup>
|
||
<!-- <view class="device-header">
|
||
<u-select v-model="sceneShowFlag" :list="sceneList"></u-select>
|
||
</view> -->
|
||
<view class="device-content">
|
||
<view class="device-total">
|
||
<view class="device-total-icon">
|
||
<tuiIcon name="yanwu" color="#fff"></tuiIcon>
|
||
</view>
|
||
<view class="pl20 text-bold">该场所设备总：6</view>
|
||
</view>
|
||
<view class="device-list">
|
||
<u-swipe-action :show="item.show" :index="index" btn-width="140"
|
||
v-for="(item, index) in list" :key="item.id"
|
||
@click="onClickFn" @open="open" :options="options"
|
||
>
|
||
<view class="device-box">
|
||
<view class="device-box-info">
|
||
<view class="pb20">
|
||
<text style="color: #666;">编号：</text>
|
||
<text class="text-bold">{{item.number}}</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="color: #666;">位置：</text>
|
||
<text class="text-bold">{{item.location}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="" :style="{color:true?'#FE5D3F':true?'#F69906':'#1C9AFF'}">{{true?'火警':true?'故障':'正常'}}</view>
|
||
</view>
|
||
</u-swipe-action>
|
||
<!-- <view class="device-box">
|
||
<view class="device-box-info">
|
||
<view class="">
|
||
<text style="color: #666;">编号：</text>
|
||
<text>2021021212333</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="color: #666;">位置：</text>
|
||
<text>中青大厦18楼101北区</text>
|
||
</view>
|
||
</view>
|
||
<view class="">火警</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import pickerGroup from "@/components/electricalSafe/pickerGroup.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
id: 1,
|
||
number: '20210120173218F01',
|
||
location: '中青大厦18楼101北区',
|
||
show: false
|
||
},
|
||
{
|
||
id: 2,
|
||
number: '20210120173218F01',
|
||
location: '中青大厦18楼102北区',
|
||
show: false
|
||
},
|
||
{
|
||
id: 3,
|
||
number: '20210120173218F01',
|
||
location: '中青大厦18楼103北区',
|
||
show: false,
|
||
}
|
||
],
|
||
show: false,
|
||
options: [
|
||
{
|
||
text: '详情',
|
||
style: {
|
||
backgroundColor: '#1CB7FF'
|
||
}
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#FF6050'
|
||
}
|
||
}
|
||
],
|
||
|
||
|
||
|
||
leftSelectList:[{label:"厕所",value:"1"},{label:"2栋",value:"2"}],
|
||
rightSelectList:[{label:"烟感",value:"yangan"},{label:"摄像头",value:"camera"}],
|
||
leftValue:"1",
|
||
rightValue:"yangan",
|
||
}
|
||
},
|
||
components:{pickerGroup},
|
||
onLoad() {},
|
||
methods: {
|
||
onRightConfirmFn(e){
|
||
console.log(e,"e");
|
||
this.rightValue = e;
|
||
},
|
||
onClickFn(index,index1){
|
||
console.log(index,"index");
|
||
console.log(index1,"index1");
|
||
if(index1 == 1) {
|
||
this.list.splice(index, 1) ;
|
||
this.$u.toast(`删除了第${index}个cell`, 3000);
|
||
} else {
|
||
this.list[index].show = false;
|
||
|
||
|
||
uni.navigateTo({
|
||
url:`./${this.rightValue === 'yangan'?'smokeDetail':'cameraDetail'}`
|
||
})
|
||
}
|
||
},
|
||
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
|
||
open(index) {
|
||
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
||
// 原本为'false'，再次设置为'false'会无效
|
||
this.list[index].show = true;
|
||
this.list.map((val, idx) => {
|
||
if(index != idx) this.list[idx].show = false;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|