代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
<!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/run-state.css">
<link rel="stylesheet" href="assets/css/aqi.css">
</head>
<body>
<div class="main-page page-run-state">
<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>></li>
<li>运行状态</li>
</ul>
<div class="content-section">
<div class="card-section mgb-10">
<p class="card-title">设备投入与使用量</p>
<div class="content-body flex">
<div class="wrate-50" id="deviceChart"></div>
<ul class="wrate-50 circle-plus">
<li class="circle-ui">
<canvas id="deviceTotal"></canvas>
</li>
<li class="circle-ui">
<canvas id="inlineNumber"></canvas>
</li>
<li class="circle-ui">
<canvas id="inlineRate"></canvas>
</li>
<li class="circle-ui">
<canvas id="unlineRate"></canvas>
</li>
</ul>
</div>
</div>
<div class="card-section mgl-10 mgb-10">
<p class="card-title">能耗分析</p>
<div class="content-body relative" id="energy">
<div class="silder-title">
<span class="on">耗电量(kw/h)</span>
<span>耗水量(t)</span>
<span>运行时长(h)</span>
</div>
<div class="type-container">
<ul class="type-ul">
<li>
<div id="weekOfElectricity" class="chart-box"></div>
<div class="bg-box"></div>
</li>
<li class="pd-all-16">
<div class="water-rate" id="waterRate"></div>
</li>
<li class="pd-all-16">
<div class="water-rate" id="timeTotal"></div>
</li>
</ul>
</div>
<div class="lenges lenges-electricity">
<span class="active" target="week">周耗电量</span>
<span target="month">月耗电量</span>
<span target="year">年耗电量</span>
</div>
<div class="lenges lenges-water">
<span class="active" target="week">周耗水量</span>
<span target="month">月耗水量</span>
<span target="year">年耗水量</span>
</div>
</div>
</div>
<div class="card-section">
<p class="card-title">设备启停</p>
<div class="content-body">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>设备名称</th>
<th>设备编号</th>
<th>运行时长(h)</th>
<th>维保时间</th>
<th>维保人</th>
<th>设备类型</th>
<th>所在区域</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td class="complete">监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
<tr>
<td>1</td>
<td>02</td>
<td>02</td>
<td>455</td>
<td>2020-02-02</td>
<td>奥凯洛</td>
<td>监测设备</td>
<td>煤棚1#</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-section mgl-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>
<th>停止类型</th>
<th>运行时长</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td class="complete">现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
<tr>
<td>1</td>
<td>2020-02-02</td>
<td>煤棚1#</td>
<td>4#干雾机</td>
<td>现场手动</td>
<td>远程手动</td>
<td>4小时</td>
</tr>
</tbody>
</table>
</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/page.js"></script>
<script src="assets/js/semicircle.js"></script>
<script src="assets/js/deviceNumber.js"></script>
<script src="assets/js/autoSilder.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script src="assets/js/aqi.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:"告警分析"},
{href:"运行状态.html",text:"运行状态"}
]
});
}
PageObj.prototype.init = function(){
this.initPage();
this.bindEvent();
}
PageObj.prototype.initPage = function(){
let self = this;
new DeviceNumber({
el : "#deviceChart",
data:[
{name:"治理设备",value:100},
{name:"监控设备",value:90},
{name:"监测设备",value:50}
],
colors:['linear-gradient(to top, #4346DA 0%,#2E71EA 100%)','linear-gradient(180deg, #16CEB9 0%, #1159BA 100%)','linear-gradient(180deg, #9569F8 0%, #3E21D6 100%)']
})
new Semicircle({
el:"#deviceTotal",
rate:100,
linearColor:['rgba(31,144,181,0.9)','rgba(22,93,180,1)'],
name:"设备总量",
nameColor:"rgba(40, 180, 255, 1)",
rateColor:"rgba(40, 180, 255, 1)"
});
new Semicircle({
el:"#inlineNumber",
rate:80,
baseCircleColor:"rgba(26,43,167,0.2)",
name:"在线量",
nameColor:"rgba(40, 180, 255, 1)",
rateColor:"rgba(40, 180, 255, 1)"
});
new Semicircle({
el:"#inlineRate",
rate:70,
name:"在线率",
nameColor:"rgba(40, 180, 255, 1)",
linearColor:['rgba(70,39,217,1)','rgba(137,95,243,1)'],
rateColor:"rgba(40, 180, 255, 1)",
linearColor:['rgba(18,99,243,1)','rgba(36,85,232,0.5)'],
});
new Semicircle({
el:"#unlineRate",
value:20,
rate:20,
name:"离线率",
linearColor:['rgba(249,49,105,1)','rgba(175,36,75,1)'],
nameColor:"rgba(40, 180, 255, 1)",
rateColor:"rgba(40, 180, 255, 1)"
});
$("#energy").autoSilder({
navCell:"div.silder-title",
mainCell:"ul.type-ul",
autoPlay:false,
pageChange:function(i){
var electricity = $(".lenges-electricity");
var water = $(".lenges-water");
// 大于等于1隐藏耗电量
if(i<2){
if(i==0){
electricity.css("display","inline-flex");
water.hide();
}else{
electricity.hide();
water.css("display","inline-flex");
}
}else{
$(".lenges").hide();
self.timeTotal.setValue({
value:[
{value: Math.floor(Math.random(100)*100), name: '煤棚1'},
{value: 55, name: '煤棚2'},
{value: 50, name: '煤棚3'},
{value: 44, name: '焦煤棚'},
{value: 42, name: '皮带'},
{value: 41, name: '道路'},
{value: 40, name: '厂界'}
]
})
}
}
})
this.weekOfElectricity = echarts.init(document.getElementById('weekOfElectricity'));
let data = [
{value: 500, name: '煤棚1'},
{value: 535, name: '煤棚2'},
{value: 580, name: '煤棚3'},
{value: 484, name: '焦煤棚'},
{value: 400, name: '皮带'},
{value: 420, name: '道路'},
{value: 440, name: '厂界'}
]
this.weekOfElectricity.setOption({
color:['#28B4FF','#16CEB9','#D5A71D','#B353DF','#DD7F0A','#00BCFE','#DADF2E'],
tooltip: {
trigger: 'item'
},
legend: {
width:300,
right: '12%',
padding:30,
itemGap:30,
y:'center',
icon: "circle",
textStyle:{
color:"#ffffff"
},
formatter: function (name) {
var curData = data.filter(function(item){
return item.name == name
})
return name +" "+ curData[0].value;
}
},
series: [
{
name: '耗电量',
type: 'pie',
center:['20%','50%'],
roseType: 'radius',
label:{
show:false
},
labelLine:{
show:false
},
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
this.waterRate = new Aqi({
el:"#waterRate",
barWidth:6,
showTitle:false,
color:['linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(180deg, #0046B9 0%, #00128C 100%)','linear-gradient(270deg, #67BFD6 0%, #33B136 100%)','linear-gradient(270deg, #2841FF 0%, #51DBFF 100%)','linear-gradient(270deg, #65CE60 0%, #51DBFF 100%)','linear-gradient(270deg, #A379DE 0%, #4B4DAC 100%, #FB8818 100%)','linear-gradient(270deg, #79C8DE 0%, #4B4DAC 100%, #FB8818 100%)'
],
value:[
{name:"煤棚1",value:66},
{name:"煤棚2",value:45},
{name:"煤棚3",value:60},
{name:"焦煤棚",value:78},
{name:"道路",value:188},
{name:"厂界",value:277},
{name:"皮带",value:99}
]
})
this.timeTotal = new Aqi({
el:"#timeTotal",
barWidth:6,
showTitle:false,
orient:"vertical",
color:['linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)','linear-gradient(360deg, #0770EE 0%, #00BBF2 100%)'],
value:[
{name:"煤棚1",value:66},
{name:"煤棚2",value:45},
{name:"煤棚3",value:60},
{name:"焦煤棚",value:78},
{name:"道路",value:188},
{name:"厂界",value:277},
{name:"皮带",value:99}
]
})
}
PageObj.prototype.bindEvent = function(){
var self = this;
let data = [
{value: 50, name: '煤棚1'},
{value: 55, name: '煤棚2'},
{value: 50, name: '煤棚3'},
{value: 44, name: '焦煤棚'},
{value: 42, name: '皮带'},
{value: 41, name: '道路'},
{value: 40, name: '厂界'}
];
let data1 = [
{value: 70, name: '煤棚1'},
{value: 55, name: '煤棚2'},
{value: 50, name: '煤棚3'},
{value: 44, name: '焦煤棚'},
{value: 82, name: '皮带'},
{value: 141, name: '道路'},
{value: 40, name: '厂界'}
];
let data2 = [
{value: 170, name: '煤棚1'},
{value: 155, name: '煤棚2'},
{value: 150, name: '煤棚3'},
{value: 144, name: '焦煤棚'},
{value: 182, name: '皮带'},
{value: 141, name: '道路'},
{value: 140, name: '厂界'}
];
// 耗电量切换
$("body").on("click",".lenges-electricity span",function(ele){
var target = $(this).attr("target");
$(this).siblings("span").removeClass("active");
$(this).addClass("active");
self.weekOfElectricity.setOption({
legend: {
width:300,
formatter: function (name) {
var d = target=="week"?data:target=="month"?data1:data2
var curData = d.filter(function(item){
return item.name == name
})
return name +" "+ curData[0].value;
}
},
series: [
{
name: '耗电量',
data: target=="week"?data:target=="month"?data1:data2
}
]
})
})
// 耗水量切换
$("body").on("click",".lenges-water span",function(ele){
$(this).siblings("span").removeClass("active");
$(this).addClass("active");
self.waterRate.setValue({
value:[
{name:"煤棚1",value:Math.floor(Math.random(100)*100)},
{name:"煤棚2",value:Math.floor(Math.random(100)*100)},
{name:"煤棚3",value:Math.floor(Math.random(100)*100)},
{name:"焦煤棚",value:Math.floor(Math.random(100)*100)},
{name:"道路",value:Math.floor(Math.random(100)*100)},
{name:"厂界",value:Math.floor(Math.random(100)*100)},
{name:"皮带",value:Math.floor(Math.random(100)*100)}
]
});
})
}
window.onload = function(){
new PageObj();
}
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化