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/coal-shed-2.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-2">
						<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">
								<!-- 左边 -->
								<div class="left-section">
									<div class="card ec">
										<p class="card-title">3#检测仪</p>
										<div class="content-body flex pd-all-20">
											<canvas class="item circle-chart1"></canvas>
											<canvas class="item circle-chart2"></canvas>
										</div>
									</div>
									<div class="card line-one">
										<p class="card-title">12小时内均值</p>
										<div class="content-body pd-all-10" id="vocs">2</div>
									</div>
									<div class="card mist">
										<div class="card-title device-state">
											<span class="grow">6#喷雾机</span>
											<span class="state inline">在线</span>
										</div>
										<div class="content-body flex">
											<img src="assets/img/mist-img.png">
										</div>
									</div>
								</div>
								<!-- 中间 -->
								<div class="center-section ">
									<p>雾炮视频</p>
									<div class="video ">
										<div class="video-box flex">视频区域</div>
									</div>
									<div class="push-button ">
										<ul class="push-vutton-ul">
											<li class="push-button-li">
												<div class="switch">
													<div class="switch-img-2">
													</div>
													</div>
												<p class="switch-2">开关</p>
											</li>
											<li class="play ">
												<div class="play-btn-left"></div>
												<div class="play-btn-right"></div>
												<div class="play-btn-up"></div>
												<div class="play-btn-down"></div>
												<div class="play-itme">复位</div>
												<div class="play-item2">
													设备遥控
												</div>
											</li>
											<li class="push-button-li">
												<div class="switch">
													<div class="switch-img"></div>
													</div>
												<p class="switch-2">自动</p>
											</li>
											<li class="play ">
												<div class="play-btn-left"></div>
												<div class="play-btn-right"></div>
												<div class="play-btn-up"></div>
												<div class="play-btn-down"></div>
												<div class="play-itme">复位</div>
												<div class="play-item2">
													监测遥控
												</div>
											</li>
										</ul>
									</div>
								</div>
								<!-- 右边 -->
								<div class="right-section">
									<div class="card">
										<p class="card-p">运行状态</p>
										<div class="move">
											<ul class="move-ul ">
												<li class="move-li flex">
													<span class="move-span">运行模式</span>
													<span>系统待机</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">手/自动显示</span>
													<span>远程手动</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">用电量（kw/h）</span>
													<span>174.00</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">用水量（m³）</span>
													<span>18.7</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">运行时间（小时）</span>
													<span>6</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">水泵故障显示</span>
													<span>正常</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">风机输出</span>
													<span>系统待机</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">加热故障</span>
													<span>系统待机</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">急停</span>
													<span>系统待机</span>
												</li>
												<li class="move-li flex">
													<span class="move-span">位置显示</span>
													<span>09346</span>
												</li>
											</ul>
										</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/page.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script src="assets/js/semicircle.js"></script>
		<script>
			var pageObj = function() {
				this.init()

				// 渲染底部菜单
				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: "带钢生产区"
						},
					]
				});
			}
			pageObj.prototype.init = function() {
				this.bindEvent();
			}
			pageObj.prototype.bindEvent = function() {
				let self = this;
			}


			pageObj.prototype.init = function() {
				this.initPageStyle();
				this.initChart2();


				new Semicircle({
					el:".circle-chart1",
					rate:50,
					linearColor:['#72A9FF','#0B64AC'],
					name:"检验标准(mg/m3)",
					nameBottom:2,
					nameFontSize:12,
					lineHeight:2,
					lineWidth:6
				});

				new Semicircle({
					el:".circle-chart2",
					rate:80,
					linearColor:['#40FFCE','#115DB9'],
					name:"颗粒物浓度(mg/m3)",
					nameBottom:2,
					nameFontSize:12,
					lineHeight:2,
					lineWidth:6
				});


			}
			pageObj.prototype.initPageStyle = function() {

			}
			pageObj.prototype.initChart2 = function() {

				var vocsChart = echarts.init(document.getElementById('vocs'));
				vocsChart.setOption({
					color: ['#0946FF;', '#7748CD', '#7B7B7B'],
					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: ['粉尘颗粒浓度', 'PM2.5','PM10'],
						icon: "circle",
						right: 10,
						top: 10,
						textStyle: {
							color: "#ffffff",
							fontSize:"12",
						}
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							color: "#8995CB"
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "rgba(1,171,220,0.2)"
							}
						},
						data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
					},
					yAxis: {
						name: '(mg/m³)',
						nameTextStyle: {
							color: "#7DA6EF",
							fontSize: 12,
						},

						type: 'value',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: "#8995CB"
						},
						splitLine: {
							show: false
						}
					},
					grid: {
						bottom: 30,
						right: 10,
						top: 30
					},
					series: [

						{
							name: "粉尘颗粒浓度",
							data: [32, 12, 23, 71, 32, 12, 23, 71, 32, 12, 23, 71],
							type: 'line',
							smooth: true,
							symbolSize: 0,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
										[{
												offset: 0,
												color: "rgba(0, 129, 255, 1)"
											},
											{
												offset: 1,
												color: "rgba(0, 129, 255, 1)"
											}
										],
										false
									)
								}
							}
						},
						{
							name: "PM2.5",
							data: [32, 22, 33, 71, 32, 12, 27, 71, 32, 12, 23, 71],
							type: 'line',
							smooth: true,
							symbolSize: 0,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
										[{
												offset: 0,
												color: "rgba(145, 82, 255, 1)"
											},
											{
												offset: 1,
												color: "rgba(145, 82, 255, 1)"
											}
										],
										false
									)
								}
							}
						},
						{
							name: "PM10",
							data: [32, 22, 33, 71, 32, 12, 27, 71, 32, 12, 23, 71],
							type: 'line',
							smooth: true,
							symbolSize: 0,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
										[{
												offset: 0,
												color: "rgba(123, 123, 123, 1)"
											},
											{
												offset: 1,
												color: "rgba(123, 123, 123, 0.1)"
											}
										],
										false
									)
								}
							}
						}
					]
				});
			}
			new pageObj();
		</script>
	</body>
</html>