代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
<!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/steelmaking.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>></li>
<li>炼钢生产区</li>
</ul>
<div class="content-section">
<div class="left-section">
<div class="card1">
<p class="shebei-txt">炼钢生产区</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">设备信息</p>
<div class="img-body flex">
<img class="img-p" src="assets/img/detector.png">
<img class="img-p" src="assets/img/vocs.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">vocs设备</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">14</span><span>/4</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">3D模型</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>
<!-- 下拉框区域 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/swiper.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:"带钢生产区"},
]
});
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();
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化