jp-youdian-Inspection/pages/station/stationInfo.vue

<template>
	<view>
		
		<u-navbar title="场站主页" ></u-navbar>
			
			<view class="gradient-header">
				<view class="jpback">
			
				</view>
			</view>
			
		<view class="panel main1_panel">
			
			
			<view class="name">
				<view class="p1">
					{{info.name}}
				
				</view>
				<view class="p2">
					地址：{{info.address}}
				
				</view>
			</view>
			<view class="body" v-if="info.category!='电单车'">
				<view class="span">
					<image class="img" src="@/assets/img/station/item2.svg" mode=""></image>
					在用
					<span>{{info.gunWorkNum}}</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item3.svg" mode=""></image>
					空闲
					<span>{{info.gunFreeNum}}</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item1.svg" mode=""></image>
					故障
					<span>{{info.gunFaultNum}}</span>
				</view>
				<view class="span">
					<image class="img" src="@/assets/img/station/item4.svg" mode=""></image>
					离线
					<span>{{info.gunOfflineNum}}</span>
				</view>
			</view>
		</view>
		<view class="panel main2_panel">
			<view class="p1"  @click="gotoUrl('/pages/inspection/add?back=1&stationId='+id)" >
				<view class="na-img">
					<image class="img" src="@/assets/img/station/index2.svg" mode=""></image>
				</view>
				<view class="na-text ">
					设备巡检
				</view>
			</view>
			<view class="p2">
				
			</view>
			<view class="p1" @click="gotoUrl('/pages/task/addTask?stationName='+info.name+'&stationId='+id)">
				<view class="na-img">
					<image class="img" src="@/assets/img/station/index1.svg" mode=""></image>
				</view>
				<view class="na-text ">
					故障上报
				</view>
			</view>
		</view>
		<view class="panel main3_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>故障提醒</view>
			
					<view class="check-all"  @click="gotoUrl('/pages/task/listTask')"  >查看全部<u-icon name="arrow-right"></u-icon></view>
			
				</view>
			
			</view>
			<view class="body">
				<view class="line" v-for="(item,index) in errList"
				 @click="gotoUrl('/pages/task/maintenanceTaks?id='+item.id)"
				 :key="index">
					<view class="p1">
						<view class="name">
							{{item.errorCodeText}}

						</view>
						<view class="time" v-if="item.status==0">
							上报时间：{{item.errorReportTime}}

						</view>
						<view class="time" v-if="item.status==1">
							处理时间：{{item.repairTime}}
						
						</view>
					</view>
					<view class="p2">
						<view class="tag " :class="'tag'+item.status">
							{{item.statusN}}
						</view>
						<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
						
					</view>
				</view>
				<u-divider :isnone="errList.length==0"  v-if="errListTotal==0|errListTotal>5"
				 nonetext="没有找到相关内容" border-color="#CFD2D5">{{errListTotal>5?'最多显示5条':'已经到底了'}}</u-divider>
				
				 
			</view>
		</view>
		<view class="panel main4_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>巡检记录</view>
			
					<view class="check-all" @click="gotoUrl('/pages/inspection/list')"  >查看全部<u-icon name="arrow-right"></u-icon></view>
			
				</view>
			
			</view>
			
			<view class="body">
				<view class="line"  v-for="(item,index) in recordList" 
				@click="gotoUrl('/pages/inspection/info?id='+item.id)"
				:key="index" >
					<view class="p1">
						巡检
						
					</view>
					<view class="p2">
						{{item.inspectionUserName}}

						
					</view>
					<view class="p3">
						{{lastChargeTime(item.inspectionTime)}}
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
				<u-divider :isnone="recordList.length==0"  v-if="recordListTotal==0|recordListTotal>5"
				 nonetext="没有找到相关内容" border-color="#CFD2D5">{{recordListTotal>5?'最多显示5条':'已经到底了'}}</u-divider>
				
				
			</view>
			
			
			
		</view>
		<view class="panel main5_panel">
			<view class="title">
				<view class="icon">
					<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
				</view>
				<view class="text">
					<view>设备信息</view>
			
					<view class="check-all " v-if="false" >查看全部<u-icon name="arrow-right"></u-icon></view>
					<template v-if="gunList.length>5">
						
						<view class="pack-up check-all" v-show="listShow" @click="listShow=false">
							展开<u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
						</view>
						<view class="pack-up check-all" v-if="!listShow" @click="listShow=true">
							收起<u-icon name="arrow-up" size="32" color="#AAAAAA"></u-icon>
						</view>
					</template>
				</view>
			
			</view>
				<u-alert-tips type="warning" v-if="showalerttips" :description="showalerttipsdescription"></u-alert-tips>

			<view class="body">
				<view class="line lineT">
					<view class="p1">
						设备名称
					</view>
					<view class="p2">
						设备型号

					</view>
					<view class="p3">
						最后充电时间

					</view>
					<u-icon name="arrow-right" color="#FFF" ></u-icon>
					
				</view>
				<view class="line" v-for="(item,index) in gunList"
				@click="gotoUrl('/pages/station/stationGun?gunNo='+item.gunNo)"
				v-show="index<5||listShow"
				 :key="index">
					<view class="p1">
						充电枪

						
					</view>
					<view class="p2">
						{{item.gunNo}}

			
						
					</view>
					<view class="p3" :class="{
						red:daysDistanceDay(item.lastChargeTime)
					}">
						{{lastChargeTime(item.lastChargeTime)}}
					</view>
					
					<u-icon name="arrow-right" color="#D4D4D4" ></u-icon>
					
				</view>
				
				<u-divider :isnone="gunList.length==0"  v-if="gunList.length==0"
				 nonetext="没有找到相关内容" border-color="#CFD2D5"></u-divider>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesStation.js'
	import {
		
			newDate,daysDistance
		} from '@/apis/utils'
	export default {
		data() {
			return {
				id:"",
				info:{},
				gunList:[],
				recordList:[],
				recordListTotal:0,
				errList:[],
				errListTotal:0,
				listShow:false,
				showalerttips:false,
				showalerttipsdescription:"",
				showalerttipsNum:10,
				
			};
		},
		onLoad(op) {
			
			this.id = op.id
			
		},
		onShow() {
			this.details()
			this.geterrList()
			this.getrecordList()
		},
		methods: {
			daysDistanceDay(time){
				
				return daysDistance(time,new Date())>this.showalerttipsNum
			},
			getrecordList(){
				
				API.recordList({
					pageIndex:1,
					pageSize:5,
					stationId:this.id,
					status:1
				}).then((response) => {
					this.recordList=response.data.data
					this.recordListTotal=response.data.recordsTotal
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				
				})
			},
			geterrList(){
				
				API.errList({
					pageIndex:1,
					pageSize:5,
					stationId:this.id
				}).then((response) => {
					this.errList=response.data.data
					this.errListTotal=response.data.recordsTotal
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				
				})
			},
			lastChargeTime(time){
				if(time){
					return time.split(" ")[0]
				}else{
					return ''
				}
			},
			details() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				API.stationDetails({
					stationId: this.id
				}).then((res) => {
					this.info = res.data.station
					this.gunList=res.data.gunList
					this.gunList.forEach(item=>{
						if(this.daysDistanceDay(item.lastChargeTime)){
							this.showalerttips=true;
							this.listShow=true
							this.showalerttipsdescription=`存在超过${this.showalerttipsNum}天未充电的充电枪`
						}
					})
					uni.hideLoading();
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
		
		
		
	}
</script>

<style lang="scss">
	.gradient-header {
		height: 0px;
	}
	
	.jpback {
		height: 400rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
	}
	
	.panel{
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 2rpx 12rpx 0px rgba(0, 59, 142, 0.05);
		margin: 24rpx 32rpx;
		padding: 40rpx;
		
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			font-weight: bold;
		
			.img {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
				border-radius: 999px;
		
			}
		
			.change {
				display: flex;
				align-items: center;
		
				.change-img {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
		
				text {
		
					margin-left: 8rpx;
				}
			}
		
		
			.text {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				margin-left: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
		
				.tag {
					border-radius: 8rpx;
					border: 2rpx solid rgba(187, 187, 187, 1);
					color: rgba(51, 51, 51, 1);
		
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-left: 8rpx;
				}
		
			}
		
			.change {
				margin-left: 16rpx;
				font-size: 24rpx;
				color: #838383;
		
			}
		
			.check-all {
				margin-left: auto;
				color: rgba(131, 131, 131, 1);
				font-size: 24rpx;
			}
		}
	}
	
	.main1_panel{
		padding: 40rpx 0;
		.name{
			padding:   0 40rpx 24rpx 40rpx;
			border-bottom: 2rpx solid #F5F5F5 ;
			.p1{
				color: rgba(51,51,51,1);
				font-size: 36rpx;
				font-weight: bold;
			}
			.p2{
				color: rgba(51,51,51,1);
				font-size: 28rpx;
			}
		}
		.body{
			padding:   26rpx 40rpx 0 40rpx;
			    display: flex;
			    justify-content: space-between;
			.img{
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;

			}
			.span{
				    display: flex;
				    align-items: center;
					span{
						margin-left: 8rpx;
					}
			}
		}
	}
	.main2_panel{
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0 20rpx 0;
		
		.p2 {
			border-left: 2rpx solid rgba(187, 187, 187, 0.43);
			height: 70rpx;
		}
		
		.p1 {
			width: 48%;
			text-align: center;
		
			.na-img {
				display: flex;
				justify-content: center;
				margin-bottom: 8rpx;
				.img {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}
	.main3_panel{
		.body{
			.line{
				//border-bottom:2rpx solid rgba(232,232,232,1);
				
				padding: 12rpx 0;
				    display: flex;
				    justify-content: space-between;
				.p1{
					.name{
						    font-weight: 600;
						color: rgba(51,51,51,1);
						font-size: 28rpx;
					}
					.time{
						color: rgba(119,119,119,1);
						font-size: 24rpx;
					}
				}
				.p2{
					    display: flex;
					    align-items: center;
					
				}
			}
			.line:not(:first-child){
				//background-color: red;
			  border-top:1px solid rgba(232,232,232,1);
			}
			
			
			.tag{
				background-color: rgba(255,255,255,1);
				color: rgba(255,61,0,1);
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
				padding: 0 4rpx;
				border-radius: 8rpx;
				border: 2rpx solid rgba(255,61,0,1);
				display: flex;
			}
			.tag0{
				color: rgba(255,61,0,1);
				
				border: 2rpx solid rgba(255,61,0,1);
			}
			.tag1{
				color: #00B962;
				
				border: 2rpx solid  #00B962;
			}
		}
	}
	.main4_panel,.main5_panel{
		.body{
			.line{
				padding: 18rpx 0;
				    display: flex;
				    justify-content: space-between;
				}
				.p1{
					    font-weight: 600;
					color: rgba(51,51,51,1);
					font-size: 28rpx;
				}
				.p2{
					width: 300rpx;
					overflow: hidden;
					   text-overflow: ellipsis;
					   white-space: nowrap; 
				}
				.line:not(:first-child) {
				  border-top:2rpx solid rgba(232,232,232,1);
				}
		}
	}
	.main5_panel{
		.p1{
			width: 140rpx;
			   
		}
		.p2{
			width: 270rpx !important;
			
		}
		.p3{
			width: 180rpx !important;
			
		}
		.lineT{
			font-weight: bold;
		}
		.red{
			color: red;
		}
	}
</style>