|
@@ -1,228 +1,257 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar
|
|
|
- :title="title"
|
|
|
- title-color="#fff"
|
|
|
- :is-back="true"
|
|
|
- :custom-back="customBack"
|
|
|
- :border-bottom="false"
|
|
|
- back-icon-color="#CCE8FF"
|
|
|
- :background="{background: '#4D68DC' }"></u-navbar>
|
|
|
- <u-tabs :list="tabList" :is-scroll="false" height="108" bar-width="100" :current="tabCurrent" @change="tabChange"></u-tabs>
|
|
|
- <!-- <u-gap height="20" bg-color="#F6F6F6"></u-gap> -->
|
|
|
- <mescroll-uni ref="mescrollRef01" @init="mescrollInit" :top="config.platform=='h5'?220:300" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
|
|
|
- <view class="device-list u-flex u-flex-wrap u-row-start">
|
|
|
- <view class="device-list-item u-m-b-24" v-for="item in dataList" :key="item.id"
|
|
|
- @click="openPage('pages/maintenanceCenter/maintenanceDetails/maintenanceDetails',item.id)">
|
|
|
- <view class="top u-flex u-flex-wrap u-row-between">
|
|
|
- <view class="space-name">{{item.spaceName}}</view>
|
|
|
- <view class="signal">
|
|
|
- <text :class="{'low':item.deviceSignal<lowSignal}">{{item.deviceSignal}}</text>
|
|
|
- <image v-if="item.deviceSignal<lowSignal" class="img" src="../../../static/img/signal-r.png" mode="heightFix"></image>
|
|
|
- <image v-else class="img" src="../../../static/img/signal-g.png" mode="heightFix"></image>
|
|
|
- <image v-if="item.deviceBattery<lowBattery" class="img" src="../../../static/img/electricity-r.png" mode="heightFix"></image>
|
|
|
- <image v-else class="img" src="../../../static/img/electricity-g.png" mode="heightFix"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="vehicleNo">{{item.vehicleNo}}</view>
|
|
|
- <image v-if="item.placeStatus!= 1" class="carImg" src="../../../static/img/qiche-g.png" mode="heightFix"></image>
|
|
|
- <image v-else class="carImg" src="../../../static/img/qiche.png" mode="heightFix"></image>
|
|
|
- <view class="parkingTime">{{item.parkingTime}}</view>
|
|
|
- <view class="deviceNo">{{item.deviceNo}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </mescroll-uni>
|
|
|
+ <u-navbar
|
|
|
+ :title="title"
|
|
|
+ title-color="#fff"
|
|
|
+ :is-back="true"
|
|
|
+ :custom-back="customBack"
|
|
|
+ :border-bottom="false"
|
|
|
+ back-icon-color="#CCE8FF"
|
|
|
+ :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
|
|
|
+ <u-tabs :list="tabList" :is-scroll="false" height="108" bar-width="100" :current="tabCurrent" @change="tabChange"></u-tabs>
|
|
|
+ <!-- <u-gap height="20" bg-color="#F6F6F6"></u-gap> -->
|
|
|
+ <mescroll-uni ref="mescrollRef01" @init="mescrollInit" :top="config.platform=='h5'?220:300" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
|
|
|
+ <view class="device-list u-flex u-flex-wrap u-row-start">
|
|
|
+ <view class="device-list-item u-m-b-24" v-for="item in dataList" :key="item.id"
|
|
|
+ @click="goDetails(item.id)">
|
|
|
+ <view class="top u-flex u-flex-wrap u-row-between">
|
|
|
+ <view class="space-name">{{item.spaceName}}</view>
|
|
|
+ <view class="signal">
|
|
|
+ <text>{{item.deviceStatus|device2Status}}</text>
|
|
|
+ <image v-if="item.deviceBattery<lowBattery" class="img" src="../../../static/img/electricity-r.png" mode="heightFix"></image>
|
|
|
+ <image v-else class="img" src="../../../static/img/electricity-g.png" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="vehicleNo">{{item.vehicleNo}}</view>
|
|
|
+ <image v-if="item.placeStatus!= 1" class="carImg" src="../../../static/img/qiche-g.png" mode="heightFix"></image>
|
|
|
+ <image v-else class="carImg" src="../../../static/img/qiche.png" mode="heightFix"></image>
|
|
|
+ <view class="parkingTime">{{item.parkingTime}}</view>
|
|
|
+ <view class="deviceNo">{{item.deviceNo}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </mescroll-uni>
|
|
|
+ <u-select v-model="deviceStatusSelect" :list="deviceStatusList" @confirm="deviceStatusSelectConfirm"></u-select>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script>
|
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
- export default{
|
|
|
- mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
|
|
|
- components:{
|
|
|
-
|
|
|
+ export default{
|
|
|
+ mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
|
|
|
+ components:{
|
|
|
+
|
|
|
},
|
|
|
data(){
|
|
|
- return{
|
|
|
- roadName:'',
|
|
|
+ return{
|
|
|
+ roadName:'',
|
|
|
roadNo:'',
|
|
|
- title:"设备列表",
|
|
|
- tabCurrent:0,
|
|
|
- breakStatus:'',
|
|
|
- tabList:[
|
|
|
- {name:'全部',status:''},
|
|
|
- {name:'异常',status:'0'},
|
|
|
- {name:'低电量',status:'3200_b'},
|
|
|
- {name:'低信号',status:'-100_s'}
|
|
|
- ],
|
|
|
- downOption:{
|
|
|
- auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
|
|
- },
|
|
|
- upOption:{
|
|
|
- page: {
|
|
|
- size: 10 // 每页数据的数量
|
|
|
- },
|
|
|
- auto:true,
|
|
|
- // use:false,
|
|
|
- noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
|
|
- empty:{
|
|
|
- tip: '~ 暂无数据 ~', // 提示
|
|
|
- // btnText: '去看看'
|
|
|
- }
|
|
|
- },
|
|
|
- dataList:[],
|
|
|
- lowBattery:'',
|
|
|
- lowSignal:''
|
|
|
+ title:"设备列表",
|
|
|
+ tabCurrent:0,
|
|
|
+ breakStatus:'',
|
|
|
+ tabList:[
|
|
|
+ {name:'全部',status:''},
{name:'挡板状态',status:'0'},
{name:'低电量',status:'3200_b'},
{name:'低信号',status:'-100_s'}
|
|
|
+ ],
|
|
|
+ deviceStatusSelect:false,
|
|
|
+ deviceStatusList:[
|
|
|
+ {value:'0',label:'降板'},
|
|
|
+ {value:'1',label:'升板'},
|
|
|
+ {value:'2',label:'心跳'},
|
|
|
+ {value:'5',label:'车辆入位'},
|
|
|
+ {value:'6',label:'车辆出位'},
|
|
|
+ {value:'7',label:'复位'},
|
|
|
+ {value:'8',label:'逃费'},
|
|
|
+ {value:'10',label:'状态上报'},
|
|
|
+ ],
|
|
|
+ deviceStatus:'',
|
|
|
+ downOption:{
|
|
|
+ auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
|
|
+ },
|
|
|
+ upOption:{
|
|
|
+ page: {
|
|
|
+ size: 10 // 每页数据的数量
|
|
|
+ },
|
|
|
+ auto:true,
|
|
|
+ // use:false,
|
|
|
+ noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
|
|
+ empty:{
|
|
|
+ tip: '~ 暂无数据 ~', // 提示
|
|
|
+ // btnText: '去看看'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataList:[],
|
|
|
+ lowBattery:'',
|
|
|
+ lowSignal:''
|
|
|
|
|
|
}
|
|
|
},
|
|
|
onLoad(page){
|
|
|
- console.log('page',page);
|
|
|
- this.getGeoDeviceStatust()
|
|
|
- if(page.roadName){
|
|
|
- this.roadName = page.roadName;
|
|
|
- this.title = page.roadName;
|
|
|
- }
|
|
|
- if(page.roadNo){
|
|
|
- this.roadNo = page.roadNo
|
|
|
- }
|
|
|
- if(page.deviceType){
|
|
|
- this.deviceType = page.deviceType
|
|
|
+ console.log('page',page);
|
|
|
+ this.getGeoDeviceStatust()
|
|
|
+ if(page.roadName){
|
|
|
+ this.roadName = page.roadName;
|
|
|
+ this.title = page.roadName;
|
|
|
+ }
|
|
|
+ if(page.roadNo){
|
|
|
+ this.roadNo = page.roadNo
|
|
|
+ }
|
|
|
+ if(page.deviceType){
|
|
|
+ this.deviceType = page.deviceType
|
|
|
}
|
|
|
},
|
|
|
onShow(){
|
|
|
},
|
|
|
- methods:{
|
|
|
- customBack(){
|
|
|
- this.$u.route({
|
|
|
- url: '/pages/deviceList/deviceList',
|
|
|
- params:{
|
|
|
- param:this.deviceType
|
|
|
- }
|
|
|
- })
|
|
|
- // uni.reLaunch({
|
|
|
- // url: '/pages/deviceList/deviceList'
|
|
|
- // });
|
|
|
- },
|
|
|
- openPage(path,repairId) {
|
|
|
- this.$u.route({
|
|
|
- url: path,
|
|
|
- params:{
|
|
|
- repairId:repairId
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 切换菜单
|
|
|
- tabChange(index) {
|
|
|
- this.tabCurrent = index;
|
|
|
- this.breakStatus = this.tabList[index].status;
|
|
|
- this.refresh()
|
|
|
- },
|
|
|
- /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
|
- upCallback(page) {
|
|
|
- // console.log('page',page);
|
|
|
- let params ={
|
|
|
- roadNo:this.roadNo,
|
|
|
- deviceType:this.deviceType,//设备类型: 1-地磁 2-车位锁
|
|
|
- breakStatus:this.breakStatus,//设备状态:低电量 (3200_b )、 低信号( -100_s)、有故障(0)
|
|
|
- pageNum:page.num,
|
|
|
- pageSize:page.size
|
|
|
- };
|
|
|
- this.$u.api.getSelectDeviceList(params).then(curPageData=>{
|
|
|
- // console.log('word',word);
|
|
|
- console.log('curPageData',curPageData);
|
|
|
- //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
|
|
- this.mescroll.endSuccess(curPageData.data.total);
|
|
|
- this.mescroll.endBySize(curPageData.data.rows.length, curPageData.data.total);
|
|
|
- //设置列表数据
|
|
|
- if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
|
|
- this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据
|
|
|
- console.log('this.dataList',this.dataList);
|
|
|
- }).catch(()=>{
|
|
|
- console.log('catch');
|
|
|
- //联网失败, 结束加载
|
|
|
- this.mescroll.endErr();
|
|
|
- })
|
|
|
- },
|
|
|
- //点击空布局按钮的回调
|
|
|
- emptyClick(){
|
|
|
- uni.showToast({
|
|
|
- title:'点击了按钮,具体逻辑自行实现'
|
|
|
- })
|
|
|
- },
|
|
|
- refresh(){
|
|
|
- this.mescroll.resetUpScroll( );
|
|
|
- },
|
|
|
- getGeoDeviceStatust(){
|
|
|
- this.$u.api.geoDeviceStatust().then(res=>{
|
|
|
- let that = this;
|
|
|
- res.data.data.forEach(function(item){
|
|
|
- if(item.dictLabel=='低电量'){that.lowBattery = Number( item.dictValue.split('_')[0] )}
|
|
|
- if(item.dictLabel=='低信号'){that.lowSignal = Number( item.dictValue.split('_')[0] )}
|
|
|
- });
|
|
|
- console.log('this.lowBattery',this.lowBattery);
|
|
|
- }).catch(()=>{
|
|
|
- console.log('catch');
|
|
|
- //联网失败, 结束加载
|
|
|
- this.mescroll.endErr();
|
|
|
- })
|
|
|
+ methods:{
|
|
|
+ customBack(){
|
|
|
+ this.$u.route({
|
|
|
+ url: '/pages/deviceList/deviceList',
|
|
|
+ params:{
|
|
|
+ param:this.deviceType
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: '/pages/deviceList/deviceList'
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ openPage(path,id) {
|
|
|
+ this.$u.route({
|
|
|
+ url: path,
|
|
|
+ params:{
|
|
|
+ id:id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDetails(id){
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/deviceList/deviceListType2/deviceInfo',
|
|
|
+ params:{
|
|
|
+ id:id,
|
|
|
+ roadNo:this.roadNo,
|
|
|
+ roadName:this.roadName,
|
|
|
+ deviceType:this.deviceType,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换菜单
|
|
|
+ tabChange(index) {
|
|
|
+ this.tabCurrent = index;
|
|
|
+ this.deviceStatus = '';
|
|
|
+ this.tabList[1].name = '挡板状态';
|
|
|
+ if(index==1){this.deviceStatusSelect = true;return};
|
|
|
+ this.breakStatus = this.tabList[index].status;
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
|
+ upCallback(page) {
|
|
|
+ // console.log('page',page);
|
|
|
+ let params ={
|
|
|
+ roadNo:this.roadNo,
|
|
|
+ deviceType:this.deviceType,//设备类型: 1-地磁 2-车位锁
|
|
|
+ breakStatus:this.breakStatus,//设备状态:低电量 (3200_b )、 低信号( -100_s)、有故障(0)
|
|
|
+ deviceStatus:this.deviceStatus,
|
|
|
+ pageNum:page.num,
|
|
|
+ pageSize:page.size
|
|
|
+ };
|
|
|
+ this.$u.api.getSelectDeviceList(params).then(curPageData=>{
|
|
|
+ // console.log('word',word);
|
|
|
+ console.log('curPageData',curPageData);
|
|
|
+ //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
|
|
+ this.mescroll.endSuccess(curPageData.data.total);
|
|
|
+ this.mescroll.endBySize(curPageData.data.rows.length, curPageData.data.total);
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
|
|
+ this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据
|
|
|
+ console.log('this.dataList',this.dataList);
|
|
|
+ }).catch(()=>{
|
|
|
+ console.log('catch');
|
|
|
+ //联网失败, 结束加载
|
|
|
+ this.mescroll.endErr();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //点击空布局按钮的回调
|
|
|
+ emptyClick(){
|
|
|
+ uni.showToast({
|
|
|
+ title:'点击了按钮,具体逻辑自行实现'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ refresh(){
|
|
|
+ this.mescroll.resetUpScroll( );
|
|
|
+ },
|
|
|
+ getGeoDeviceStatust(){
|
|
|
+ this.$u.api.geoDeviceStatust().then(res=>{
|
|
|
+ let that = this;
|
|
|
+ res.data.data.forEach(function(item){
|
|
|
+ if(item.dictLabel=='低电量'){that.lowBattery = Number( item.dictValue.split('_')[0] )}
|
|
|
+ if(item.dictLabel=='低信号'){that.lowSignal = Number( item.dictValue.split('_')[0] )}
|
|
|
+ });
|
|
|
+ console.log('this.lowBattery',this.lowBattery);
|
|
|
+ }).catch(()=>{
|
|
|
+ console.log('catch');
|
|
|
+ //联网失败, 结束加载
|
|
|
+ this.mescroll.endErr();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deviceStatusSelectConfirm(e){
|
|
|
+ this.deviceStatus =e[0].value;
|
|
|
+ this.tabList[1].name = e[0].label;
|
|
|
+ this.breakStatus = '';
|
|
|
+ this.refresh();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-page{background-color: #F3F3F3;}
|
|
|
-.device-list{
|
|
|
- margin: 24rpx 0;
|
|
|
- .device-list-item{
|
|
|
- background-color: #fff;
|
|
|
- width: 45%;
|
|
|
- margin: 0 0 24rpx 3.3%;
|
|
|
- padding: 15rpx;
|
|
|
- border-radius: 13rpx;
|
|
|
- .top{
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .space-name{
|
|
|
- color: #5B5B5B;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- .signal{
|
|
|
- font-size: 26rpx;
|
|
|
- color: #5B5B5B;
|
|
|
- .img{
|
|
|
- display: inline-block;
|
|
|
- height: 26rpx;
|
|
|
- margin-left: 7rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .low{color: #f00;}
|
|
|
- }
|
|
|
- .vehicleNo{
|
|
|
- height: 42rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #212121;
|
|
|
- line-height: 42rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .carImg{
|
|
|
- height: 118rpx;
|
|
|
- display: block;
|
|
|
- margin: 16rpx auto 18rpx;
|
|
|
- }
|
|
|
- .parkingTime{
|
|
|
- height: 37rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #5B5B5B;
|
|
|
- line-height: 37rpx;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .deviceNo{text-align: center;}
|
|
|
- }
|
|
|
-
|
|
|
+<style lang="scss" scoped>
|
|
|
+page{background-color: #F3F3F3;}
|
|
|
+.device-list{
|
|
|
+ margin: 24rpx 0;
|
|
|
+ .device-list-item{
|
|
|
+ background-color: #fff;
|
|
|
+ width: 45%;
|
|
|
+ margin: 0 0 24rpx 3.3%;
|
|
|
+ padding: 15rpx;
|
|
|
+ border-radius: 13rpx;
|
|
|
+ .top{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .space-name{
|
|
|
+ color: #5B5B5B;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .signal{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #5B5B5B;
|
|
|
+ .img{
|
|
|
+ display: inline-block;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-left: 7rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .low{color: #f00;}
|
|
|
+ }
|
|
|
+ .vehicleNo{
|
|
|
+ height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #212121;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .carImg{
|
|
|
+ height: 118rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 16rpx auto 18rpx;
|
|
|
+ }
|
|
|
+ .parkingTime{
|
|
|
+ height: 37rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5B5B5B;
|
|
|
+ line-height: 37rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .deviceNo{text-align: center;}
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|