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/overview.css">
	</head>
	<body>
		<div class="main-page page-overview">
			<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 page-overview flex">
								<div class="left-box">
									<p class="card-title">清洁运输概览</p>
									<div class="content-body">
										<div class="top-box">
											<div class="top-part">
												<div class="flex pdl-20 pdr-60 first">
													<span class="title-txt grow">长沙</span>
													<span class="fixed-width">
														<span>2021-05-10</span>
														<span class="mgl-30">周一</span>
														<span class="mgl-30">11:18</span>
													</span>
												</div>
												<div class="flex pdl-20 pdr-60 second">
													<span class="se-left pdl-10 grow">28°</span>
													<span class="fixed-width flex vertical all-top">
														<span>
															<span>多云</span>
															<span class="mgl-10">东南微风</span>
															<span class="mgl-10">24~33℃</span>
														</span>
														<span class="mgt-12">
															<span>PM2.5</span>
															<span class="bg-yellow">
																<span>51</span>
																<span>良</span>
															</span>
														</span>
													</span>
												</div>
											</div>

											<div class="bottom-part">
												<p class="buttom-title">当日告警分析</p>
												<span id="select2"></span>
												<div class="api" id="api">

												</div>
											</div>
										</div>
										<div class="bottom-box">
											<p class="title">实时视频</p>
											<section class="card">
												<div class="video-item">
													<div class="video-box flex">视频区域<div class="circle-play-btn"></div></div>
												</div>
												<div class="video-item">
													<div class="video-box flex">视频区域<div class="circle-play-btn"></div></div>
												</div>
												<div class="video-item">
													<div class="video-box flex">视频区域<div class="circle-play-btn"></div></div>
												</div>
												<div class="video-item">
													<div class="video-box flex">视频区域<div class="circle-play-btn"></div></div>
												</div>
											</section>
										</div>
									</div>
								</div>
								<div class="center-box">
									<div class="card mgb-10">
										<p class="card-title">当日车辆出入</p>
										<div class="content-body">
											<div class="top-box hrate-55" id="chart1">1</div>
											<div class="bottom-box flex hrate-45">
												<canvas class="circle-chart" id="circleChart1"></canvas>
												<canvas class="circle-chart" id="circleChart2"></canvas>
											</div>
										</div>
									</div>
									<div class="card">
										<p class="card-title">当天苫盖记录</p>
										<div class="content-body">
											<table class="table">
												<thead>
													<tr>
														<th class="no">序号</th>
														<th>车牌</th>
														<th>苫盖状态</th>
														<th class="time">时间</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td class="no">1</td>
														<td>晋L02961</td>
														<td>关闭</td>
														<td class="time">11:08:33</td>
													</tr>
													<tr>
														<td class="no">2</td>
														<td>晋L02961</td>
														<td class="un-complete">关闭</td>
														<td class="time">11:08:33</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div class="right-box">
									<div class="card mgb-10">
										<p class="card-title">当天洗车记录</p>
										<div class="content-body">
											<table class="table">
												<thead>
													<tr>
														<th>序号</th>
														<th>车牌</th>
														<th>清洗状态</th>
														<th>时间</th>
														<th>洗车平台</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td>1</td>
														<td>晋L02961</td>
														<td class="un-complete">未清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
													<tr>
														<td>2</td>
														<td>晋L02961</td>
														<td>已清洗</td>
														<td>03-24 11:08:33</td>
														<td>平台2</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
									<div class="card">
										<p class="card-title">车辆排放记录</p>
										<div class="content-body" id="chart2"></div>
									</div>
								</div>
							</div>
						</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/echarts.min.js"></script>
		<script src="assets/js/semicircle.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/select.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:"车辆排放" },
				        { href:"GPS轨迹.html",text:"GPS轨迹" }
				    ]
				});

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

				new Semicircle({
					el:"#circleChart1",
					rate:70,
					rateFontSize:20,
					nameFontSize:14,
					linearColor:['#0B64AC','#72A9FF'],
					lineMargin:50,
					nameBottom:8,
					value:136,
					name:"今日车辆出厂"
				});

				new Semicircle({
					el:"#circleChart2",
					rate:90,
					rateFontSize:20,
					nameFontSize:14,
					linearColor:['#30C5BE','#1059B0'],
					lineMargin:50,
					nameBottom:8,
					value:152,
					name:"今日车辆进厂"
				});

				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);
					}
				})


				//实例化对象
			    var myCharts=echarts.init(document.querySelector('div#chart2'));
			 	//指定配置项
			    var option = {
			     	tooltip: { //提示框组件
			     		trigger: 'axis',
			     		formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
			     		axisPointer: {
			     			type: 'shadow',
			     			label: {
			     				backgroundColor: '#6a7985'
			     			}
			     		},
			     		textStyle: {
			     			color: '#fff',
			     			fontStyle: 'normal',
			     			fontFamily: '微软雅黑',
			     			fontSize: 14,
			     		}
			     	},
			     	grid: {
			     		left: '4%',
			     		right: '4%',
			     		bottom: '5%',
			     		top:'15%',
			     		containLabel: true,
			     	},
			         legend: {//图例组件，颜色和名字
			            left:'4%',
			     		top:'3%',
			     		itemGap: 20,
			     		itemWidth: 20,
			     		itemHeight: 10,
			            data:[{
			                 name:'国五',
			                  // icon:'image://assets/img/checked.png', //路径
			    			  icon: "circle",

			             	},
			             	{
			                 name:'国五以上',
			    			// icon:'image://assets/img/checked.png',
			    			icon: "circle",

			             	}
			            ],
			            textStyle: {
			     			color: '#ffffff',
			     			fontStyle: 'normal',
			     			fontFamily: '微软雅黑',
			     			fontSize: 14,
			            }
			        },
			     	xAxis: [
			     		{
			     			type: 'category',
			     			data: ['03-12', '03-13', '03-14','03-15','03-16','03-17','03-18'],
			     			axisLabel: { //坐标轴刻度标签的相关设置。
			     				textStyle: {
			     					color: '#7DA6EF',
			     					fontStyle: 'normal',
			     					fontFamily: '微软雅黑',
			     					fontSize:14,
			     				},
			     			},
			    			axisLine:{
			    				//去除轴线
			    				show:false
			    			},
			     			axisTick:{//坐标轴刻度相关设置。
			     				show: false,
			     			},
			     			splitLine: { //坐标轴在 grid 区域中的分隔线。
			     				show: false,
			     			}
			     		}
			     	],
			     	yAxis: [
			     		{
			     			type: 'value',
			     			splitNumber: 4,
			     			axisLabel: {
			     				textStyle: {
			     					color: '#7DA6EF',
			     					fontStyle: 'normal',
			     					fontFamily: '微软雅黑',
			     					fontSize: 14,
			     				}
			     			},
			     			axisLine:{
			     				show: false
			     			},
			     			axisTick:{
			     				show: false
			     			},
			     			splitLine: {
			     				show: true,
			     				lineStyle: {
			     					color: "rgba(30, 57, 135, 0.57)"
			     				}
			     			}
			     		}
			     	],
			         series : [
			            {
			                name:'国五',
			                type:'bar',
			                data:[30,120,60,90,100,90,30],
			    			showBackground: true,
			    			backgroundStyle: {
					            color: 'rgba(0, 124, 244, 0.13)'
					        },
			                barWidth: 10,
			                barGap:1,//柱间距离
			                itemStyle: {
			                     normal: {
			                         show: true,
			                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                             offset: 0,
			                             color: '#04F5F9'
			                         }, {
			                             offset: 1,
			                             color: '#007CF4'
			                         }]),
			                         barBorderRadius: 50,
			                         borderWidth: 0,
			                     }
			                },
						},
			            {
			                name:'国五以上',
			                type:'bar',
			                data:[10,30,60,90,120,30,60],
			    			showBackground: true,
					        backgroundStyle: {
					            color: 'rgba(67, 70, 211, 0.28)'
					        },
			                barWidth: 10,
			                barGap:1,//柱间距离
			                itemStyle: {
			                    normal: {
			                        show: true,
			                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                            offset: 0,
			                            color: '#4D51FF'
			                        }, {
			                            offset: 1,
			                            color: '#573AD8'
			                        }]),
			                        barBorderRadius: 80,
			                        borderWidth: 0,
			                    }
			                }
			            }
					]
				};

			    //把配置项给实例对象
				myCharts.setOption(option);

			}
			pageObj.prototype.bindEvent = function(){
				let self = this;
			}
			pageObj.prototype.initChart1 = function(){
				var chart1 = echarts.init(document.getElementById('chart1'));
					chart1.setOption({
						color:['#C454C7','#00FCFF'],
						title:{
							text:"台",
							top:0,
							left:26,
							textStyle:{
								color:"#7DA6EF",
								fontSize:12
							}
						},
						grid:{
							top:'16%',
							bottom:'16%',
							right:'5%'
						},
						legend:{
							data:['进厂','出厂'],
							right:10,
							top:2,
							textStyle:{
								color:"#ffffff"
							}
						},
						xAxis: [
				     		{
				     			type: 'category',
				     			data: ['01', '02', '03', '04', '05', '06', '07'],
				     			axisLabel: {
				     				textStyle: {
				     					color: '#7DA6EF',
				     					fontStyle: 'normal',
				     					fontFamily: '微软雅黑',
				     					fontSize:14,
				     				},
				     			},
				    			axisLine:{
				    				//去除轴线
				    				show:false
				    			},
				     			axisTick:{//坐标轴刻度相关设置。
				     				show: false,
				     			},
				     			splitLine: { //坐标轴在 grid 区域中的分隔线。
				     				show: false,
				     			}
				     		}
				     	],
					    yAxis: {
					        type: 'value',
					        axisLabel: {
			     				textStyle: {
			     					color: '#7DA6EF',
			     					fontStyle: 'normal',
			     					fontFamily: '微软雅黑',
			     					fontSize:14,
			     				}
			     			},
			     			axisLine:{
			     				show:false
			     			},
			     			axisTick:{//坐标轴刻度相关设置。
			     				show: false,
			     			},
			     			splitLine: {
			     				lineStyle: {
			     					color: "rgba(30, 57, 135, 0.57)"
			     				}
			     			}
				    	},
					    series: [
						    {
						    	name:"进厂",
						        data: [820, 932, 901, 934, 1290, 1330, 1320],
						        type: 'line',
						        smooth: true
						    },
						    {
						    	name:"出厂",
						        data: [120, 32, 91, 34, 129, 133, 120],
						        type: 'line',
						        smooth: true
						    }
					    ]
					})
			}
			pageObj.prototype.initChart2 = function() {
				//实例化对象
				var myChart = echarts.init(document.getElementById("api"));
				//吧配置给实例对象
				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:'15%',
				        left: '3%',
				        right: '5%',
				        bottom: '3%',
				        borderColor:'#012f4a',//边框颜色
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
						show:true,
				        data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        }
				    },
				    yAxis: {
				        type: 'value',
						show:true,
						name: '(台)',
						         type : 'value',
						         nameTextStyle:{
						          color:"rgba(125, 166, 239, 1)",
						       lineHeight:8,

						         },
				        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: [10,15,17,20,25,29,32,36,37,34,40,49,55],
							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();
		</script>
	</body>
</html>