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/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/mp.css">
</head>

<body>
	<div class="main-page">
		<div class="page-body flex">
			<div class="sub-page-container">
				<div class="right-content-wrapper page-coal-shed">
					<div class="right-content-box">
						<ul class="tags">
							<!-- <li class="to-back" onclick="javascript:history.back()">返回</li> -->
							<li>有组织</li>
							<li>&gt;</li>
							<li class="meipeng11">煤棚1#</li>
						</ul>
						<div class="content-section conchu">
							<div class="left-section">
								<div class="card1">
									<p class="shebei-txt">煤棚1#</p>
									<div class="txt">
										炼钢厂的生产规模是该厂年产原钢的数量，即合格钢锭或二者之和的年产量。但对于某一个炼钢厂来说，还应区分它的“生产能力”和“实际(或计划)产量”。</div>
									<div class="info flex">
										<img src="assets/img/yu.png"><span>区域面积：<span
												class="un mgl-4 mgr-20">650m²</span></span>
										<img src="assets/img/person.png"><span>工作人员：<span
												class="un mgl-4 mgr-20">120人</span></span>
									</div>
									<div class="img-part">
										<p class="img-txt mgb-4">设备信息</p>
										<div class="img-body flex">
											<img class="img-p" src="assets/img/detector.png">
											<img class="img-p" src="assets/img/jiankong.png">
											<img class="img-p" src="assets/img/zhili.png">
										</div>
									</div>
									<ul class="footer-ul-data flex">
										<span class="label">检测仪</span>
										<span class="label">监控设备</span>
										<span class="label">治理设备</span>
									</ul>
									<div class="foot-body">
										<ul class="footer-ul-data flex">
											<li class="footer-li"><span class="inline">62</span><span>/68</span></li>
											<li class="footer-li"><span class="inline">62</span><span>/68</span></li>
											<li class="footer-li"><span class="inline">82</span><span>/83</span></li>
										</ul>
									</div>
								</div>
								<div class="card2">
									<p class="shebei-txt">监控设备数据</p>
									<div class="card-content">
										<table class="table">
											<thead>
												<tr>
													<th>设备</th>
													<th>时间</th>
													<th>颗粒物浓度</th>
													<th>PM10</th>
													<th>PM2.5</th>
												</tr>
											</thead>
											<tbody class="tbody">
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#检测仪</td>
													<td>10:18:12</td>
													<td>0.052</td>
													<td>0.097</td>
													<td>0.026</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="card3">
									<p class="shebei-txt">运行状态</p>
									<div class="card-content">
										<table class="table">
											<thead>
												<tr>
													<th>治理设备</th>
													<th>启停状态</th>
													<th>急停</th>
													<th>检测设备</th>
													<th>颗粒物</th>
												</tr>
											</thead>
											<tbody class="tbody">
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
												<tr>
													<td>3#喷雾机</td>
													<td>系统待机</td>
													<td>0.052</td>
													<td>3#检测仪</td>
													<td>0.026</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="center-section">
								<div class="video-box flex">
									<span>3D模型</span>
									<div>
										<span class="fang1 gong"></span>
										<span class="meip">1#煤棚
											<span></span>
										</span>
									</div>
									<div>
										<span class="wu1 gong wupao"></span>

									</div>
									<div>
										<span class="tong1 gong"></span>

									</div>
									<div>
										<span class="fang2 gong"></span>
										<span class="meip2">
											2#煤棚
											<span></span>
										</span>
									</div>
									<div>
										<span class="wu2 gong wupao"></span>
										<span></span>
									</div>
									<div>
										<span class="tong2 gong"></span>

									</div>
								</div>

								<div class="center-section-footer"></div>
							</div>
							<div class="right-section">
								<div class="card4">
									<p class="shebei-txt">实时视频</p>
									<div class="content-body">
										<div class="swiper-box" id="swiper">
											<ul>
												<li>
													<section class="mini-item">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4 mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
												</li>
												<li>
													<section class="mini-item">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4 mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
												</li>
												<li>
													<section class="mini-item">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
													<section class="mini-item mgl-4 mgt-4">
														<div class="video-box flex">
															实时视频
															<span class="name">东大门</span>
														</div>
													</section>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="card5">
									<p class="shebei-txt">粉尘治理效果</p>
									<div class="content-body">
										<div class="top-chart">
											<div class="top-echatrs aqi" id="device1"></div>
											<div class="select-box flex">
												<span>设备</span>
												<span id="select1"></span>
											</div>
											<div class="flex result">
												<span>耗电量 0.365<span class="unit mgl-4 mgr-20"> kw/h</span></span>
												<span>耗水量 0.365<span class="unit mgl-4 mgr-20"> m³</span></span>
											</div>
										</div>
										<div class="bottom-chart">
											<div class="top-echatrs aqi" id="device2"></div>
											<div class="select-box flex">
												<span>设备</span>
												<span id="select2"></span>
											</div>
											<div class="flex result">
												<span>耗电量 0.365<span class="unit mgl-4 mgr-20"> kw/h</span></span>
												<span>耗水量 0.365<span class="unit mgl-4 mgr-20"> m³</span></span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<iframe src="" id="iframe"></iframe>
						<!-- 下拉框区域 begin -->
						<div class="select-box"></div>
						<!-- 下拉框区域 end -->
					</div>
					<span class="close-btn"></span>
				</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/page.js"></script>
	<script src="assets/js/echarts.min.js"></script>
	<script src="assets/js/select.js"></script>
	<script src="assets/js/swiper.js"></script>
	<script>
		var pageObj = function () {
			this.init()
		}

		pageObj.prototype.init = function () {
			// 渲染底部菜单
			new Footer({
				el: ".main-page",
				curMenu: "有组织",
				size: 4,
				menus: [{
						href: "有组织.html",
						text: "有组织"
					},
					{
						href: "无组织.html",
						text: "无组织"
					},
					{
						href: "车辆出入.html",
						text: "清洁运输"
					},
					{
						href: "视频.html",
						text: "视频大厅"
					}
				]
			});

			// 渲染左侧菜单树
			new LeftSiderMenu({
				el: ".sub-page-container",
				size: 10,
				curMenu: "炼钢生产区",
				menus: [{
						href: "雾炮.html",
						text: "雾炮"
					},
					{
						href: "炼钢生产区.html",
						text: "炼钢生产区"
					},
					{
						href: "球团生产区.html",
						text: "球团生产区"
					},
					{
						href: "轧钢生产区.html",
						text: "轧钢生产区"
					},
					{
						href: "带钢生产区.html",
						text: "带钢生产区"
					},
				]
			});

			this.initChart1();
			this.initChart2();


			new SelectPlus({
				el: "#select1",
				data: [{
						value: "",
						text: "请选择"
					},
					{
						value: 1,
						text: "1#检测仪"
					},
					{
						value: 2,
						text: "2#检测仪"
					},
					{
						value: 3,
						text: "3#检测仪"
					}
				],
				done: function (row) {
					console.log(row);
				}
			})


			new SelectPlus({
				el: "#select2",
				data: [{
						value: "",
						text: "请选择"
					},
					{
						value: 1,
						text: "1#检测仪"
					},
					{
						value: 2,
						text: "2#检测仪"
					},
					{
						value: 3,
						text: "3#检测仪"
					}
				],
				done: function (row) {
					console.log(row);
				}
			})

			new Swiper({
				el:"#swiper",
				pageChange:function(idx){	//分页切换事件
					console.log(idx)
				},
				clickItem:function(idx){	//li的点击事件
					console.log(idx);
				}
			})
		}
		pageObj.prototype.initChart2 = function () {
			//实例化对象
			var myChart = echarts.init(document.getElementById("device1"));
			//吧配置给实例对象
			myChart.setOption({
				color: ['#0081FF', '#FF4D4D', '#06E1FF'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(0, 255, 233,0)'
								}, {
									offset: 0.5,
									color: 'rgba(255, 255, 255,1)',
								}, {
									offset: 1,
									color: 'rgba(0, 255, 233,0)'
								}],
								global: false
							}
						},
					},
				},
				legend: {
					data: ['治理前', '治理中', '治理后'],
					textStyle: {
						//修改图例文字颜色
						color: "#ffffff"
					},
					right: "2%",
					icon: "circle",
				},
				grid: {
					top: '36%',
					left: '3%',
					right: '5%',
					bottom: '3%',
					borderColor: '#012f4a', //边框颜色
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					show: true,
					data: ['00', '03', '06', '09', '12', '15', '18', '21', '24'],
					axisTick: {
						//去掉刻度线
						show: false
					},
					axisLabel: {
						color: '#4c9bfd'
					},
					axisLine: {
						//去除轴线
						show: false
					}
				},
				yAxis: {
					type: 'value',
					show: true,
					axisTick: {
						//去掉刻度线
						show: false
					},
					axisLabel: {
						color: '#4c9bfd'
					},
					axisLine: {
						//去除轴线
						show: false
					},
					splitLine: {
						//坐标轴在 grid 区域中的分隔线。
						show: true,
						lineStyle: {
							color: "rgba(30, 57, 135, 0.57)"
						}
					}
				},
				series: [{
					name: '治理前',
					type: 'line',
					stack: '总量',
					smooth: false,
					symbolSize: 0,
					data: [0.2, 0.1, 0.3, 0.4, 0.5, 0.6, 0.6, 0.8],
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[{
										offset: 0,
										color: "rgba(0, 129, 255, 0.71)"
									},
									{
										offset: 1,
										color: "rgba(0, 129, 255, 0.1)"
									}
								],
								false
							)
						}
					}
				}]
			});
		}
		pageObj.prototype.initChart1 = function () {
			//实例化对象
			var myChart = echarts.init(document.getElementById("device2"));
			//吧配置给实例对象
			myChart.setOption({
				color: ['#0081FF', '#FF4D4D', '#06E1FF'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(0, 255, 233,0)'
								}, {
									offset: 0.5,
									color: 'rgba(255, 255, 255,1)',
								}, {
									offset: 1,
									color: 'rgba(0, 255, 233,0)'
								}],
								global: false
							}
						},
					},
				},
				legend: {
					data: ['治理前', '治理中', '治理后'],
					textStyle: {
						//修改图例文字颜色
						color: "#ffffff"
					},
					right: "2%",
					icon: "circle",
				},
				grid: {
					top: '36%',
					left: '3%',
					right: '5%',
					bottom: '3%',
					borderColor: '#012f4a', //边框颜色
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					show: true,
					data: ['00', '03', '06', '09', '12', '15', '18', '21', '24'],
					axisTick: {
						//去掉刻度线
						show: false
					},
					axisLabel: {
						color: '#4c9bfd'
					},
					axisLine: {
						//去除轴线
						show: false
					}
				},
				yAxis: {
					type: 'value',
					show: true,
					axisTick: {
						//去掉刻度线
						show: false
					},
					axisLabel: {
						color: '#4c9bfd'
					},
					axisLine: {
						//去除轴线
						show: false
					},
					splitLine: {
						//坐标轴在 grid 区域中的分隔线。
						show: true,
						lineStyle: {
							color: "rgba(30, 57, 135, 0.57)"
						}
					}
				},
				series: [{
					name: '治理前',
					type: 'line',
					stack: '总量',
					smooth: false,
					symbolSize: 0,
					data: [0.2, 0.1, 0.3, 0.4, 0.5, 0.6, 0.6, 0.8],
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[{
										offset: 0,
										color: "rgba(0, 129, 255, 0.71)"
									},
									{
										offset: 1,
										color: "rgba(0, 129, 255, 0.1)"
									}
								],
								false
							)
						}
					}
				}]
			});
		}


		new pageObj();
		window.onload = function () {
			var wupao = document.querySelectorAll(".wupao")
			var iframe = document.getElementById("iframe")
			var content = document.querySelector(".conchu")
			var meipeng11 = document.querySelector(".meipeng11")

			for (i = 0; i < wupao.length; i++) {
				wupao[i].onclick = function () {
					content.style.display="none"
					iframe.src = "雾炮2.html"
					meipeng11.innerText = "煤棚"
					if (iframe.src != " ") {
						var toback = document.querySelector(".to-back")
						// var meipeng11 = document.querySelector(".meipeng11")
						toback.onclick = function () {
							meipeng11.innerHTML = "煤棚1#"
							iframe.src = " "
							content.style.display="flex"
							content.style.hidden=ture

						}
					}
				}

			}
		}
	</script>
</body>

</html>