268 lines
7.5 KiB
Vue
268 lines
7.5 KiB
Vue
<style lang="scss" scoped>
|
|
.wisdomElectricity{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F9F9F9;
|
|
:not(not) {
|
|
box-sizing: border-box;
|
|
}
|
|
&-dropdown{
|
|
// position: fixed;
|
|
// left: 0;
|
|
// top: 0;
|
|
background-color: #fff;
|
|
// width: 100%;
|
|
// z-index: 999;
|
|
}
|
|
// &-content{
|
|
// height: calc(100% - 184rpx);
|
|
// overflow: auto;
|
|
// }
|
|
&-device-list{
|
|
padding: 20rpx $paddingLR;
|
|
}
|
|
&-search{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx $paddingLR;
|
|
&-input{
|
|
// width: calc(100% - 180rpx);
|
|
width: 100%;
|
|
}
|
|
&-btn{
|
|
width: 140rpx;
|
|
}
|
|
}
|
|
.wisdomElectricity-device-box{
|
|
box-shadow: $box-shadow;
|
|
background-color: #fff;
|
|
display: flex;
|
|
width: 100%;
|
|
// height: 220rpx;
|
|
border-radius: $uni-border-radius-lg;
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
.device-state{
|
|
position: absolute;
|
|
right: 1rpx;
|
|
top: 10rpx;
|
|
}
|
|
.device-img{
|
|
width: 220rpx;
|
|
padding: 30rpx;
|
|
}
|
|
.device-info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
padding: 60rpx 0;
|
|
padding-left: 0;
|
|
width: calc(100% - 220rpx);
|
|
&-title{
|
|
width: 100%;
|
|
// padding-top: 62rpx;
|
|
padding-bottom: 10rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
&-number{
|
|
width: 100%;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<view class="wisdomElectricity">
|
|
<!-- <u-navbar back-text="返回" title="全部" background="#1c9aff">
|
|
<view class="navbar-right" slot="right">
|
|
<view class="message-box right-item">
|
|
<u-icon name="chat" size="38"></u-icon>
|
|
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
|
|
</view>
|
|
<view class="dot-box right-item">
|
|
<u-icon name="calendar-fill" size="38"></u-icon>
|
|
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
|
|
</view>
|
|
</view>
|
|
</u-navbar> -->
|
|
<view class="wisdomElectricity-dropdown" :style="{height:dropdownIsOpen?'100%':''}">
|
|
<u-dropdown :border-bottom="true" @open="onOpenFn" @close="onCloseFn">
|
|
<u-dropdown-item height="520rpx" v-model="projectIdVal" title="请选择项目" :options="pickProjectOptions" @change="pickProjectOnChangeFn"></u-dropdown-item>
|
|
<u-dropdown-item v-model="screeningValue" title="筛选" :options="screeningOptions" @change="screeningOnChangeFn"></u-dropdown-item>
|
|
</u-dropdown>
|
|
<view class="wisdomElectricity-search">
|
|
<u-search class="wisdomElectricity-search-input" placeholder="输入设备号搜索" @change="searchOnchangeFn" shape="square" :show-action="false" v-model="searchValue"></u-search>
|
|
<!-- <u-button class="wisdomElectricity-search-btn" type="primary" size="mini" @click="goLineRoadListFn">线路列表</u-button> -->
|
|
</view>
|
|
</view>
|
|
<!-- <view class="wisdomElectricity-content"> -->
|
|
<view class="wisdomElectricity-device-list">
|
|
<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="wisdomElectricity-device-box" v-for="(item,index) in deviceList" :key="index" @click="goElectricityDetailFn(item)">
|
|
<view class="device-img" v-if="item.deviceImage">
|
|
<u-image width="100%" height="100%" :src="$tools.getIotFileUrl(item.deviceImage)"></u-image>
|
|
</view>
|
|
<view class="device-img" v-else>
|
|
<u-image width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
|
|
</view>
|
|
<view class="device-info">
|
|
<view class="device-info-title">{{item.deviceName}}</view>
|
|
<view class="device-info-number ellipsis">{{item.deviceKey}}</view>
|
|
</view>
|
|
<u-tag :text="item.deviceState=='OFFLINE'?'离线':item.deviceState=='ONLINE'?'在线':'脱线'" mode="dark" class="device-state"
|
|
:type="item.deviceState=='OFFLINE'?'warning':item.deviceState=='ONLINE'?'success':'info'" shape="circleLeft" />
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
<!-- </view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
export default{
|
|
data(){
|
|
return {
|
|
dropdownIsOpen:false,
|
|
searchValue:"",
|
|
projectIdVal: "",
|
|
screeningValue: "",
|
|
pickProjectOptions: [],
|
|
screeningOptions: [{
|
|
label: '全部',
|
|
value: "",
|
|
},{
|
|
label: '未激活',
|
|
value: "UNACTIVE",
|
|
},{
|
|
label: '在线',
|
|
value: "ONLINE",
|
|
},{
|
|
label: '离线',
|
|
value: "OFFLINE",
|
|
}
|
|
],
|
|
deviceList:[],
|
|
// deviceList:[{
|
|
// deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
|
|
// deviceName:"设备1",
|
|
// deviceId:"HCWL11111111111",
|
|
// deviceState:"在线",
|
|
// projectId:"123"
|
|
// },{
|
|
// deviceImage:"https://fanyiapp.cdn.bcebos.com/ugc/image/zhike_message.jpg",
|
|
// deviceName:"设备2",
|
|
// deviceId:"HCWL6666666666",
|
|
// deviceState:2,
|
|
// projectId:"321"
|
|
// }],
|
|
}
|
|
},
|
|
mixins:[MescrollMixin],
|
|
onLoad(e) {
|
|
this.getProjectListFn();
|
|
if(e.deviceState){
|
|
this.screeningValue = e.deviceState;
|
|
this.mescroll.resetUpScroll();
|
|
}
|
|
},
|
|
methods:{
|
|
searchOnchangeFn(){
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
getProjectListFn(){
|
|
this.$get('/app/project/list',).then((res)=>{
|
|
console.log(res,"Resssss");
|
|
if (res.data && res.data.length>0) {
|
|
this.pickProjectOptions = res.data.map((item)=>{
|
|
return {
|
|
label:item.projectName,
|
|
value:item.projectId
|
|
}
|
|
})
|
|
this.pickProjectOptions.unshift({
|
|
label:"全部",
|
|
value:""
|
|
})
|
|
}
|
|
})
|
|
},
|
|
/*上拉加载的回调*/
|
|
upCallback(page) {
|
|
// this.mescroll.endErr();
|
|
// return;
|
|
// console.log(page,"page");
|
|
let pageNum = page.num; // 页码, 默认从1开始
|
|
let pageSize = page.size; // 页长, 默认每页10条
|
|
let obj = {
|
|
pageSize:pageSize,
|
|
pageNum:pageNum,
|
|
projectId:this.projectIdVal,
|
|
deviceState:this.screeningValue,
|
|
deviceName:this.searchValue,
|
|
deviceTypes:"GATEWAY_CONTROLLER"
|
|
}
|
|
this.$get("/app/device/table",obj).then((res)=>{
|
|
console.log(res,"ressssssssssss");
|
|
if (res.rows && res.rows.length>0) {
|
|
// 接口返回的当前页数据列表 (数组)
|
|
let curPageData = res.rows;
|
|
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
let curPageLen = curPageData.length;
|
|
//设置列表数据
|
|
if(pageNum == 1) this.deviceList = []; //如果是第一页需手动置空列表
|
|
this.deviceList = this.deviceList.concat(curPageData); //追加新数据
|
|
this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
|
// this.mescroll.endByPage(curPageLen, res.data.total)
|
|
// this.mescroll.endSuccess(curPageData.length);
|
|
} else{
|
|
this.deviceList = [];
|
|
this.mescroll.endErr();
|
|
this.mescroll.showEmpty();
|
|
// this.mescroll.endUpScroll(true);
|
|
}
|
|
}).catch(()=>{
|
|
//联网失败, 结束加载
|
|
this.mescroll.endErr();
|
|
this.mescroll.showEmpty();
|
|
}).finally(()=>{
|
|
this.dropdownIsOpen = false;
|
|
})
|
|
},
|
|
// 跳转设备详情
|
|
goElectricityDetailFn(item){
|
|
uni.navigateTo({
|
|
url:`./electricityDetail?deviceId=${item.deviceId}`
|
|
})
|
|
},
|
|
|
|
onOpenFn(e){
|
|
this.dropdownIsOpen = true;
|
|
},
|
|
onCloseFn(){
|
|
this.dropdownIsOpen = false;
|
|
},
|
|
pickProjectOnChangeFn(e){
|
|
this.dropdownIsOpen = true;
|
|
this.mescroll.resetUpScroll()
|
|
},
|
|
screeningOnChangeFn(e){
|
|
this.dropdownIsOpen = true;
|
|
this.mescroll.resetUpScroll()
|
|
},
|
|
// 跳转线路列表
|
|
goLineRoadListFn(){
|
|
uni.navigateTo({
|
|
url:"./lineRoadList"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|