代码拉取完成，页面将自动刷新
<!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">
<style>
.main-page{
width: 100%;
}
.page-body,.sub-page-container{
height: 100%;
}
.right-content-wrapper{
padding: 0;
width: 100%;
margin-left: 0;
}
.right-content-wrapper:before{
background: none;
}
.right-content-wrapper:before{
background: none;
}
.right-content-wrapper .right-content-box .content-section{
height: 100%;
}
</style>
</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">
<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()
}
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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手