JP-Equipment-Jingli/pages/otherFunctions/equipmentRetrieval/equipmentInfo.vue

<template>
	<view>
		<u-navbar :title="info.title"></u-navbar>
		<!-- 图片 -->
		<view class="picture">
			<img :src="info.imgUrl" alt="">
			<view class="amount" v-if="false">
				<text>1</text>/
				<text>5</text>
			</view>
		</view>
		<!-- 信息 -->
		<view class="main">
			<view class="title">
				{{info.title}}
				<span style="float: right;">{{info.code}}</span>
			</view>
			<!-- 标签 -->
			<view class="tabs " v-if="false">
				<u-tabs bar-width="120" inactive-color="#999999" active-color="#000000"   :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="content">
				<!-- 提示 -->
				<view class="hint" v-if="description">
					<u-alert-tips  icon="bell-fill"  :type="info.healthStatus==1?'success':info.healthStatus==6?'error':'warning'"
					 :show-icon="true" :title="title" :description="descriptionKey(info,true)"></u-alert-tips>
				</view>
				<!-- 设备信息 -->
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-robot-line@1x.png" alt=""></view>
					<view class="text">
						设备信息
					</view>
					</view>
					
					<view class="details">
						<view class="item">
							<view class="item-title">
								规格
							</view>
							<view class="item-value">
								{{info.specifications}}
							</view>
						</view>
						
						<view class="item">
							<view class="item-title">
								型号
							</view>
							<view class="item-value">
								{{info.model}}
							</view>
						</view>
						
						
						
						<view class="item" >
							<view class="item-title">
								单位
							</view>
							<view class="item-value">
								{{info.unit}}
							</view>
						</view>
						<view class="item" >
							<view class="item-title">
								制造厂家
							</view>
							<view class="item-value">
								{{info.manufactor}}
							</view>
						</view>
						
						<view class="item" style="width: 100%;" >
							<view class="item-title">
								购置时间
							</view>
							<view class="item-value">
								{{info.buyTime}}
							</view>
						</view>
						
						<view class="item"  style="width: 100%;" >
							<view class="item-title">
								上次巡检
							</view>
							<view class="item-value">
								{{info.experimentLastTime}}
							</view>
						</view>
						
						<view class="item" >
							<view class="item-title">
								巡检周期
							</view>
							<view class="item-value">
								{{info.experimentPeriod?info.experimentPeriod+'天':''}}
							</view>
						</view>
					<!-- 	<view class="item" >
							<view class="item-title">
								单价
							</view>
							<view class="item-value">
								{{info.unitPrice?info.unitPrice+'元':'无'}}
							</view>
						</view> -->
					</view>
					
				</view>
			</view>
			<!-- 存放地点 -->
			<view class="content">
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-robot-line@1x.png" alt=""></view>
					<view class="text">
						存放地点
					</view>
					</view>
					
					<view class="details">
						<view class="location">
							{{info.addressId?info.addressId:'未录入'}}
						</view>
					</view>
					
				</view>
			</view>
			<!-- 巡检记录 -->
			<view class="content">
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-device-recover-line@1x.png" alt=""></view>
					<view class="text">
						巡检记录
					</view>
					
					<view class="all" v-if="inspectionRecordDeviceList.length>3" 
					@click="inspectionRecordDeviceListShow=!inspectionRecordDeviceListShow"
				
					>
						{{inspectionRecordDeviceListShow?'收起':'展开'}}
						<u-icon :name="inspectionRecordDeviceListShow?'arrow-up':'arrow-down'"></u-icon>
					</view>
					</view>
					
					
					<view class="inspection-contents" v-for="(item,index) in inspectionRecordDeviceList" 
					 v-show="index<3||inspectionRecordDeviceListShow"
					 
					 :key="index" >
						<view class="inspection-title">
							<!-- <view class="text">
								巡检内容名称
							</view> -->
							<view v-if="item.status=='1'" class="state">
								合格
							</view>
							<view v-else class="state2">
								不合格
							</view>
						</view>
						<view class="inspection-infos">
							<view class="inspection-personnel">
								<view class="inspection-name">
									巡检人：
								</view>
								<view class="value">
									{{item.inspectionUserName}}
								</view>
							</view>
							<view class="inspection-date">
								{{item.createTime}}
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			<!-- 出入库记录 -->
			<view class="content"  >
				<view class="infos">
					<view class="name">
					<view class="icon"><img src="@/assets/img/riLine-todo-line@1x.png" alt=""></view>
					<view class="text">
						出入库记录
					</view>
					<view class="all" v-if="outRecordList.length>3"
					@click="outRecordListShow=!outRecordListShow"
									
					>
						{{outRecordListShow?'收起':'展开'}}
						<u-icon :name="outRecordListShow?'arrow-up':'arrow-down'"></u-icon>
					</view>
					</view>
					<view class="records" v-for="(item,index) in outRecordList"
					 v-show="index<3||outRecordListShow"
					 
					 :key="index">
						<view class="records-title">
							{{item.projectName}}
						</view>
						<view class="records-infos">
							<!-- <view class="item">
								<view class="item-title">
									借用数量：
								</view>
								<view class="item-value">
									4
								</view>
							</view> -->
							<view class="item"  style="width: 100%;" >
								<view class="item-title">
									借出时间：
								</view>
								<view class="item-value">
									{{item.recordTime}}
								</view>
							</view>
							<view class="item" style="width: 100%;" >
								<view class="item-title">
									借用人：
								</view>
								<view class="item-value">
									{{item.userName}}
								</view>
							</view>
							<view class="item" v-if="false">
								<view class="item-title">
									归还时间：
								</view>
								<view class="item-value highlight">
									未归还
								</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	
	export default {
		data() {
			return {
				info:{},
				inspectionRecordDeviceListShow:false,
				inspectionRecordDeviceList:[],
				outRecordListShow:false,
				outRecordList:[],
				//description: '下次巡检时间：2023/03/30',
				list: [{
					name: '设备信息'
				}, {
					name: '设备位置'
				}
				// , {
				// 	name: '巡检记录',
				// },{
				// 	name:'出入库记录'
				// },
				
				],
				id:"",
				current: 0,
				title:""
			}
		},
		computed:{
			description(){
				var key=''
				if(this.info.experimentPeriod&&this.info.experimentLastTime){
					
					key='1'
					//'下次巡检时间'+	parseUnixTime(afterTimeStamp(this.info.experimentPeriod,newDate(this.info.experimentLastTime)),'{y}-{m}-{d}')
				}
				return key
			}
		},
		methods: {
			onLoad(op){
			
				console.log(op)
				if(op.q){					
					this.getCode(this.takeCodeJp(decodeURIComponent(op.q)))
				}else{
					this.id=op.id
					this.getInfo()
				}
				
			},
			getCode(val) {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.queryDeviceByCode({
					code: val,
				}).then((res) => {
					uni.hideLoading();
					var info =res.data.deviceInfo
					this.id=info.id
					this.getInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceDetails({
					
					id:this.id
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data.deviceInfo;
					this.inspectionRecordDeviceList=res.data.inspectionRecordDeviceList
					this.outRecordList=res.data.outRecordList
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom:100px;
	}
	/deep/.u-line-1{
		overflow: inherit;	
	}
	// 图片
	.picture{
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.amount{
			width: 108rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			text-align: center;
			font-family: Arial;
			position: absolute;
			bottom: 48rpx;
			right: 32rpx;
		}
	}
  // 信息
  .main{
	  border-radius: 16px 16px 0px 0px;
	  background-color: #ffffff;
	  padding-top: 24rpx;
	  margin-top:-24rpx;
	//  z-index: 999;
	  position: relative;
	  .title{
		  color: rgba(51, 51, 51, 1);
		  font-size: 36rpx;
		  margin-bottom: 24rpx;
		  padding:0 32rpx;
	  }
	  // 标签
	  .tabs{
		  position: sticky;
		  top: 0;
		  z-index: 9999;
		  /deep/.u-tab-bar{
			  background-color: #2A8EFB !important;
			  bottom:-8rpx;
		  }
	  }
	
	  
	  .content{
		  
		  border-top: 1px solid #B7BDBF;
		  .infos{
			  padding: 32rpx;
		  }
		  .name{
			  font-size: 32rpx;
			  margin-bottom: 16rpx;
			  display: flex;
			  align-items: center;
			  color: rgba(51, 51, 51, 1);
			  .icon{
				  width: 32rpx;
				  height: 32rpx;
				  margin-right: 8rpx;
				  img{
					  width: 100%;
					  height: 100%;
				  }
			  }
			 .text{
				 line-height: 50rpx;
			 }
		  }
		  .all{
			  margin-left: auto;
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
		  // 提示
		  .hint{
			  /deep/.u-alert-desc{
				 // color: rgba(255, 121, 0, 1);
				  font-size: 28rpx
			  }
		  }
		  .details{
			  border-radius: 8px;
			  background-color: rgba(245, 246, 249, 1);
			  padding: 24rpx 24rpx 8rpx 24rpx;
			  display: flex;
			  justify-content: space-between;
			  flex-wrap: wrap;
			  .item{
				  display: flex;
				  margin-bottom: 16rpx;
				  font-size: 24rpx;
				  width: 45%;
				  .item-title{
					  width: 96rpx;
					  color: rgba(119, 119, 119, 1);	  
				  }
				  @media screen and (max-width: 375px) {
				     .item-title{
				     	width: 120rpx;
				     					  
				     }
				  }
				  @media screen and (max-width: 300px) {
				     .item-title{
				     	width: 130rpx;
				     					  
				     }
				  }
				  .item-value{
					  flex: 1;
					  color: rgba(51, 51, 51, 1);
					  margin-left: 16rpx;
					  white-space: nowrap;
					  overflow: hidden;
					  text-overflow: ellipsis;
				  }
			  }
			  
			  .location{
				  color: rgba(51, 51, 51, 1);
				  padding-bottom: 8rpx;
			  }
		  }
	  }
	  
	  .inspection-contents{
		  border-radius: 8px;
		  background-color: rgba(245, 246, 249, 1);
		  padding: 24rpx ;
		  margin-top: 16rpx;
		  .inspection-title{
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  font-weight: bold;
			  color: rgba(51, 51, 51, 1);
			  .state{
				  width: 80rpx;
				  height: 48rpx;
				  line-height: 48rpx;
				  border-radius: 4px;
				  background-color: rgba(255, 255, 255, 1);
				  color: rgba(0, 185, 98, 1);
				  font-size: 24rpx;
				  text-align: center;
				  font-family: Microsoft Yahei;
				  border: 1px solid rgba(141, 217, 181, 1);
			  }
			  .state2{
			  				  width: 80rpx;
			  				  height: 48rpx;
			  				  line-height: 48rpx;
			  				  border-radius: 4px;
			  				  background-color: rgba(255, 255, 255, 1);
			  				  color: red;
			  				  font-size: 24rpx;
			  				  text-align: center;
			  				  font-family: Microsoft Yahei;
			  				  border: 1px solid red;
			  }
			  
		  }
		  .inspection-infos{
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  font-size: 24rpx;
			  margin-top: 8rpx;
			  line-height: 36rpx;
			  .inspection-personnel{
			  			  display: flex;
						  align-items: center;
			  			  color: rgba(119, 119, 119, 1);
			  			  
			  };
			  .date{
				  color: rgba(119, 119, 119, 1);
				  
			  }
		  }
		  
	  }
	  // 出入库记录
	  .records{
		  border-radius: 8px;
		  background-color: rgba(245, 246, 249, 1);
		  padding: 24rpx 24rpx 8rpx 24rpx ;
		  margin-top: 16rpx;
		  .records-title{
			  font-weight: bold;
			  color: #333333;
		  }
		  .records-infos{
			  display: flex;
			  flex-wrap: wrap;
			  margin-top: 16rpx;
			  .item{
				  font-size: 24rpx;
				  width: 300rpx;
				  display: flex;
				  margin-bottom: 16rpx;
				  color: rgba(119, 119, 119, 1);
			  }
		  }
	  }
  }
  .highlight{
	  color:#E60012
  }
</style>