FE-lab-xcx/pages_equipmentUtilization/views/equipmentInformation/infoPage.vue

<template>
	<view class="equipmentInformationInfoPage">
		<view class="info-max-box">
			<img class="left-img" src="">
			<view class="right-box">
				<view>设备分类：</view>
				<view>设备名称：</view>
				<view>设备编号：</view>
				<view>设备状态：</view>
			</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>类型</view>
			<view>类型</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>品牌</view>
			<view>品牌</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>设备原值(元)</view>
			<view>500,000</view>
		</view>
		<view class="text-title-box">参数用途</view>
		<view class="text-max-box">
			<img src="">
			<view>设备用途</view>
			<view class="colorA" @click="lookText(1)">查看</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>技术参数</view>
			<view class="colorA" @click="lookText(2)">查看</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>备注</view>
			<view class="colorA" @click="lookText(3)">查看</view>
		</view>
		<view class="text-title-box">设备归属</view>
		<view class="text-max-box">
			<img src="">
			<view>设备管理员</view>
			<view>设备管理员</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>管理部门</view>
			<view>管理部门</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>存放位置</view>
			<view>存放位置</view>
		</view>
		<view class="text-title-box">厂家产地</view>
		<view class="text-max-box">
			<img src="">
			<view>单位</view>
			<view>单位</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>生产厂家</view>
			<view>生产厂家</view>
		</view>
		<view class="text-max-box">
			<img src="">
			<view>产地</view>
			<view>产地</view>
		</view>
		<view class="bottom-button" @click="onShade()">登记使用信息</view>
		<view class="shade-max-big-box" v-if="shadeType == 1||shadeType == 2||shadeType == 3||shadeType == 4">
			<view class="shade-top-flex" @click="offShade()"></view>
			<view class="shade-big-box">
				<view class="shade-title-box" v-if="shadeType == 1||shadeType == 2||shadeType == 3">登记使用信息</view>
				<view class="shade-title-box" v-if="shadeType == 4">{{shadeDataD.data1}}</view>
				<view class="shade-box" v-if="shadeType == 1">
					<view class="shade-text-box">
						<view>使用人</view>
						<view>{{shadeDataA.data1}}</view>
					</view>
					<view class="shade-text-box">
						<view>使用类型</view>
						<view>{{shadeDataA.data2}}</view>
					</view>
					<view class="shade-text-box">
						<view>开机时间</view>
						<view>{{shadeDataA.data3}}</view>
					</view>
					<view class="shade-text-box">
						<view>关机时间</view>
						<view>
							<uni-datetime-picker v-model="shadeDataA.data4">{{shadeDataA.data4}}</uni-datetime-picker>
						</view>
					</view>
					
					<view class="shade-text-box">
						<view>使用总时长</view>
						<view>{{shadeDataA.data5}}</view>
					</view>
					<view class="shade-button">确定</view>
				</view>
				<view class="shade-box" v-if="shadeType == 2">
					<view class="shade-text-box">
						<view>使用人</view>
						<view>{{shadeDataB.data1}}</view>
					</view>
					<view class="shade-text-box">
						<view>使用类型</view>
						<view>{{shadeDataB.data2}}</view>
					</view>
					<view class="shade-text-box">
						<view>开机时间</view>
						<view>{{shadeDataB.data3}}</view>
					</view>
					<view class="shade-text-box">
						<view>关机时间</view>
						<view>{{shadeDataB.data4}}</view>
					</view>
					<view class="shade-text-box">
						<view>使用总时长</view>
						<view>{{shadeDataB.data5}}</view>
					</view>
					<view class="shade-button">确定</view>
				</view>
				<view class="shade-box-c" v-if="shadeType == 3">
					<view class="shade-text-title">当前设备已被【{{shadeDataC.data1}}】登记使用，</view>
					<view class="shade-text-title">开机时间：{{shadeDataC.data2}}</view>
					<view class="shade-text-title">如有疑问请联系：{{shadeDataC.data3}}</view>
				</view>
				<view class="shade-box" v-if="shadeType == 4">
					<view class="text-box">
						{{shadeDataD.data2}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mpDeviceDetail,
	} from '@/pages_equipmentUtilization/api/index.js'
	export default {
		props: {
			equipmentId: {},
		},
		data() {
			return {
				shadeType:0,
				shadeDataA:{
					data1:'张工',
					data2:'自用',
					data3:'2026-01-25 15:30',
					data4:'2026-01-25 15:30',
					data5:'3天2小时15分',
				},
				shadeDataB:{
					data1:'张工',
					data2:'自用',
					data3:'2026-01-25 15:30',
					data4:'2026-01-25 15:30',
					data5:'3天2小时15分',
				},
				shadeDataC:{
					data1:'张工',
					data2:'2026-01-25 15:30',
					data3:'010-88888888',
				},
				shadeDataD:{
					data1:'张工',
					data2:'2026-01-25 15:30',
				},
			}
		},
		mounted() {
			this.mpDeviceDetail(this.equipmentId);
		},
		methods: {
			//获取设备信息
			async mpDeviceDetail(id) {
				let self = this;
				const {
					data
				} = await mpDeviceDetail({id:id});
				if (data.code == 200) {
					
				}
			},
			lookText(type){
				if(type == 1){
					this.$set(this,'shadeDataD',{
						data1:'设备用途',
						data2:'设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途设备用途',
					});
				}else if(type == 2){
					this.$set(this,'shadeDataD',{
						data1:'技术参数',
						data2:'技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数技术参数',
					});
				}else if(type == 3){
					this.$set(this,'shadeDataD',{
						data1:'备注',
						data2:'备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注',
					});
				}
				this.$set(this,'shadeType',4);
			},
			onShade(){
				//判断 登记时1 退订2 已占用3
				this.$set(this,'shadeType',1);
			},
			offShade(){
				this.$set(this,'shadeType',0);
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.equipmentInformationInfoPage {
		height: 100%;
		flex:1;
		display:flex;
		flex-direction:column;
		background-color: #fff;
		overflow: scroll;
		.info-max-box{
			display: flex;
			.left-img{
				width:200rpx;
				height:200rpx;
				display: inline-block;
			}
			.right-box{
				flex:1;
			}
		}
		.text-max-box{
			display: flex;
			border-bottom: 1rpx solid #f2f2f2;
			line-height:80rpx;
			padding: 0 40rpx;
			img{
				width:40rpx;
				height:40rpx;
				display: inline-block;
			}
			view:nth-child(2){
				flex:1;
			}
			view:nth-child(3){
				
			}
			.colorA{
				color:#0183FA;
			}
		}
		.text-title-box{
			line-height:80rpx;
			background-color: #f2f2f2;
			padding: 0 30rpx;
		}
		.bottom-button{
			width:300rpx;
			line-height:80rpx;
			text-align: center;
			margin:60rpx auto;
			color:#fff;
			background-color: #0183FA;
			border-radius:6rpx;
		}
		.shade-max-big-box{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,0.3)
			display: flex;
			flex-direction: column;
			.shade-top-flex{
				flex:1;
			}
			.shade-big-box{
				background-color: #fff;
				.shade-title-box{
					font-weight:900;
					padding-right:20rpx;
					width:300rpx;
					border-bottom-right-radius: 40rpx
					background-color: #0183FA;
					color:#fff;
					text-align: center;
					line-height:60rpx;
				}
				.shade-box{
					padding:20rpx 0 100rpx;
					.shade-text-box{
						display: flex;
						border-bottom:1rpx solid #f2f2f2;
						line-height:80rpx;
						padding:0 30rpx;
						view:nth-child(1){
							flex:1;
						}
						view:nth-child(1){
							flex:3;
						}
					}
					.shade-button{
						width:300rpx;
						line-height:80rpx;
						text-align: center;
						background-color: #0183FA;
						border-radius:8rpx;
						color:#fff;
						margin:40rpx auto 0;
					}
					.text-box{
						padding:60rpx 40rpx 200rpx;
					}
				}
				.shade-box-c{
					padding:120rpx 0 200rpx;
					.shade-text-title{
						text-align-last: center;
						line-height: 60rpx;
					}
				}
			}
		}
	}
</style>