代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
<!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/dynamicdata.css">
<link rel="stylesheet" href="assets/layui/css/layui.css">
<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
</head>
<body>
<div class="main-page">
<div class="page-body flex">
<div class="sub-page-container">
<div class="right-content-wrapper">
<div class="right-content-box">
<div class="cha">
<img src="assets/img/item4.png">
</div>
<ul class="tags">
<li><</li>
<li>返回</li>
<li> | </li>
<li>有组织</li>
<li>></li>
<li>实时监测</li>
<li>></li>
<li>有组织排放清单</li>
<li>></li>
<li>动态数据</li>
</ul>
<div class="content-section flex page-paifang">
<!-- 我的页面 -->
<div class="main-section">
<div class="card flex">
<span class="card-span">废气治理设施基本情况</span>
<ul class="navigation flex">
<li><div class="date-input day" id="dateBtn"><input type="text" id="date" autocomplete="off" placeholder="请输入查询日期"></div></li>
<li class="navigation-1" onclick="location.href='实时监测.html'">基本信息</li>
<li class="navigation-2" onclick="location.href='动态数据.html'">动态数据</li>
</ul>
</div>
<!-- 中间内容部分 -->
<div class="ec flex">
<div class="ec1" id="region">
</div>
<div class="ec2" id="region2">
</div>
<div class="ec3" id="region3">
</div>
<div class="platfrom dayup"></div>
</div><div class="itme-p">生产设备</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/layui/layui.js"></script>
<script src="assets/js/select.js"></script>
<script src="assets/js/page.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script>
var pageObj = function(){
this.init()
}
pageObj.prototype.init = function() {
// 渲染左侧菜单树
new LeftSiderMenu({
el: ".sub-page-container",
size: 10,
curMenu: "排放清单",
menus: [{
href: "实时监测.html",
text: "实时监测"
},
{
href: "数据分析.html",
text: "数据分析"
},
{
href: "运行状态.html",
text: "运行状态"
},
{
href: "告警分析.html",
text: "告警分析"
},
]
});
// 渲染底部菜单
new Footer({
el: ".main-page",
curMenu: "有组织",
size: 4,
menus: [{
href: "有组织.html",
text: "有组织"
},
{
href: "无组织.html",
text: "无组织"
},
{
href: "车辆出入.html",
text: "清洁运输"
},
{
href: "视频.html",
text: "视频大厅"
}
]
});
layui.use(['laypage', 'laydate'], function(){
let laypage = layui.laypage;
let laydate = layui.laydate;
laypage.render({
elem: 'pagination'
,count: 20
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
,jump: function(obj){
console.log(obj)
}
});
laydate.render({
elem: '#dateBtn'
,type: 'datetime'
,done: function(value, date){
$("#date").val(value)
}
});
})
new SelectPlus({
el: ".platfrom",
data: [{
value: "",
text: "烟尘（mg/m³）"
},
{
value: 1,
text: "烟尘（1mg/m³）"
},
{
value: 2,
text: "烟尘（2mg/m³）"
},
{
value: 3,
text: "烟尘（3mg/m³）"
}
],
done: function(row) {
console.log(row);
}
})
this.initChart1()
this.initChart2();
this.initChart3();
}
pageObj.prototype.initChart1 = function() {
var regionChart=echarts.init(document.getElementById('region'));
regionChart.setOption({
color:['rgba(0, 252, 255, 1)'],
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:{
right:20,
top:80,
icon: "circle",
textStyle:{
color:"#fff"
}
},
xAxis: {
type: 'category',
axisLabel:{
color:"#8995CB"
},
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:"rgba(1,171,220,0.2)"
}
},
data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
},
yAxis: {
name: '生产设备',
type : 'value',
nameTextStyle:{
color:"rgba(125, 166, 239, 1)",
lineHeight: 80,
},
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
color:"#8995CB"
},
splitLine: {
show: true,
lineStyle:{
color:"rgba(35, 63, 141, 1)"
}
}
},
grid:{
bottom:'5%',
right:'5%',
top:'20%'
},
series: [
{
name:"旋转雾化器电流测量",
data: [100, 300,250,50,150,200],type: 'line',
smooth: true,
symbolSize:0,
}
]
});
}
// ec2
pageObj.prototype.initChart2 = function() {
var regionChart=echarts.init(document.getElementById('region2'));
regionChart.setOption({
color:['rgba(224, 93, 231, 1)'],
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:{
right:50,
top:80,
icon: "circle",
textStyle:{
color:"#fff"
}
},
xAxis: {
type: 'category',
axisLabel:{
color:"#8995CB"
},
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:"rgba(1,171,220,0.2)"
}
},
data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
},
yAxis: {
name: '治理设备',
type : 'value',
nameTextStyle:{
color:"rgba(125, 166, 239, 1)",
lineHeight: 80,
},
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
color:"#8995CB"
},
splitLine: {
show: true,
lineStyle:{
color:"rgba(35, 63, 141, 1)"
}
}
},
grid:{
bottom:'5%',
right:'10%',
top:'20%',
},
series: [
{
name:"风机数据2#主抽风机电流",
data: [40, 0,20,10,30,40],type: 'line',
smooth: true,
symbolSize:0,
}
]
});
}
// ec3
pageObj.prototype.initChart3 = function() {
var regionChart=echarts.init(document.getElementById('region3'));
regionChart.setOption({
color:['rgba(0, 113, 249, 1)'],
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:{
right:50,
top:80,
icon: "circle",
textStyle:{
color:"#fff"
}
},
xAxis: {
type: 'category',
axisLabel:{
color:"#8995CB"
},
axisTick:{
show:false
},
axisLine:{
lineStyle:{
color:"rgba(1,171,220,0.2)"
}
},
data: ['03-12', '03-13', '03-14', '03-15','03-16', '03-17']
},
yAxis: {
name: '',
type : 'value',
nameTextStyle:{
color:"rgba(125, 166, 239, 1)",
lineHeight: 20,
},
axisLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
color:"#8995CB"
},
splitLine: {
show: true,
lineStyle:{
color:"rgba(35, 63, 141, 1)"
}
}
},
grid:{
bottom:'5%',
right:'10%',
top:'20%',
},
series: [
{
name:"265m²烧结机头",
data: [5, 6,1,3,4,2],type: 'line',
smooth: true,
symbolSize:0,
}
]
});
}
new pageObj();
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化