pad-app/pages/monitor/place.vue

<template>
	<view class="place">
		<view class="placeTop">
			<view class="topLeft">
				<view style="display: flex; flex-direction: column; justify-content: center;">
					<view class="left" @click="back">
						<uni-icons type="back" size="16" color="#1677FF" />
						<text>返回</text>
					</view>
				</view>
				<view style="display: flex; flex-direction: column; justify-content: center;">
					<view class="right">
						<view class="statusText">
							<view class="status kz"></view>
							<text>空置</text>
						</view>
						<view class="statusText">
							<view class="status sy"></view>
							<text>使用</text>
						</view>
						<view class="statusText">
							<view class="status xn"></view>
							<text>虚拟车位</text>
						</view>
						<template v-if="selectValue == 2">
							<view class="statusText">
								<image src="../../static/images/wjhIcon.png" mode=""></image>
								<text>无计划</text>
							</view>
							<view class="statusText">
								<image src="../../static/images/yjhIcon.png" mode=""></image>
								<text>有计划</text>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="topRight">
				<view class="rightImg">
					<image src="../../static/images/lineImg.png" mode=""></image>
				</view>
				<uni-data-select v-model="selectValue" :localdata="selectList" @change="selectChange"></uni-data-select>
				<uni-icons type="bottom" size="16" color="#1677FF" />
			</view>
		</view>
		<view class="placeText">
			<text>车位总数：{{lineData.totalSeatAmout}}车位</text>
			<text>使用车位：{{lineData.useSeatAmout}}车位</text>
			<text>剩余车位：{{lineData.remainSeatAmout}}车位</text>
			<text>虚拟场位：{{lineData.virtuaSeatAmout}}车位</text>
			<text>可停放车辆：{{lineData.unparkGoodsAmout}}辆</text>
			<text>已停放车辆：{{lineData.stopGoodsAmout}}辆</text>
		</view>
		<view class="placeContent" v-if="selectValue == 1">
			<view class="placeList" style="border: 1px solid #E1E5ED;"
				v-for="(item,index) in lineData.lineStatisticsList">
				<view class="listLeft">
					<template>
						<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
						<text>已停{{item.stopGoodsAmout}}/{{item.totalSeatAmout}}辆</text>
					</template>
				</view>
				<view class="listRight">
					<template v-for="(item2,index2) in item.carLineRespList" @click="showContent(item2)">
						<view class="rigthContent wsy" :key="index2" v-if="item2.type == '0' || item2.type == '3'">
							<text>{{item2.carSituation}}</text>
						</view>
						<view class="rigthContent sy" :key="index2" v-if="item2.type == '1'">
							<text v-if="item2.existFlag == '1'"
								class="gl">{{item2.carSituation}}{{item2.carAmout}}辆</text>
							<text v-else>{{item2.carSituation}}{{item2.carAmout}}辆</text>
						</view>
						<view class="rigthContent xn" :key="index2" v-if="item2.type == '2'">
							<text v-if="item2.existFlag == '1'"
								class="gl">{{item2.carSituation}}{{item2.carAmout}}辆</text>
							<text v-else>{{item2.carSituation}}{{item2.carAmout}}辆</text>
						</view>

					</template>
				</view>
			</view>
		</view>
		<view class="placeContent" v-if="selectValue == 2">
			<!-- <view class="seatTitle">
				<view class="titleLeft">
					车位
				</view>
				<view class="titleRight">
					<p v-for="(item,index) in seatNum" :key="index">
						<template v-if="item >= 1 && item <= 9">0</template>
						{{item}}
					</p>
				</view>
			</view> -->
			<view class="placeList" v-for="(item,index) in seatData.seatCarStatisticsList">
				<view class="listLeft">
					<template>
						<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
						<text>已停{{item.stopGoodsAmout}}/{{item.totalSeatAmout}}辆</text>
					</template>
				</view>
				<view class="listRightSeat">
					<template v-for="(item2,index2) in item.carStatisticsList">
						<view class="seatBox kz" :key="index2" v-if="item2.type == 0">
							<view class="planIcon">
								<image src="../../static/images/yjhIcon.png" mode="" v-if="item2.godStatus == 'P'">
								</image>
								<image src="../../static/images/wjhIcon.png" mode="" v-if="item2.godStatus == 'N'">
								</image>
							</view>
							<p>空置</p>
							<p><template v-if="item2.yacNo >= 1 && item2.yacNo <= 9">0</template>{{item2.yacNo}}</p>
						</view>
						<view class="seatBox sy" :class="{syGl:item2.existFlag == '1'}" :key="index2"
							v-if="item2.type == 1">
							<view class="planIcon">
								<image src="../../static/images/yjhIcon.png" mode="" v-if="item2.godStatus == 'P'">
								</image>
								<image src="../../static/images/wjhIcon.png" mode="" v-if="item2.godStatus == 'N'">
								</image>
							</view>
							<p>{{item2.brdName}}</p>
							<p>{{item2.bvmName}}</p>
							<p><template v-if="item2.yacNo >= 1 && item2.yacNo <= 9">0</template>{{item2.yacNo}}</p>
						</view>
						<view class="seatBox xn" :class="{xnGl:item2.existFlag == '1'}" :key="index2"
							v-if="item2.type == 2">
							<view class="planIcon">
								<image src="../../static/images/yjhIcon.png" mode="" v-if="item2.godStatus == 'P'">
								</image>
								<image src="../../static/images/wjhIcon.png" mode="" v-if="item2.godStatus == 'N'">
								</image>
							</view>
							<p>{{item2.brdName}}</p>
							<p>{{item2.bvmName}}</p>
							<p><template v-if="item2.yacNo >= 1 && item2.yacNo <= 9">0</template>{{item2.yacNo}}</p>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginObj: {},
				selectValue: "1",
				selectList: [{
						text: "车道",
						value: "1",
					},
					{
						text: "车位",
						value: "2",
					}
				],
				lineData: {},
				seatNum: 0,
				seatData: {},
			}
		},
		props: {
			vvyId: {
				type: String,
				default: () => ""
			},
			pyaObj: {
				type: Object,
				default: () => {}
			},
			brdId: {
				type: String,
				default: () => ""
			},
			potId: {
				type: String,
				default: () => ""
			},
			mnfBl: {
				type: String,
				default: () => ""
			},
			vinCode: {
				type: String,
				default: () => ""
			},
			workId: {
				type: String,
				default: () => ""
			}
		},
		mounted() {
			this.loginObj = uni.getStorageSync('loginObj')
			this.getLineData()
		},
		methods: {
			// 点击返回
			back() {
				this.$emit("modifyPlaceTabs", 0)
			},
			// 点击下拉切换车道车位
			selectChange(e) {
				this.selectValue = e
				if (this.selectValue == 2) {
					this.getSeatData()
				}
			},
			// 获取车道车辆情况
			getLineData() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/line/statistics?displayFlag=1&vvyId=${this.vvyId}&pyaId=${this.pyaObj.pyaId}&brdId=${this.brdId}&bvmId=${this.bvmId}&potId=${this.potId}&vinCode=${this.vinCode}$workStatuss=${this.workId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						console.log(res)
						if (res.data.status == 200) {
							this.lineData = res.data.data
						}
					}
				})
			},
			// 获取车位车辆情况
			getSeatData() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/seat/statistics?displayFlag=1&vvyId=${this.vvyId}&pyaId=${this.pyaObj.pyaId}&brdId=${this.brdId}&bvmId=${this.bvmId}&potId=${this.potId}&vinCode=${this.vinCode}$workStatuss=${this.workId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.seatData = res.data.data
							console.log(this.seatData)
							let numList = []
							this.seatData.seatCarStatisticsList.forEach(v => {
								numList.push(v.carStatisticsList.length)
							})
							this.seatNum = Math.max(...numList)
						}
					}
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.place {
		margin-top: 68px;

		.placeTop {
			padding: 12px 16px;
			display: flex;
			justify-content: space-between;
			background-color: #F6F7F9;

			.topLeft {
				display: flex;

				.left {
					font-size: 14px;
					color: #1677FF;
					margin-right: 48px;
				}

				.right {
					display: flex;

					.status {
						width: 10px;
						height: 10px;
						margin-right: 8px;
						border-radius: 50%;
						margin-top: 6px;
					}

					.statusText {
						display: flex;
						font-size: 14px;
						color: #666666;
						margin-right: 20px;

						.kz {
							background: #EEEEEE;
							border: 1px solid #DCDCDC;
						}

						.sy {
							background: #4476F6;
						}

						.xn {
							background: #FF6B3B;
						}

						image {
							width: 12px;
							height: 14px;
							margin-right: 5px;
							margin-top: 3px;
						}
					}
				}
			}

			.topRight {
				display: flex;

				.rightImg {
					display: flex;
					flex-direction: column;
					justify-content: center;

					image {
						width: 14px;
						height: 14px;
					}
				}

				/deep/.uni-icons {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				/deep/.uni-stat__select {
					width: 50px;
				}

				/deep/.uni-select {
					border: none;
					background: transparent;
				}

				/deep/.uniui-clear:before {
					display: none;
				}

				/deep/.uni-select__input-box {
					text-align: center;
				}

				/deep/.uni-select__input-text {
					color: #1677FF;
				}
			}
		}

		.placeText {
			padding: 10px 16px;
			width: 100%;
			background: #E6F4FF;
			border: 1px solid #BAE0FF;

			text {
				margin-right: 20px;
				font-size: 14px;
				color: #333333;
			}
		}

		.placeContent {
			height: calc(100vh - 234px);
			overflow: scroll;

			.seatTitle {
				display: flex;
				height: 50px;
				border: 1px solid #E1E5ED;

				.titleLeft {
					width: 80px;
					background: #E1E5ED;
					border: 1px solid #DBDDE3;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;

					p {
						font-size: 14px;
						color: #0B266A;
					}
				}

				.titleRight {
					width: calc(100% - 80px);
					display: flex;

					p {
						min-width: 80px;
						text-align: center;
						line-height: 50px;
						font-size: 12px;
						color: #666666;
					}
				}
			}

			.placeList {
				display: flex;
				height: 70px;

				.listLeft {
					width: 80px;
					background: #E1E5ED;
					border: 1px solid #DBDDE3;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;

					p {
						font-size: 14px;
						color: #0B266A;
					}

					text {
						font-size: 12px;
						color: #666666;
					}
				}

				.listRight {
					width: calc(100% - 80px);
					display: flex;
					padding: 0 12px;
					gap: 10px;

					.rigthContent {
						flex: 1;
						text-align: center;
						height: 56px;
						line-height: 56px;
						border: 1px solid #E1E5ED;
						margin: 7px 0;
						font-size: 14px;
						color: #666666;
					}

					.wsy {
						background: #EEEEEE;
					}

					.sy {
						background: rgba(199, 212, 243, 0.8);
						color: #4476F6;

						.gl {
							color: #fff;
							background: #4476F6;
						}
					}

					.xn {
						background: rgba(253, 98, 98, 0.10);
						color: #FD6262;

						.gl {
							color: #fff;
							background: #FF6B3B;
						}
					}
				}

				.listRightSeat {
					width: calc(100% - 80px);
					display: flex;

					.seatBox {
						border: 1px solid #E1E5ED;
						min-width: 80px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 12px;
						position: relative;

						p {
							text-align: center;
							margin-top: 4px;
						}

						p:last-child {
							color: #828CA7;
						}

						.planIcon {
							position: absolute;
							top: 0;
							left: 0;

							image {
								width: 12px;
								height: 14px;
							}
						}
					}

					.kz {
						background: #F7F9FF;

						p:first-child {
							width: 70%;
							margin-left: 15%;
							padding: 3px 0;
							background-color: #fff;
							border: 1px solid #E4E4E4;
							border-radius: 1px;
						}
					}

					.sy {
						color: #4476F6;
						background: #D3DDF6;
					}

					.syGl {
						color: #fff;
						background: #4476F6;
					}

					.xn {
						color: #FD6262;
						background: rgba(253, 98, 98, 0.10);
					}

					.xnGl {
						color: #fff;
						background: #FF6B3B;
					}
				}
			}
		}
	}
</style>