<template>
<view class="pages">
<u-navbar title="设备管理" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
title-size='36' height='44'></u-navbar>
<view class="nav">
<view class="tab">
<view @click="btntab(1)" :class="indexactive == 1 ? 'active' : ''">全部</view>
<view @click="btntab(2)" :class="indexactive == 2 ? 'active' : ''">使用中</view>
<view @click="btntab(3)" :class="indexactive == 3 ? 'active' : ''">待使用</view>
<view @click="btntab(4)" :class="indexactive == 4 ? 'active' : ''">仓库中</view>
<view @click="btntab(5)" :class="indexactive == 5 ? 'active' : ''">投放中</view>
</view>
<view class="serch">
<image src="https://api.ccttiot.com/smartmeter/img/static/uBY0VGovU7BZrSdUi7cn" mode=""></image>
<input type="text" v-model="keyword" @blur="blurs" placeholder="请输入内容" />
</view>
</view>
<!-- 设备 -->
<scroll-view scroll-y="true" @scrolltolower="onScrollToLower" style="height: 1300rpx;" class="list">
<view class="list_item" v-for="(item,index) in wateringList" :key="index" @click="btnxq(item.deviceId)">
<view class="top">
<view class="bh">设备编号：{{item.deviceNo == undefined ? '--' : item.deviceNo}}</view>
<view class="zx" v-if="item.onlineStatus == 1">
<view class="yuan"></view>
<view class="wz">在线</view>
</view>
<view class="zx" v-else>
<view class="yuan" style="background-color: red;"></view>
<view style="color: red;">离线</view>
</view>
</view>
<view class="bd">
<view class="one">设备类型</view>
<view class="one">{{item.model == undefined ? '--' : item.model}}</view>
</view>
<view class="bd">
<view class="one">经营场所</view>
<view class="one" v-if="item.storeName">{{item.storeName == undefined ? '--' : item.storeName}}
</view>
<view class="wbd" v-else style="color: #8883F0;" @click.stop="btnbds(item.deviceId)">未绑定</view>
</view>
<view class="bd">
<view class="one" style="width: 180rpx;">经营地址</view>
<view class="one">{{item.storeAddress == undefined ? '--' : item.storeAddress}}</view>
</view>
<view class="cen" v-if="type == 2">
<view class="fj">所在房间</view>
<input type="text" v-model="item.room" :placeholder="item.room == undefined ? '无' : item.room" @change="change(item.room)" @click.stop="" />
<view class="btn" @click.stop="btnedit(item.deviceId)" v-if="type == 2">修改</view>
</view>
<view class="cen" v-else>
<view class="fj">所在房间</view>
<view>{{item.room}}</view>
</view>
<view class="devixexq">
<view class="xiaoav">
<view class="">设备状态</view>
<view style="color: rgb(18, 210, 172);;" v-if="item.status == 2">使用中</view>
<view style="color: rgb(18, 210, 172);;" v-if="item.status == 1">正常</view>
<view style="color: red;" v-if="item.status == 3">不可用</view>
</view>
<view class="xiaoav">
<view class="">所属合作伙伴</view>
<view class="">{{item.agentName == undefined ? '--' : item.agentName}}</view>
</view>
<view class="xiaoav">
<view class="">所属渠道商</view>
<view class="">{{item.bizManName == undefined ? '--' : item.bizManName}}</view>
<!-- <view class="wbd" v-else @click.stop="btnbd">未绑定</view> -->
</view>
<view class="xiaoav">
<view class="">所属创业者</view>
<view class="" v-if="item.userId">{{item.userName == undefined ? '--' : item.userName}}</view>
<view class="wbd" v-else @click.stop="btntz(item.deviceId)">未绑定</view>
</view>
</view>
<view class="zong">
<view class="xiaoav">
<view class="">订单总数</view>
<view class="">{{item.orderCount == undefined ? '--' : item.orderCount}}</view>
</view>
<view class="xiaoav">
<view class="">订单总金额</view>
<view class="">￥{{item.orderAmount == undefined ? '--' : item.orderAmount}}</view>
</view>
</view>
</view>
<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
-已经到底了-
</view>
</scroll-view>
<!-- 渠道商 -->
<!-- <u-select v-model="show" :list="list" @confirm="confirm"></u-select> -->
<!-- 经营场所 -->
<u-select v-model="shows" :list="lists" @confirm="confirms"></u-select>
<!-- 投资 -->
<u-select v-model="showtz" :list="listtz" @confirm="confirmtz"></u-select>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
indexactive: 1,
show: false,
room: '',
shows: false,
showtz: false,
listtz: [],
lists: [],
list: [{
value: '1',
label: '张三'
},
{
value: '2',
label: '李四'
}, {
value: '3',
label: '王五'
}
],
pagenum: 1,
wateringList: [],
pagesize: 10, // 一页多少数据
total: 0,
type: 2,
keyword: '',
statusList: '',
deviceId: '',
type:'',
isUsing:''
}
},
onLoad(option) {
this.type = option.type
this.getlist()
this.gettzr()
this.getchangsuo()
},
// 分享到好友（会话）
onShareAppMessage: function() {
return {
title: '创亿康',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创亿康',
query: '',
path: '/pages/index/index'
}
},
methods: {
// 切换tab高亮
btntab(num) {
this.indexactive = num
if (num == 1) {
this.wateringList = []
this.pagenum = 1
this.statusList = ''
this.isUsing = ''
this.getlist()
} else if (num == 2) {
this.wateringList = []
this.pagenum = 1
this.statusList = 2
this.isUsing = true
this.getlist()
} else if (num == 3) {
this.wateringList = []
this.pagenum = 1
this.statusList = 1
this.isUsing = false
this.getlist()
} else if (num == 4) {
this.wateringList = []
this.pagenum = 1
this.statusList = 3
this.isUsing = ''
this.getlist()
} else {
this.wateringList = []
this.pagenum = 1
this.statusList = '2,3'
this.isUsing = ''
this.getlist()
}
},
// 跳转到详情
btnxq(deviceId) {
uni.navigateTo({
url: '/page_user/deviceedit?deviceId=' + deviceId
})
},
change(room){
this.room = room
},
// 修改房间号
btnedit(deviceId) {
let data = {
deviceId: deviceId,
room: this.room
}
this.$u.put(`agent/device`, data).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000,
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000,
})
}
})
},
// 点击绑定渠道商
// btnbd() {
// this.show = true
// },
// 点击绑定创业者
btntz(deviceId) {
this.showtz = true
this.deviceId = deviceId
},
// 点击确定绑定创业者
confirmtz(e) {
let userId = e[0].value
let data = {
deviceId: this.deviceId,
userId: userId
}
this.$u.put(`agent/device`, data).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000,
})
this.wateringList = []
this.pagenum = 1
this.getlist()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000,
})
}
})
},
// 点击绑定经营场所
btnbds(deviceId) {
this.shows = true
this.deviceId = deviceId
},
confirms(e) {
let storeId = e[0].value
let data = {
deviceId: this.deviceId,
storeId: storeId
}
this.$u.put(`agent/device`, data).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000,
})
this.wateringList = []
this.pagenum = 1
this.getlist()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000,
})
}
})
},
//获取列表
getlist() {
// 合作伙伴（代理）
if(this.type == 2){
this.$u.get(
`/agent/device/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.statusList}&keyword=${this.keyword}&isUsing=${this.isUsing}`
).then(res => {
if (res.code == 200) {
this.total = res.total
if (res.rows.length > 0) {
// 有数据，追加到列表
this.wateringList = this.wateringList.concat(res.rows)
this.pagenum++
}
}
})
// 创业者（投资人）
}else if(this.type == 4){
this.$u.get(
`/app/device/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.statusList}&keyword=${this.keyword}&isUsing=${this.isUsing}`
).then(res => {
if (res.code == 200) {
this.total = res.total
if (res.rows.length > 0) {
// 有数据，追加到列表
this.wateringList = this.wateringList.concat(res.rows)
this.pagenum++
}
}
})
// 渠道商（业务员）
}else if(this.type == 3){
this.$u.get(
`/biz/device/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.statusList}&keyword=${this.keyword}&isUsing=${this.isUsing}`
).then(res => {
if (res.code == 200) {
this.total = res.total
if (res.rows.length > 0) {
// 有数据，追加到列表
this.wateringList = this.wateringList.concat(res.rows)
this.pagenum++
}
}
})
// 经营场所
}else if(this.type == 5){
this.$u.get(
`store/device/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}&statusList=${this.statusList}&keyword=${this.keyword}&isUsing=${this.isUsing}`
).then(res => {
if (res.code == 200) {
this.total = res.total
if (res.rows.length > 0) {
// 有数据，追加到列表
this.wateringList = this.wateringList.concat(res.rows)
this.pagenum++
}
}
})
}
},
// 滚动到底部
onScrollToLower() {
if (this.total > this.wateringList.length) {
this.getlist() // 上拉加载更多
}
},
// 失焦搜索
blurs() {
this.wateringList = []
this.pagenum = 1
this.getlist()
},
getinfo(){
this.$u.get(`/app/user/userInfo`).then(res => {
if(res.code == 200){
if(res.data.type == 2){
this.gettzr()
}else{
this.gettzrs()
}
}
})
},
// 合作伙伴取所有创业者
gettzr() {
this.$u.get(`/agent/user/allInvestorList`).then(res => {
if (res.code == 200) {
res.data.forEach(item => {
this.listtz.push({
label: item.userName,
value: item.userId
})
})
}
})
},
// 渠道商
// gettzr() {
// this.$u.get(`/biz/user/allInvestorList`).then(res => {
// if (res.code == 200) {
// res.data.forEach(item => {
// this.listtz.push({
// label: item.userName,
// value: item.userId
// })
// })
// }
// })
// },
// 获取所有的经营场所
getchangsuo() {
this.$u.get(`/agent/store/allList`).then(res => {
if (res.code == 200) {
res.data.forEach(item => {
this.lists.push({
label: item.name,
value: item.storeId
})
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.active {
color: #3D3D3D !important;
border-bottom: 6rpx solid #8883F0;
}
/deep/ .u-title {
padding-bottom: 15rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 15rpx;
}
.pages {
background-color: #F7FAFE !important;
height: 100vh;
width: 100%;
overflow: hidden;
.list {
padding: 0 38rpx;
box-sizing: border-box;
padding-bottom: 200rpx;
box-sizing: border-box;
.list_item {
max-height: 618rpx;
padding: 24rpx 28rpx;
box-sizing: border-box;
background-color: #fff;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 20rpx;
.devixexq {
display: flex;
justify-content: space-between;
margin-top: 14rpx;
text-align: center;
.xiaoav {
font-size: 24rpx;
color: #3D3D3D;
view {
margin-top: 12rpx;
}
.wbd {
color: #8883F0 !important;
}
}
}
.zong {
margin-top: 14rpx;
display: flex;
justify-content: space-between;
text-align: center;
padding: 0 50rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #3D3D3D;
view {
margin-top: 12rpx;
}
}
.cen {
display: flex;
justify-content: space-between;
margin-top: 22rpx;
align-items: center;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 34rpx;
box-sizing: border-box;
.fj {
font-size: 24rpx;
color: #3D3D3D;
}
input {
width: 346rpx;
height: 38rpx;
background: #F0F0F0;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding-left: 30rpx;
box-sizing: border-box;
color: #808080;
}
.btn {
width: 110rpx;
height: 38rpx;
background: #8883F0;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text-align: center;
line-height: 38rpx;
font-size: 20rpx;
color: #FFFFFF;
}
}
.top {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 26rpx;
box-sizing: border-box;
.bh {
font-size: 24rpx;
color: #3D3D3D;
}
.zx {
display: flex;
align-items: center;
.yuan {
width: 14rpx;
height: 14rpx;
background: #12D2AC;
border-radius: 50%;
margin-right: 10rpx;
}
.wz {
font-size: 24rpx;
color: #12D2AC;
}
}
}
.bd {
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #3D3D3D;
margin-top: 22rpx;
}
}
}
.nav {
background-color: #fff;
width: 100%;
height: 280rpx;
.serch {
width: 672rpx;
height: 100rpx;
background: #F4F4F4;
border-radius: 10rpx 10rpx 10rpx 10rpx;
display: flex;
margin: auto;
margin-top: 28rpx;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
input {
width: 80%;
}
image {
width: 36rpx;
height: 36rpx;
margin-right: 26rpx;
}
}
.tab {
display: flex;
justify-content: space-between;
padding: 0 50rpx;
box-sizing: border-box;
padding-top: 46rpx;
font-size: 36rpx;
color: #808080;
font-weight: 600;
view {
padding-bottom: 10rpx;
box-sizing: border-box;
}
}
}
}
</style>