276 lines
7.0 KiB
Vue
276 lines
7.0 KiB
Vue
<style lang='scss' scoped>
|
||
.lineRoadList{
|
||
width: 100%;
|
||
/* height: 100%; */
|
||
background-color: #F9F9F9;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
&-header{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
background-color: #fff;
|
||
padding-left: 40rpx;
|
||
padding-right: 20rpx;
|
||
&-allpick{
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
&-info-list{
|
||
background-color: #F9F9F9;
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
&-info-box{
|
||
width: 100%;
|
||
border-radius: $uni-border-radius-lg;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
margin-bottom: 20rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
&-msg{
|
||
padding: 20rpx;
|
||
/* border-bottom: 2px dotted #A1A1A1; */
|
||
border-bottom: 1px dashed #A1A1A1;
|
||
position: relative;
|
||
}
|
||
.box-checkbox{
|
||
position: absolute;
|
||
right: -16rpx;
|
||
top: 14rpx;
|
||
z-index: 10;
|
||
}
|
||
.box-detail-btn{
|
||
position: absolute;
|
||
right: 20rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
.box-left-line{
|
||
width: 20rpx;
|
||
height: 100%;
|
||
background: #93CDFC;
|
||
}
|
||
&-msg-row{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.msg-row-icon{
|
||
border-radius: $uni-border-radius-circle;
|
||
/* padding: 10rpx; */
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: $main-color;
|
||
}
|
||
.msg-row-text{
|
||
color: #000;
|
||
}
|
||
}
|
||
&-bottom{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
.lineRode-info{
|
||
padding: 70rpx 30rpx 40rpx 30rpx;
|
||
&-row{
|
||
padding-bottom: 20rpx;
|
||
&:last-child{
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
&-bottom{
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: #1C9AFF;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 60rpx;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
.u-checkbox__label{
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="lineRoadList">
|
||
<u-sticky>
|
||
<view class="lineRoadList-header" :style="{height:dropdownIsOpen?'100%':''}">
|
||
<u-dropdown @open="onOpenFn" @close="onCloseFn">
|
||
<u-dropdown-item v-model="value1" title="筛选" :options="options1"></u-dropdown-item>
|
||
</u-dropdown>
|
||
<u-search placeholder="输入设备号搜索" v-model="searchValue" :show-action="false" @search="search"></u-search>
|
||
<view class="lineRoadList-header-allpick">
|
||
<text class="pr20">全选</text>
|
||
<u-checkbox v-model="allChecked" @change="onAllCheckChangeFn"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
</u-sticky>
|
||
<view class="lineRoadList-info-list">
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="lineRoadList-info-box" v-for="(item,index) in lineRoadList" :key="index" >
|
||
<view class="lineRoadList-info-box-msg">
|
||
<view class="box-detail-btn" @click="openReadInfoFn(item)">
|
||
查看详情
|
||
</view>
|
||
<u-checkbox class="box-checkbox" v-model="item.checkedFlag" @change="boxCheckChangeFn"></u-checkbox>
|
||
<view class="box-left-line"></view>
|
||
<view class="lineRoadList-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
|
||
</view>
|
||
<text class="msg-row-text pl20">项目：{{item.name}}</text>
|
||
</view>
|
||
<view class="lineRoadList-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
|
||
</view>
|
||
<text class="msg-row-text pl20">地点：{{item.address}}</text>
|
||
</view>
|
||
<view class="lineRoadList-info-box-msg-row">
|
||
<view class="msg-row-icon">
|
||
<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
|
||
</view>
|
||
<text class="msg-row-text pl20">线路：总线已通</text>
|
||
</view>
|
||
</view>
|
||
<view class="lineRoadList-info-box-bottom">
|
||
<text>时间：2020年12月2日14:01:21</text>
|
||
<text>设备状态：在线</text>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
<view class="lineRoadList-bottom">
|
||
<u-button size="medium" shape="circle" @click="batchClosingFn">批量合闸</u-button>
|
||
<u-button size="medium" shape="circle" @click="batchOpeningFn">批量分闸</u-button>
|
||
</view>
|
||
<u-popup v-model="infoShowFlag" mode="center" :closeable="true" border-radius="16">
|
||
<view class="lineRode-info">
|
||
<view class="lineRode-info-row">项目：上海德润谷云物联科技有限公司集团公司</view>
|
||
<view class="lineRode-info-row">地点：A区 18栋 高新产业园</view>
|
||
<view class="lineRode-info-row">设备号：HCWL-1250213001</view>
|
||
<view class="lineRode-info-row">设备状态：在线</view>
|
||
<view class="lineRode-info-row">线路：总路</view>
|
||
<view class="lineRode-info-row">线路状态：已通</view>
|
||
<view class="lineRode-info-row">分/合闸时间：2020-11-17 16:38:30</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal v-model="batchModelShow" title="温馨提示" :show-cancel-button="true" :content="batchModelContent"></u-modal>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentBtnFlagStr:"",
|
||
batchModelContent:"",
|
||
batchModelShow:false,
|
||
searchValue:"",
|
||
allChecked:false,
|
||
value1:1,
|
||
infoShowFlag:false,
|
||
lineRoadList:[{
|
||
checkedFlag:false,
|
||
name:'上海德润谷云物联科技有限公司',
|
||
address:"A区18栋高新产业园",
|
||
totalLineFlag:true
|
||
},{
|
||
checkedFlag:false,
|
||
name:'上海德润谷云物联科技有限公司',
|
||
address:"A区18栋高新产业园",
|
||
totalLineFlag:true
|
||
}],
|
||
options1: [{
|
||
label: '全部',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '合闸',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '分闸',
|
||
value: 3,
|
||
}
|
||
],
|
||
dropdownIsOpen:false,
|
||
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
onLoad() {},
|
||
methods: {
|
||
btnActionFn(){
|
||
this.batchModelContent = this.currentBtnFlagStr==="open"?"您确定批量分闸吗":"您确定批量合闸吗";
|
||
this.batchModelShow = true;
|
||
let arr = this.lineRoadList.filter((item)=>{
|
||
return !!item.checkedFlag;
|
||
})
|
||
console.log(arr,"arr");
|
||
},
|
||
batchClosingFn(){
|
||
this.currentBtnFlagStr = "close";
|
||
this.btnActionFn();
|
||
},
|
||
batchOpeningFn(){
|
||
this.currentBtnFlagStr = "open";
|
||
this.btnActionFn();
|
||
},
|
||
checkStopFn(){
|
||
console.log("???");
|
||
},
|
||
onAllCheckChangeFn(e){
|
||
console.log(e);
|
||
this.lineRoadList.forEach((item)=>{
|
||
item.checkedFlag = e.value;
|
||
})
|
||
},
|
||
boxCheckChangeFn(e){
|
||
// setTimeout(()=>{
|
||
// let pickArr = this.lineRoadList.filter((item)=>{
|
||
// return !!item.checkedFlag;
|
||
// })
|
||
// if(pickArr.length == this.lineRoadList.length){
|
||
// this.allChecked = true;
|
||
// }
|
||
// },200)
|
||
},
|
||
openReadInfoFn(obj){
|
||
this.infoShowFlag = true;
|
||
},
|
||
//
|
||
|
||
onOpenFn(e){
|
||
console.log(e,"e");
|
||
this.dropdownIsOpen = true;
|
||
},
|
||
onCloseFn(e){
|
||
console.log(e,"e1111");
|
||
this.dropdownIsOpen = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|