master

分支 (1)

管理

管理

master

jiujiu
/
车辆清洗.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>环保监控一体化平台</title>
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/page-vehicle-cleaning.css">
	<link rel="stylesheet" href="assets/css/viewer.css">
</head>
<body>
	<div class="main-page">
		<div class="page-body flex">
			<div class="sub-page-container">

				<div class="right-content-wrapper">
					<div class="right-content-box">
						<ul class="tags">
							<!-- <li class="to-back" onclick="javascript:history.back()">返回</li> -->
							<li>清洁运输</li>
							<li>&gt;</li>
							<li>车辆清洗</li>
						</ul>
						<div class="content-section flex page-vehicle-cleaning">
							<div class="table-section">
								<p class="card-title">车辆出入记录</p>
								<div class="card-content pd-all-20">
									<div class="main-video-box flex">
										视频区域
										<div class="circle-play-btn"></div>
									</div>
								</div>
							</div>
							<div class="left-box ">
								<p class="card-title">车辆进入视频</p>
								<div class="card-content">
									<ul class="flex params">
										<li class="item tab active" id="one">洗车情况</li>
										<li class="item grow tab" id="two">运行参数</li>
										<li class="state flex flex-sb">
											<span class="icon-radio checked" id="1">已洗</span>
											<span class="icon-radio" id="0">未洗</span>
										</li>
									</ul>
									<div class="detail-section">
										<div class="wrapper">
											<div class="vehicle-list">
												<div class="platfrom"></div>
												<ul id="viewerBox">
													<li>
														<div class="flex flex-sb vehicle-config">
															<span class="vehicle-idcard">湘B043241</span>
															<span>清洗时间<span class="mgl-10">03-21 09:02:16</span></span>
														</div>
														<div class="img-box flex">
															<img src="assets/img/vehicle.jpeg">
															<i class="icon-enlarge"></i>
														</div>
													</li>
													<li>
														<div class="flex flex-sb vehicle-config">
															<span>湘B043241</span>
															<span>清洗时间<span class="mgl-10">03-21 09:02:16</span></span>
														</div>
														<div class="img-box flex">
															<img src="assets/img/bg.png">
															<i class="icon-enlarge"></i>
														</div>
													</li>
													<li>
														<div class="flex flex-sb vehicle-config">
															<span>湘B043241</span>
															<span>清洗时间<span class="mgl-10">03-21 09:02:16</span></span>
														</div>
														<div class="img-box flex" >
															<img src="assets/img/vehicle.jpeg">
															<i class="icon-enlarge"></i>
														</div>
													</li>
												</ul>
											</div>
											<div class="run-param-order">
												<div class="note">洗车机运行参数</div>
												<div class="run-params-box">
													<ul>
														<li>
															<span class="label">A相电流</span>
															<span class="value">OA</span>
														</li>
														<li>
															<span class="label">C相电流</span>
															<span class="value">OA</span>
														</li>
														<li>
															<span class="label">总有功功率</span>
															<span class="value">0.02KW</span>
														</li>
														<li>
															<span class="label">总无功功率</span>
															<span class="value">-0.02KW</span>
														</li>
														<li>
															<span class="label">功率因数</span>
															<span class="value">0.732KW</span>
														</li>
														<li>
															<span class="label">用电量</span>
															<span class="value">9974.3KWh</span>
														</li>
														<li>
															<span class="label">用水量</span>
															<span class="value">8576.5t</span>
														</li>
														<li>
															<span class="label">水压</span>
															<span class="value">OMPa</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
	<script src="assets/js/viewer.js?v=2"></script>
	<script src="assets/js/select.js"></script>
	<script src="assets/js/page.js"></script>
	<script>
		var pageObj = function(){
			this.tabBox = $(".detail-section .wrapper");
			this.init()

		    // 渲染左侧菜单树
		    new LeftSiderMenu({
		        el:".sub-page-container",
		        size:10,
		        curMenu:"车辆清洗",
		        menus:[
		            { href:"车辆出入.html",text:"车辆出入" },
		            { href:"车辆清洗.html",text:"车辆清洗" },
		            { href:"车辆苫盖.html",text:"车辆苫盖" },
		            { href:"车辆排放.html",text:"车辆排放" },
		            { href:"GPS轨迹.html",text:"GPS轨迹" }
		        ]
		    });


			new Footer({
		        el:".main-page",
		        curMenu:"清洁运输",
		        size:4,
		        menus:[
		            {href:"有组织.html",text:"有组织"},
		            {href:"无组织",text:"无组织"},
		            {href:"车辆出入.html",text:"清洁运输"},
		            {href:"视频.html",text:"视频大厅"}
		        ]
		    });
		}

		pageObj.prototype.init = function(){
			this.bindEvent();
		}
		pageObj.prototype.bindEvent = function(){
			let self = this;

			$(".params").on("click",".tab",function(e){
				$(this).addClass("active").siblings("li.tab").removeClass("active");
				if(e.target.id=="one"){
					self.tabBox.removeClass("show-params");
					$(".params .state").show();
				}else{
					self.tabBox.addClass("show-params");
					$(".params .state").hide();
				}
			})

			// 车辆已洗跟未洗
			$("body").on("click",".params .icon-radio",function(e){
				$(this).addClass("checked").siblings("span.icon-radio").removeClass("checked");
				alert(this.id);
			})


			let viewer = new Viewer(document.getElementById("viewerBox"), {});

			// 自定义下拉框option点击事件
			new SelectPlus({
				el:".platfrom",
				data:[
					{ href:"概览.html",text:"概览" },
					{ value:"",text:"请选择" },
					{ value:1,text:"AA" },
					{ value:2,text:"BB" },
					{ value:3,text:"CC" },
					{ value:4,text:"DD" }
				],
				done:function(row){
					console.log(row);
				}
			})
		}

		new pageObj();

	</script>
</body>
</html>