530 lines
11 KiB
Vue
530 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="下级设备列表" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='58'></u-navbar>
|
||
<view class="serchinp">
|
||
<u-search placeholder="搜索" v-model="keyword" @custom="btnseach"></u-search>
|
||
<view class="xuanze">
|
||
<text style="margin-top: 4rpx;" @click="btnstatus(1)">{{zhuangt}}</text> <text
|
||
style="width: 2px;height: 40rpx;background-color: #C7C7C7;display: inline-block;"></text> <text
|
||
style="margin-top: 4rpx;" @click="btnstatus(2)">{{leix}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="device">
|
||
<view class="shuju">
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
设备总数
|
||
</view>
|
||
<view class="sb">
|
||
50
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
未上机数
|
||
</view>
|
||
<view class="sb">
|
||
0
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
在线数
|
||
</view>
|
||
<view class="sb">
|
||
47
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
离线数
|
||
</view>
|
||
<view class="sb">
|
||
3
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="scrll">
|
||
<view class="cdblist" @scrolltolower="onReachBottom" v-for="(item,index) in wateringList" :key="index">
|
||
<view class="toptltle">
|
||
<view class="toptltle_lt">
|
||
<u-icon style="margin-right: 10rpx;" name="file-text" size="36"
|
||
@click="copybtn(item.sn)"></u-icon> {{item.sn}}
|
||
</view>
|
||
<view class="toptltle_rt" @click="btnxq(item.cabinetId)">
|
||
<text></text><text></text><text></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cdbcen">
|
||
<view class="cdbcen-dpmc">
|
||
店铺名称：<text>{{item.storeName}}</text>
|
||
</view>
|
||
<view class="cdbcen-dpdz">
|
||
<view class="">
|
||
店铺地址：{{item.storeAddress}}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="sj">
|
||
绑定时间：{{item.createTime}}
|
||
</view>
|
||
<view class="cdbcen-szbz">
|
||
<view class="inp">
|
||
<text>设置备注：</text> <input type="text"
|
||
:placeholder="item.remark == null ? '无' : item.remark" />
|
||
</view>
|
||
<view class="but">
|
||
修改备注
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view>
|
||
<view class="cdbbuttom">
|
||
<view class="one">
|
||
<text>网络</text><text>设备状态</text><text>类型</text><text>电池</text><text>可还</text>
|
||
</view>
|
||
<view class="two">
|
||
<text style="color: #1DBE7B;" v-if="item.onlineStatus == 1">在线</text>
|
||
<text style="color: red;" v-if="item.onlineStatus == 0">离线</text>
|
||
<text style="color: #1DBE7B;" v-if="item.status == 1">正常</text>
|
||
<text style="color: red;" v-if="item.status == 2">异常</text>
|
||
<text>{{item.modelName}}</text><text>{{item.currentPowerBankNum}}</text><text>{{item.slotNum - item.currentPowerBankNum}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style="width: 448rpx;height: 448rpx;margin: auto;margin-top: 100rpx;text-align: center;"
|
||
v-if="showflag">
|
||
<image style="width: 448rpx;height: 448rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/ufLi6IZd5kh1MIEZFYTo" mode=""></image>
|
||
<view class="" style="font-size: 30rpx;color: #ccc;margin-top: 30rpx;">暂无更多设备...</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 类型 -->
|
||
<u-select v-model="zhuangtaishow" :list="zhaungtailist" @confirm="confirmzt"></u-select>
|
||
<!-- 状态 -->
|
||
<u-select v-model="leixingshow" :list="leixinglist" @confirm="confirmlx"></u-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
zhuangtaishow: false,
|
||
leixingshow: false,
|
||
zhaungtailist: [{
|
||
value: '1',
|
||
label: '正常'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '离线'
|
||
}
|
||
],
|
||
zhuangt: '状态',
|
||
leix: '类型',
|
||
leixinglist: [{
|
||
value: '1',
|
||
label: '4'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '8'
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '16'
|
||
},
|
||
{
|
||
value: '4',
|
||
label: '24'
|
||
}
|
||
],
|
||
bgc: {
|
||
background: '#25CE88'
|
||
},
|
||
ancestorAgentId: '',
|
||
pagenum: 1,
|
||
wateringList: [],
|
||
pagesize: 10,
|
||
isLoading: false,
|
||
noMoreData: false,
|
||
total: 0,
|
||
showflag: false,
|
||
keyword: '',
|
||
storeId:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if(option.storeId){
|
||
this.storeId = option.storeId
|
||
}else{
|
||
this.storeId = ''
|
||
}
|
||
},
|
||
onShow() {
|
||
if(this.storeId){
|
||
this.pagenum = 1
|
||
this.wateringList = []
|
||
this.getlists()
|
||
}else{
|
||
this.ancestorAgentId = uni.getStorageSync('userdata').agentId
|
||
this.pagenum = 1
|
||
this.wateringList = []
|
||
this.getlist()
|
||
}
|
||
},
|
||
methods: {
|
||
btnseach() {
|
||
this.pagenum = 1
|
||
this.wateringList = []
|
||
this.getlist()
|
||
},
|
||
getlist() {
|
||
this.$u.get('/agent/cabinet/list?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize + '&keyword=' +
|
||
this.keyword + '&ancestorAgentId=' + this.ancestorAgentId).then(res => {
|
||
if (res.code == 200) {
|
||
this.total = res.total;
|
||
if (this.total > 0) {
|
||
this.showflag = false
|
||
} else {
|
||
this.showflag = true
|
||
}
|
||
this.totalWithdraw = res.totalWithdraw
|
||
this.wateringList = this.wateringList.concat(res.rows);
|
||
this.pagenum++;
|
||
} else {
|
||
this.noMoreData = true;
|
||
}
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
getlists() {
|
||
this.$u.get('/agent/cabinet/list?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize + '&keyword=' + this.keyword + '&storeId=' + this.storeId).then(res => {
|
||
if (res.code == 200) {
|
||
this.total = res.total;
|
||
if (this.total > 0) {
|
||
this.showflag = false
|
||
} else {
|
||
this.showflag = true
|
||
}
|
||
this.totalWithdraw = res.totalWithdraw
|
||
this.wateringList = this.wateringList.concat(res.rows);
|
||
this.pagenum++;
|
||
} else {
|
||
this.noMoreData = true;
|
||
}
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
let sum = this.total / this.pagesize
|
||
if (this.pagenum - 1 < sum) {
|
||
this.getlist();
|
||
} else {
|
||
uni.showToast({
|
||
title: '没有更多设备了',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
|
||
copybtn(text) {
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: function(res) {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
btnstatus(num) {
|
||
if (num == 1) {
|
||
this.zhuangtaishow = true
|
||
this.leixingshow = false
|
||
} else {
|
||
this.zhuangtaishow = false
|
||
this.leixingshow = true
|
||
}
|
||
},
|
||
confirmzt(e) {
|
||
console.log(e);
|
||
this.zhuangt = e[0].label
|
||
},
|
||
confirmlx(e) {
|
||
console.log(e);
|
||
this.leix = e[0].label
|
||
},
|
||
|
||
btnxq(cabinetId) {
|
||
uni.navigateTo({
|
||
url: '/pages/agentpages/devicemanagement/chargepallist/listdetail/index?cabinetId=' + cabinetId
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-title,
|
||
/deep/ .uicon-nav-back {
|
||
padding-bottom: 40rpx;
|
||
}
|
||
.page .serchinp .u-content{
|
||
padding-left: 20rpx !important;
|
||
}
|
||
page {
|
||
background: #F4F5F7;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
padding-left: 34rpx;
|
||
padding-right: 34rpx;
|
||
box-sizing: border-box;
|
||
|
||
// position: fixed;
|
||
// top: 0;
|
||
// left: 0;
|
||
.scrll {
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
margin-top: 24rpx;
|
||
padding-bottom: 400rpx;
|
||
}
|
||
|
||
.cdblist {
|
||
width: 680rpx;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
|
||
.cdbbuttom {
|
||
padding: 26rpx 60rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
|
||
text {
|
||
width: 100rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.one {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.two {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
.cdbcen {
|
||
padding: 24rpx 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.cdbcen-dpmc {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #25CE88;
|
||
}
|
||
}
|
||
|
||
.cdbcen-dpdz {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 6rpx;
|
||
|
||
.sj {
|
||
font-size: 20rpx;
|
||
color: #3D3D3D;
|
||
margin-left: 34rpx;
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
|
||
.cdbcen-szbz {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
|
||
text {
|
||
padding-top: 6rpx;
|
||
}
|
||
|
||
.inp {
|
||
display: flex;
|
||
|
||
input {
|
||
width: 354rpx;
|
||
height: 30rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding-left: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
|
||
.but {
|
||
width: 110rpx;
|
||
height: 44rpx;
|
||
background: #1DBE7B;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.toptltle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
.toptltle_lt {
|
||
padding-top: 24rpx;
|
||
padding-left: 32rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #808080;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.toptltle_rt {
|
||
padding-top: 12rpx;
|
||
padding-right: 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background-color: #000;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.device {
|
||
width: 100%;
|
||
margin-top: 210rpx;
|
||
|
||
.iconlist {
|
||
display: flex;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
width: 680rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding-top: 38rpx;
|
||
|
||
image {
|
||
width: 96rpx;
|
||
height: 98rpx;
|
||
margin-right: 66rpx;
|
||
}
|
||
}
|
||
|
||
.shuju {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
width: 680rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding-top: 38rpx;
|
||
|
||
.ddje {
|
||
text-align: center;
|
||
|
||
.shu {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.sb {
|
||
margin-top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.serchinp {
|
||
width: 750rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 0;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 32rpx;
|
||
z-index: 99;
|
||
/deep/ .u-content {
|
||
padding-left: 150rpx;
|
||
border-radius: 50rpx 0 0 50rpx !important;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
/deep/ .u-action {
|
||
border: 1rpx solid #ccc;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
margin-left: 0;
|
||
width: 120rpx;
|
||
background-color: #f2f2f2;
|
||
border-radius: 0 50rpx 50rpx 0;
|
||
}
|
||
|
||
.xuanze {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 146rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
</style> |