代码拉取完成，页面将自动刷新
<!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/pidai.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="table-clear">
<div class="fl left">
<div class="divlift">
<p class="card-title">皮带通廊</p>
<div class="shuzhi">
<div>
<canvas id="deviceTotal" width="120" height="100"></canvas>
</div>
<div>
<canvas id="inlineNumber" width="120" height="100"></canvas>
</div>
<div>
<canvas id="inlineRate" width="120" height="100"></canvas>
</div>
</div>
<div class="jian">
<div class="fl">
<span class="imgspan"></span>
<span>检测仪</span>
<span>
<b>62</b>
/68
</span>
</div>
<div class="fr">
<span class="imgspan jiankong"></span>
<span>监控设备</span>
<span>
<b>62</b>
/68
</span>
</div>
</div>
</div>
<div class="divbottom ">
<p class="card-title">检测设备数据</p>
<div class="table-box">
<div class="left-box pdl-4 pdr-4">
<table class="table">
<thead>
<tr>
<th class="no">编号</th>
<th class="date">位置</th>
<th>粉尘灰</th>
<th>时间</th>
</tr>
</thead>
<tbody class="tbody" id="tbody">
<tr>
<td class="no">1</td>
<td class="date">115#机头</td>
<td>0.052</td>
<td>10：18：12</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
<tr>
<td class="no">1</td>
<td class="date">2021-03-12</td>
<td>道路</td>
<td>4#干雾机</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="fr divright">
<!-- <p class="card-title">皮带运作</p>
<div class="yunxing posir">
<div class="disinb shanpi posir">
<img src="./assets/皮带_slices/编组5.png" class="shan" alt="山">
<span class="mt-5 disinb">煤场</span>
<div class="qu">
<img src="./assets/皮带_slices/编组6备份.png" class="wan" alt="">
<span>取料机</span>
</div>
</div>
<span class="mt-5 disinb shu xian xia"></span>
<div class="posir disinb shou">
<span>受煤坑</span>
<img src="./assets/皮带_slices/编组8(1).png" class="" alt="">
</div>
<span class="disinb ping heng hengxian"></span>
<span class="disinb shu duanxia duanxi"></span>
<div class="pidai posir">
<span class="lun disinb"></span>
<span>105</span>
<span class="pi disinb">皮带</span>
<span class="lun disinb xialun"></span>
</div>
<span class="disinb shu duanxia changxia"></span>
<div class="pidai changpi posir">
<span class="lun disinb"></span>
<span style="display: inline-block;
margin-top: calc(5px + 20px);">106</span>
<span class="pi disinb">皮带</span>
<span class="lun disinb xialun"></span>
</div>
<span class="disinb shu duanxia xiapi"></span>
<div class=" posir duanpi">
<span class="lun disinb"></span>
<span>105</span>
<span class="pi disinb">皮带</span>
<span class="lun disinb xialun"></span>
</div>
<span class="disinb shu duanxia xiapi xiapi-di"></span>
<div class="jifen">
<div>710粉碎机</div>
<div>1250粉碎机</div>
</div>
<span class="disinb ping heng heng-zuo posir"></span>
<span class="disinb shu duanxia sxshang"></span>
<span class="mt-5 disinb shu sxxia xia"></span>
<span class="disinb ping heng heng-zuo-shang posir"></span>
</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/semicircle.js"></script>
<script src="assets/js/page.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.bindEvent();
}
pageObj.prototype.bindEvent = function () {
let self = this;
new Semicircle({
el: "#deviceTotal",
rate: 100,
linearColor: ['rgba(17, 93, 185, 1)', 'rgba(64, 255, 206, 1)'],
name: "设备总量",
nameColor: "rgba(255, 255, 255, 1)",
rateColor: "rgba(255, 255, 255, 1)",
nameFontSize: 12,
lineWidth: 5,
lineHeight: 3,
nameBottom: 2,
lineMargin: 0,
});
new Semicircle({
el: "#inlineNumber",
rate: 25,
linearColor: ['rgba(11, 102, 254, 1)', 'rgba(67, 71, 212, 1)'],
name: "在线量",
nameColor: "rgba(255, 255, 255, 1)",
rateColor: "rgba(255, 255, 255, 1)",
nameFontSize: 12,
lineWidth: 5,
lineHeight: 3,
nameBottom: 2,
lineMargin: 0,
});
new Semicircle({
el: "#inlineRate",
rate: 50,
name: "离线设备",
nameColor: "rgba(255, 255, 255, 1)",
linearColor: ['rgba(186, 56, 121, 1)', 'rgba(172, 11, 126, 1)'],
baseCircleColor: "RGBA(65, 43, 99, 1)",
rateColor: "rgba(255, 255, 255, 1)",
nameFontSize: 12,
lineWidth: 5,
lineHeight: 3,
nameBottom: 2,
lineMargin: 0,
});
}
new pageObj();
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
