|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <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> -->
|
|
|
+ <view class="base-info">
|
|
|
+ <view class="park-num u-flex">
|
|
|
+ 停车情况:
|
|
|
+ <text>已停{{parkNum.total-parkNum.remaeNum}}个;</text>
|
|
|
+ <text>空余{{parkNum.remaeNum}}个</text>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-between">
|
|
|
+ <text @click="goDeviceList">道闸列表</text>
|
|
|
+ <!-- <text>异常上报</text> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <mescroll-uni ref="mescrollRef01" @init="mescrollInit" :top="config.platform=='h5'?250:350" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
|
|
|
+ <view class="device-list u-flex u-flex-wrap u-row-start" v-if="dataList.length>1">
|
|
|
+ <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-text-center">
|
|
|
+ <view class="space-name">
|
|
|
+ <text>{{item.vehicleNo}}</text>
|
|
|
+ <image v-if="item.vehicleNoStatus" class="arrearage-img" src="../../static/img/arrearage.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="signal">
|
|
|
+ <text>{{item.roadwayName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="carImg" :src="item.inImage||'../../static/img/daozha-y.png'" mode="heightFix"></image>
|
|
|
+ <view class="time">入场：{{item.inTime}}</view>
|
|
|
+ <view class="time">时长：{{item.parkingTime}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="empty">
|
|
|
+ <image src="../../static/img/empty.png" mode="widthFix"></image>
|
|
|
+ <view class="text">该停车场还没有车辆!</view>
|
|
|
+ </view>
|
|
|
+ </mescroll-uni>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ export default{
|
|
|
+ mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ roadName:'',
|
|
|
+ roadNo:'',
|
|
|
+ title:"停车场",
|
|
|
+ downOption:{
|
|
|
+ auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
|
|
+ },
|
|
|
+ upOption:{
|
|
|
+ page: {
|
|
|
+ size: 10 // 每页数据的数量
|
|
|
+ },
|
|
|
+ auto:true,
|
|
|
+ // use:false,
|
|
|
+ noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
|
|
+ empty:{
|
|
|
+ tip: '~ 暂无数据 ~', // 提示
|
|
|
+ // btnText: '去看看'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataList:[],
|
|
|
+ parkNum:{
|
|
|
+ remaeNum:null,
|
|
|
+ total:null
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page){
|
|
|
+ console.log('page',page);
|
|
|
+ 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(){
|
|
|
+ this.selectParkNum();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ customBack(){
|
|
|
+ this.$u.route({
|
|
|
+ url: '/pages/deviceList/deviceList',
|
|
|
+ type:'redirect',
|
|
|
+ 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/deviceListType3/deviceInfo',
|
|
|
+ params:{
|
|
|
+ id:id,
|
|
|
+ roadNo:this.roadNo,
|
|
|
+ roadName:this.roadName,
|
|
|
+ deviceType:this.deviceType,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDeviceList(){
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/deviceList/deviceListType3/deviceListType3',
|
|
|
+ params:{
|
|
|
+ roadNo:this.roadNo,
|
|
|
+ roadName:this.roadName,
|
|
|
+ deviceType:this.deviceType,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /*上拉加载的回调: 其中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.selectParkVehicleList(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( );
|
|
|
+ },
|
|
|
+ selectParkNum(){
|
|
|
+ this.$u.api.selectParkNum({roadNo:this.roadNo}).then(res=>{
|
|
|
+ console.log('selectParkNum',res);
|
|
|
+ this.parkNum = res.data;
|
|
|
+ }).catch(()=>{
|
|
|
+ console.log('catch');
|
|
|
+ //联网失败, 结束加载
|
|
|
+ this.mescroll.endErr();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page{background: #F3F3F3;}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.device-list{
|
|
|
+ margin: 24rpx 0;
|
|
|
+ .device-list-item{
|
|
|
+ background-color: #fff;
|
|
|
+ width: 45%;
|
|
|
+ margin: 0 0 24rpx 3.3%;
|
|
|
+ padding: 24rpx 15rpx;
|
|
|
+ border-radius: 13rpx;
|
|
|
+ .top{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .space-name{
|
|
|
+ color: #212121;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ .arrearage-img{
|
|
|
+ width: 35rpx;
|
|
|
+ height: 35rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 229rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 16rpx auto 18rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+ .parkingTime{
|
|
|
+ height: 37rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5B5B5B;
|
|
|
+ line-height: 37rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ text-align: center;
|
|
|
+ color: #6a6a6a;
|
|
|
+ font-size: 14rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.base-info{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx;
|
|
|
+ .park-num{
|
|
|
+ text{color: #767676;margin-left: 8rpx;}
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.empty{
|
|
|
+ padding-top: 20vh;
|
|
|
+ text-align: center;
|
|
|
+ image{
|
|
|
+ width: 344rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-top: 60rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
