You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2386 lines
61 KiB
2386 lines
61 KiB
<#include "../../_include/_t.ftl"/>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<#include "../../_include/_h.ftl"/>
|
|
<#include "../../_include/_l.ftl"/>
|
|
<#include "../../_include/_j.ftl"/>
|
|
<#include "../../_include/_e.ftl"/>
|
|
<#include "../../_include/_z.ftl"/>
|
|
<#include "../../_include/_m.ftl"/>
|
|
<#include "../../_include/_p.ftl"/>
|
|
<#include "../../_include/work/_c_0.ftl"/>
|
|
<link href="${ctx}/style/lscss/style.css" type="text/css" rel="stylesheet">
|
|
<style type="text/css">
|
|
.layui-side{
|
|
background: url(${ctx}/style/cls1/img/nb-con.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.page_content{
|
|
background: url(${ctx}/style/cls1/img/nb-con.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.layui-form ,.layui-border-box ,.layui-table-view{
|
|
box-sizing:border-box;
|
|
}
|
|
.layui-layer-iframe .layui-layer-content{
|
|
padding:0px;
|
|
}
|
|
.td_class{
|
|
border:solid 1px #0060bf;
|
|
font-size:18px;
|
|
font-weight:bold;
|
|
text-align:center;
|
|
height:40px;
|
|
line-height:40px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.tr_class{
|
|
border:solid 1px #0060bf;
|
|
font-size:18px;
|
|
text-align:center;
|
|
height:40px;
|
|
line-height:40px;
|
|
vertical-align:middle;
|
|
}
|
|
._tr_class{
|
|
border:solid 1px #0060bf;
|
|
font-size:18px;
|
|
text-align:center;
|
|
height:40px;
|
|
line-height:40px;
|
|
vertical-align:middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="layui-layout-body">
|
|
<!--<div class="layui-layout layui-layout-admin">-->
|
|
<!--菜单-->
|
|
<div class="layui-side layui-bg-blue" style="display:none;">
|
|
<div class="layui-side-scroll">
|
|
<ul class="layui-nav layui-nav-tree">
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" id="record_0_01">设备信息统计分析</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed layui-this">
|
|
<a href="javascript:void(0);" id="record_0_02">报警预警统计分析</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 内容主体区域 -->
|
|
<div class="layui-body">
|
|
<div class="page_content">
|
|
<div id="record_0_01_div" class="layui-hide" style="padding:20px;padding-top: 40px;box-sizing:border-box;">
|
|
<!-- <input type="hidden" id="record_0_01_div_load" value="1"/>
|
|
<div style="float:left;width:350px;height:100%;margin:0;padding:0;overflow:auto;">
|
|
<blockquote class="layui-elem-quote page_blockquote">行政区划［点击节点查询可查询下辖企业单位列表］</blockquote>
|
|
<button id="record0_region_refreshBtn" class="layui-btn layui-btn-normal layui-btn-xs" style="float:right;margin:5px 5px 0 0;"><i class="layui-icon"></i>刷新行政区划树</button>
|
|
<ul id="record0_rgTree" class="ztree page_tree"></ul>
|
|
</div> -->
|
|
<div style="">
|
|
<div class="page_tools">
|
|
<!-- <div class="layui-inline" style="width:360px;">
|
|
<input class="layui-input" id="record0_socName" placeholder="企业单位名称（支持模糊）" autocomplete="off"/>
|
|
</div> -->
|
|
<div class="layui-inline layui-form" style="width:200px;">
|
|
<select id="record0_timet" lay-filter="record0_timet_filter">
|
|
<option value="0" selected>自定义</option>
|
|
<option value="1">上日</option>
|
|
<option value="2">周</option>
|
|
<option value="3">月</option>
|
|
<option value="4">季度</option>
|
|
<option value="5">年</option>
|
|
</select>
|
|
</div>
|
|
<div id="record_0_time" style="float: left;">
|
|
<div class="layui-inline" style="width:110px;">
|
|
<input class="layui-input" type="text" id="beginTime" value="${.now?string('yyyy-MM-dd')}" placeholder="年份" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
|
|
</div>
|
|
<div class="layui-inline">到</div>
|
|
<div class="layui-inline" style="width:110px;">
|
|
<input class="layui-input" type="text" id="endTime" value="${.now?string('yyyy-MM-dd')}" placeholder="年份" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
|
|
</div>
|
|
</div>
|
|
<button id="record0_queryBtn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>查询</button>
|
|
<button id="record0_resetBtn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>重置</button>
|
|
<button id="record0_exp1Btn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>导出</button>
|
|
<a id="record0_exp1a" href="${ctx}/_files/_p/设备信息分析统计.pdf" download="设备信息分析统计"></a>
|
|
</div>
|
|
<h1 style="text-align:center;margin:60px 0;">设备统计</h1>
|
|
<table width="90%" style="border:solid 1px #bce8f1;margin:10px auto;border:solid 1px rgb(221, 221, 221);border-radius:5px;">
|
|
<thead>
|
|
<th class="td_class">设备类型</th>
|
|
<th class="td_class">设备总数</th>
|
|
<th class="td_class">在线设备数</th>
|
|
<th class="td_class">离线设备数</th>
|
|
<th class="td_class">报警次数</th>
|
|
<th class="td_class">故障次数</th>
|
|
</thead>
|
|
<tbody id="table_data">
|
|
<tr>
|
|
<!-- <td colspan="6" class="_tr_class">暂无数据</td> -->
|
|
<td class="_tr_class">电气火灾设备</td>
|
|
<td class="_tr_class">50</td>
|
|
<td class="_tr_class">49</td>
|
|
<td class="_tr_class">1</td>
|
|
<td class="_tr_class">11</td>
|
|
<td class="_tr_class">1</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- <td colspan="6" class="_tr_class">暂无数据</td> -->
|
|
<td class="_tr_class">建筑消防用水设备</td>
|
|
<td class="_tr_class">30</td>
|
|
<td class="_tr_class">20</td>
|
|
<td class="_tr_class">10</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">1</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- <td colspan="6" class="_tr_class">暂无数据</td> -->
|
|
<td class="_tr_class">智慧独立烟感设备</td>
|
|
<td class="_tr_class">100</td>
|
|
<td class="_tr_class">100</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">11</td>
|
|
<td class="_tr_class">0</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- <td colspan="6" class="_tr_class">暂无数据</td> -->
|
|
<td class="_tr_class">可燃气体监测设备</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">0</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- <td colspan="6" class="_tr_class">暂无数据</td> -->
|
|
<td class="_tr_class">自动联网报警设备</td>
|
|
<td class="_tr_class">1</td>
|
|
<td class="_tr_class">1</td>
|
|
<td class="_tr_class">0</td>
|
|
<td class="_tr_class">2</td>
|
|
<td class="_tr_class">0</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- ============================================================================================================================== -->
|
|
<h1 style="text-align:center;margin:60px 0;">电气火灾设备</h1>
|
|
<div class="sbyxqk" style="float: left;">
|
|
<div class="sbyxqkl fl">
|
|
<div id="yhbz" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhbz'));
|
|
var data = [
|
|
{
|
|
value: 49,
|
|
name: '正常'
|
|
},
|
|
{
|
|
value: 1,
|
|
name: '离线'
|
|
}
|
|
];
|
|
var color = ['#00d8ff', '#d59d2a'];
|
|
var data1 = data[0].value + data[1].value;
|
|
var baseData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
baseData.push({
|
|
value: data[i].value,
|
|
name: data[i].name,
|
|
|
|
});
|
|
}
|
|
var option = {
|
|
color: color,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: 'bottom',
|
|
left: '90',
|
|
width: '90%',
|
|
height: '80%',
|
|
|
|
},
|
|
series: [{
|
|
zlevel: 1,
|
|
name: '设备总数',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
radius: ['70%', '80%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
|
|
}
|
|
},
|
|
data: baseData
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
hoverAnimation: false,
|
|
radius: ['70%', '80%'],
|
|
data: [{
|
|
"value": data1,
|
|
"name": "",
|
|
"label": {
|
|
"normal": {
|
|
"show": true,
|
|
"formatter": '{c|{c}} \n {a|设备总数}',
|
|
rich: {
|
|
c: {
|
|
align: 'center',
|
|
color: '#ffffff',
|
|
fontSize: 36,
|
|
lineHeight: 36
|
|
},
|
|
a: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16,
|
|
lineHeight: 5
|
|
},
|
|
},
|
|
"position": "center"
|
|
|
|
}
|
|
}
|
|
}, ]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="sbyxqkr fr">
|
|
<div id="yhzz" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhzz'));
|
|
var option = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: "category",
|
|
inverse: true,
|
|
data: ['报警数', '故障数'],
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}, ],
|
|
grid: {
|
|
top: '5%',
|
|
left: 5,
|
|
height: "100%",
|
|
right: 0
|
|
},
|
|
series: [
|
|
|
|
{
|
|
// current data
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbolClip: true,
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [-30, -20],
|
|
textStyle: {
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
"value": 11,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#f03329"
|
|
}
|
|
},
|
|
},
|
|
{
|
|
"value": 1,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#d59d2a"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
// full data
|
|
type: 'pictorialBar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#084082'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: 'darkorange',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
animationDuration: 0,
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbol: 'rect',
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
data: [{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin:87px 146px;">
|
|
<p style="text-indent: 2em;">周期内用电安全监测情况：报警次数总计<span style="text-decoration: underline;">11</span>次。</p>
|
|
<p style="text-indent: 2em;">漏电电流报警为<span style="text-decoration: underline;">1</span>次，线缆温度报警为<span style="text-decoration: underline;">3</span>次，电流报警为<span
|
|
style="text-decoration: underline;">5</span>次，电压报警为<span style="text-decoration: underline;">2</span>次。</p>
|
|
<p style="text-indent: 2em;">报警设备<span style="text-decoration: underline;">3</span>个，其中<span style="text-decoration: underline;">电流</span>报警次数最多。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx'));
|
|
var qwee = [{
|
|
name: '漏电电流报警',
|
|
value: '1'
|
|
}, {
|
|
name: '线缆温度报警',
|
|
value: '3'
|
|
}, {
|
|
name: '电流报警',
|
|
value: '5'
|
|
}, {
|
|
name: '电压报警',
|
|
value: '2'
|
|
}];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<!-- ============================================================================================================================== -->
|
|
<h1 style="text-align:center;margin:60px 0;">建筑消防用水设备</h1>
|
|
<div class="sbyxqk" style="float: left;">
|
|
<div class="sbyxqkl fl">
|
|
<div id="yhbz1" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhbz1'));
|
|
var data = [
|
|
{
|
|
value: 20,
|
|
name: '正常'
|
|
},
|
|
{
|
|
value: 10,
|
|
name: '离线'
|
|
}
|
|
];
|
|
var color = ['#00d8ff', '#d59d2a'];
|
|
var data1 = data[0].value + data[1].value;
|
|
var baseData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
baseData.push({
|
|
value: data[i].value,
|
|
name: data[i].name,
|
|
|
|
});
|
|
}
|
|
var option = {
|
|
color: color,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: 'bottom',
|
|
left: '90',
|
|
width: '90%',
|
|
height: '80%',
|
|
|
|
},
|
|
series: [{
|
|
zlevel: 1,
|
|
name: '设备总数',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
radius: ['70%', '80%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
|
|
}
|
|
},
|
|
data: baseData
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
hoverAnimation: false,
|
|
radius: ['70%', '80%'],
|
|
data: [{
|
|
"value": data1,
|
|
"name": "",
|
|
"label": {
|
|
"normal": {
|
|
"show": true,
|
|
"formatter": '{c|{c}} \n {a|设备总数}',
|
|
rich: {
|
|
c: {
|
|
align: 'center',
|
|
color: '#ffffff',
|
|
fontSize: 36,
|
|
lineHeight: 36
|
|
},
|
|
a: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16,
|
|
lineHeight: 5
|
|
},
|
|
},
|
|
"position": "center"
|
|
|
|
}
|
|
}
|
|
}, ]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="sbyxqkr fr">
|
|
<div id="yhzz1" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhzz1'));
|
|
var option = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: "category",
|
|
inverse: true,
|
|
data: ['报警数', '故障数'],
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}, ],
|
|
grid: {
|
|
top: '5%',
|
|
left: 5,
|
|
height: "100%",
|
|
right: 0
|
|
},
|
|
series: [
|
|
|
|
{
|
|
// current data
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbolClip: true,
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [-30, -20],
|
|
textStyle: {
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#f03329"
|
|
}
|
|
},
|
|
},
|
|
{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#d59d2a"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
// full data
|
|
type: 'pictorialBar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#084082'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: 'darkorange',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
animationDuration: 0,
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbol: 'rect',
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
data: [{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin:87px 146px;width: 582px;">
|
|
<p style="text-indent: 2em;">周期内建筑消防用水监测情况：报警次数总计<span style="text-decoration: underline;">0</span>次。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx1" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx1'));
|
|
var qwee = [{
|
|
name: '水压报警',
|
|
value: '0'
|
|
}, {
|
|
name: '液位报警',
|
|
value: '0'
|
|
}];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<!-- ============================================================================================================================== -->
|
|
<h1 style="text-align:center;margin:60px 0;">智慧独立烟感设备</h1>
|
|
<div class="sbyxqk" style="float: left;">
|
|
<div class="sbyxqkl fl">
|
|
<div id="yhbz2" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhbz2'));
|
|
var data = [
|
|
{
|
|
value: 100,
|
|
name: '正常'
|
|
},
|
|
{
|
|
value: 0,
|
|
name: '离线'
|
|
}
|
|
];
|
|
var color = ['#00d8ff', '#d59d2a'];
|
|
var data1 = data[0].value + data[1].value;
|
|
var baseData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
baseData.push({
|
|
value: data[i].value,
|
|
name: data[i].name,
|
|
|
|
});
|
|
}
|
|
var option = {
|
|
color: color,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: 'bottom',
|
|
left: '90',
|
|
width: '90%',
|
|
height: '80%',
|
|
|
|
},
|
|
series: [{
|
|
zlevel: 1,
|
|
name: '设备总数',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
radius: ['70%', '80%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
|
|
}
|
|
},
|
|
data: baseData
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
hoverAnimation: false,
|
|
radius: ['70%', '80%'],
|
|
data: [{
|
|
"value": data1,
|
|
"name": "",
|
|
"label": {
|
|
"normal": {
|
|
"show": true,
|
|
"formatter": '{c|{c}} \n {a|设备总数}',
|
|
rich: {
|
|
c: {
|
|
align: 'center',
|
|
color: '#ffffff',
|
|
fontSize: 36,
|
|
lineHeight: 36
|
|
},
|
|
a: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16,
|
|
lineHeight: 5
|
|
},
|
|
},
|
|
"position": "center"
|
|
|
|
}
|
|
}
|
|
}, ]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="sbyxqkr fr">
|
|
<div id="yhzz2" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhzz2'));
|
|
var option = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: "category",
|
|
inverse: true,
|
|
data: ['报警数', '故障数'],
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}, ],
|
|
grid: {
|
|
top: '5%',
|
|
left: 5,
|
|
height: "100%",
|
|
right: 0
|
|
},
|
|
series: [
|
|
|
|
{
|
|
// current data
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbolClip: true,
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [-30, -20],
|
|
textStyle: {
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
"value": 11,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#f03329"
|
|
}
|
|
},
|
|
},
|
|
{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#d59d2a"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
// full data
|
|
type: 'pictorialBar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#084082'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: 'darkorange',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
animationDuration: 0,
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbol: 'rect',
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
data: [{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin:87px 146px;width: 582px;">
|
|
<p style="text-indent: 2em;">周期内智慧独立烟感监测情况：报警次数总计<span style="text-decoration: underline;">11</span>次。</p>
|
|
<p style="text-indent: 2em;">烟感报警为<span style="text-decoration: underline;">11</span>次，温度报警为<span style="text-decoration: underline;">0</span>次。</p>
|
|
<p style="text-indent: 2em;">报警设备<span style="text-decoration: underline;">5</span>个，其中<span style="text-decoration: underline;">烟感报警</span>报警次数最多。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx2" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx2'));
|
|
var qwee = [{
|
|
name: '烟感报警',
|
|
value: '11'
|
|
}, {
|
|
name: '温度报警',
|
|
value: '0'
|
|
},];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
|
|
<!-- ============================================================================================================================== -->
|
|
<h1 style="text-align:center;margin:60px 0;">可燃气体监测设备</h1>
|
|
<div class="sbyxqk" style="float: left;">
|
|
<div class="sbyxqkl fl">
|
|
<div id="yhbz3" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhbz3'));
|
|
var data = [
|
|
{
|
|
value: 0,
|
|
name: '正常'
|
|
},
|
|
{
|
|
value: 0,
|
|
name: '离线'
|
|
}
|
|
];
|
|
var color = ['#00d8ff', '#d59d2a'];
|
|
var data1 = data[0].value + data[1].value;
|
|
var baseData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
baseData.push({
|
|
value: data[i].value,
|
|
name: data[i].name,
|
|
|
|
});
|
|
}
|
|
var option = {
|
|
color: color,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: 'bottom',
|
|
left: '90',
|
|
width: '90%',
|
|
height: '80%',
|
|
|
|
},
|
|
series: [{
|
|
zlevel: 1,
|
|
name: '设备总数',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
radius: ['70%', '80%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
|
|
}
|
|
},
|
|
data: baseData
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
hoverAnimation: false,
|
|
radius: ['70%', '80%'],
|
|
data: [{
|
|
"value": data1,
|
|
"name": "",
|
|
"label": {
|
|
"normal": {
|
|
"show": true,
|
|
"formatter": '{c|{c}} \n {a|设备总数}',
|
|
rich: {
|
|
c: {
|
|
align: 'center',
|
|
color: '#ffffff',
|
|
fontSize: 36,
|
|
lineHeight: 36
|
|
},
|
|
a: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16,
|
|
lineHeight: 5
|
|
},
|
|
},
|
|
"position": "center"
|
|
|
|
}
|
|
}
|
|
}, ]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="sbyxqkr fr">
|
|
<div id="yhzz3" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhzz3'));
|
|
var option = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: "category",
|
|
inverse: true,
|
|
data: ['报警数', '故障数'],
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}, ],
|
|
grid: {
|
|
top: '5%',
|
|
left: 5,
|
|
height: "100%",
|
|
right: 0
|
|
},
|
|
series: [
|
|
|
|
{
|
|
// current data
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbolClip: true,
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [-30, -20],
|
|
textStyle: {
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#f03329"
|
|
}
|
|
},
|
|
},
|
|
{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#d59d2a"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
// full data
|
|
type: 'pictorialBar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#084082'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: 'darkorange',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
animationDuration: 0,
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbol: 'rect',
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
data: [{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin:87px 146px;width: 582px">
|
|
<p style="text-indent: 2em;">周期内可燃气体监测情况：报警次数总计<span style="text-decoration: underline;">0</span>次。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx3" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx3'));
|
|
var qwee = [{
|
|
name: '可燃气体报警',
|
|
value: '0'
|
|
}];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<!-- ============================================================================================================================== -->
|
|
<h1 style="text-align:center;margin:60px 0;">自动联网报警设备</h1>
|
|
<div class="sbyxqk" style="float: left;">
|
|
<div class="sbyxqkl fl">
|
|
<div id="yhbz4" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhbz4'));
|
|
var data = [
|
|
{
|
|
value: 1,
|
|
name: '正常'
|
|
},
|
|
{
|
|
value: 0,
|
|
name: '离线'
|
|
}
|
|
];
|
|
var color = ['#00d8ff', '#d59d2a'];
|
|
var data1 = data[0].value + data[1].value;
|
|
var baseData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
baseData.push({
|
|
value: data[i].value,
|
|
name: data[i].name,
|
|
|
|
});
|
|
}
|
|
var option = {
|
|
color: color,
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: 'bottom',
|
|
left: '90',
|
|
width: '90%',
|
|
height: '80%',
|
|
|
|
},
|
|
series: [{
|
|
zlevel: 1,
|
|
name: '设备总数',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
radius: ['70%', '80%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
|
|
}
|
|
},
|
|
data: baseData
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
selectedMode: 'false',
|
|
hoverAnimation: false,
|
|
radius: ['70%', '80%'],
|
|
data: [{
|
|
"value": data1,
|
|
"name": "",
|
|
"label": {
|
|
"normal": {
|
|
"show": true,
|
|
"formatter": '{c|{c}} \n {a|设备总数}',
|
|
rich: {
|
|
c: {
|
|
align: 'center',
|
|
color: '#ffffff',
|
|
fontSize: 36,
|
|
lineHeight: 36
|
|
},
|
|
a: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16,
|
|
lineHeight: 5
|
|
},
|
|
},
|
|
"position": "center"
|
|
|
|
}
|
|
}
|
|
}, ]
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div class="sbyxqkr fr">
|
|
<div id="yhzz4" style="width:100%;height:100%; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('yhzz4'));
|
|
var option = {
|
|
tooltip: {},
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: "category",
|
|
inverse: true,
|
|
data: ['报警数', '故障数'],
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}, ],
|
|
grid: {
|
|
top: '5%',
|
|
left: 5,
|
|
height: "100%",
|
|
right: 0
|
|
},
|
|
series: [
|
|
|
|
{
|
|
// current data
|
|
type: 'pictorialBar',
|
|
symbol: 'rect',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbolClip: true,
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [-30, -20],
|
|
textStyle: {
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
data: [{
|
|
"value": 2,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#f03329"
|
|
}
|
|
},
|
|
},
|
|
{
|
|
"value": 0,
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#d59d2a"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}, {
|
|
// full data
|
|
type: 'pictorialBar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#084082'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: 'darkorange',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
animationDuration: 0,
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: '20%',
|
|
symbol: 'rect',
|
|
symbolSize: [7, 14],
|
|
symbolBoundingData: 100,
|
|
data: [{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"value": 100,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [-10, -14],
|
|
formatter: '{b}',
|
|
offset: [10, 0],
|
|
textStyle: {
|
|
color: '#b5e0ff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
z: 99999,
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function(dataIndex, params) {
|
|
return params.index * 30;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin:87px 146px;width: 582px">
|
|
<p style="text-indent: 2em;">周期内自动联网报警设备监测情况：报警次数总计<span style="text-decoration: underline;">2</span>次。</p>
|
|
<p style="text-indent: 2em;">手动火警报警为<span style="text-decoration: underline;">2</span>次。</p>
|
|
<p style="text-indent: 2em;">报警设备<span style="text-decoration: underline;">1</span>个，其中<span style="text-decoration: underline;">手动火警报警</span>报警次数最多。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx4" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx4'));
|
|
var qwee = [{
|
|
name: '手动火警报警',
|
|
value: '2'
|
|
}];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;height:50px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================================================================================== -->
|
|
<div id="record_0_02_div" class="layui-show" style="padding:20px;padding-top: 40px;box-sizing:border-box;">
|
|
<input type="hidden" id="record_0_02_div_load"/>
|
|
<div style="float:left;width:350px;height:100%;margin:0;padding:0;overflow:auto;">
|
|
<blockquote class="layui-elem-quote page_blockquote">组织机构</blockquote>
|
|
<button id="record0_region_mini_refreshBtn" class="layui-btn layui-btn-normal layui-btn-xs" style="float:right;margin:5px 5px 0 0;"><i class="layui-icon"></i>刷新组织机构树</button>
|
|
<ul id="record0_mini_rgTree" class="ztree page_tree"></ul>
|
|
</div>
|
|
<div style="margin-left:365px;height:calc(100vh - 102px);">
|
|
<div class="page_tools">
|
|
<!-- <div class="layui-inline" style="width:360px;">
|
|
<input class="layui-input" id="record0_socName" placeholder="企业单位名称（支持模糊）" autocomplete="off"/>
|
|
</div> -->
|
|
<div class="layui-inline layui-form" style="width:200px;">
|
|
<select id="record0_timet1" lay-filter="record0_timet1_filter">
|
|
<option value="0" selected>自定义</option>
|
|
<option value="1">上日</option>
|
|
<option value="2">周</option>
|
|
<option value="3">月</option>
|
|
<option value="4">季度</option>
|
|
<option value="5">年</option>
|
|
</select>
|
|
</div>
|
|
<div id="record_0_time1" style="float: left;">
|
|
<div class="layui-inline" style="width:110px;">
|
|
<input class="layui-input" type="text" id="beginTime1" value="2020-06-01" placeholder="年份" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
|
|
</div>
|
|
<div class="layui-inline">到</div>
|
|
<div class="layui-inline" style="width:110px;">
|
|
<input class="layui-input" type="text" id="endTime1" value="2020-06-30" placeholder="年份" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
|
|
</div>
|
|
</div>
|
|
<button id="record0_queryBtn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>查询</button>
|
|
<button id="record0_resetBtn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>重置</button>
|
|
<button id="record0_exp2Btn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>导出</button>
|
|
<a id="record0_exp2a" href="${ctx}/_files/_p/报警预警统计分析.pdf" download="报警预警统计分析"></a>
|
|
</div>
|
|
<div>
|
|
<!-- win2 -------------------------------------------------------------------------------------------------------------------------------------->
|
|
<h1 style="text-align:center;margin:60px 0;"><span id="bjName"></span>报警统计</h1>
|
|
|
|
<div id="bjqstj" style="width:1400px;height:300px; "></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjqstj'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#155895'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '1%',
|
|
bottom: '1%',
|
|
top: '20%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#155895'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: '#b5e0ff'
|
|
}
|
|
},
|
|
data: ['2020-06-01', '2020-06-02', '2020-6-03', '2020-06-04', '2020-06-05', '2020-06-06', '2020-06-07',
|
|
'2020-06-08', '2020-06-09', '2020-06-10', '2020-06-11', '2020--6-12', '2020-06-13',
|
|
'2020-06-14', '2020-06-15', '2020-06-16', '2020-06-17', '2020-06-18', '2020-06-19', '2020-06-20',
|
|
'2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27',
|
|
'2020-06-28', '2020-06-29', '2020-06-30'
|
|
]
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '次数',
|
|
nameTextStyle: {
|
|
color: "#b5e0ff"
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#155895'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: '#b5e0ff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#155895'
|
|
}
|
|
},
|
|
}],
|
|
series: [{
|
|
name: '报警次数',
|
|
type: 'line',
|
|
symbolSize: 5,
|
|
data: [16, 20, 36, 58, 22, 40, 75, 16, 20, 36, 58, 22, 40, 75, 16, 20, 36, 58, 22, 40, 75, 16, 20, 36,
|
|
58, 40, 75, 16, 20, 36
|
|
],
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(61, 205, 249, 0.9)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(61, 205, 249, 0.1)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(61, 205, 249)',
|
|
borderWidth: 1
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div style="float: left;margin:87px 126px;width: 582px">
|
|
<p style="text-indent: 2em;">周期内共发生报警<span style="text-decoration: underline;">53</span>次，其中电气火灾监测系统报警<span style="text-decoration: underline;">25</span>次，建筑消防用水报警<span
|
|
style="text-decoration: underline;">35</span>次，烟感报警<span style="text-decoration: underline;">15</span>次，可燃气体报警<span
|
|
style="text-decoration: underline;">0</span>次，火自报<span
|
|
style="text-decoration: underline;">13</span>次。</p>
|
|
<p style="text-indent: 2em;">短信提醒发送<span style="text-decoration: underline;">53</span>条，语音提醒发送<span style="text-decoration: underline;">53</span>次。</p>
|
|
<p style="text-indent: 2em;">其中<span style="text-decoration: underline;">电气火灾监测系统</span>报警次数最多。</p>
|
|
</div>
|
|
<div style="float: left;">
|
|
<div id="bjlx11" style="width:400px;height:300px;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('bjlx11'));
|
|
var qwee = [{
|
|
name: '电气火灾',
|
|
value: '25'
|
|
}, {
|
|
name: '消防水',
|
|
value: '35'
|
|
}, {
|
|
name: '烟感',
|
|
value: '15'
|
|
}, {
|
|
name: '火自报',
|
|
value: '13'
|
|
}, {
|
|
name: '可燃气体',
|
|
value: '0'
|
|
}];
|
|
var option = {
|
|
grid: {
|
|
left: '20%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: qwee,
|
|
left: '10%',
|
|
right: '6%',
|
|
bottom: '0%',
|
|
textStyle: {
|
|
color: '#b2d6ff',
|
|
fontsize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 6
|
|
},
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
series: [{
|
|
color: ['#2fa9ff', '#ac60f6', '#fecf52', '#64dbfb', '#e4f467'],
|
|
type: 'pie',
|
|
radius: ['28%', '66%'],
|
|
labelLine: {
|
|
normal: {
|
|
length: 15,
|
|
length2: 70,
|
|
lineStyle: {
|
|
type: 'solid'
|
|
}
|
|
}
|
|
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
console.log(params);
|
|
return '{c|' + params.percent.toFixed(0) + '%}'
|
|
},
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
padding: [0, -36],
|
|
height: 40,
|
|
fontSize: 13,
|
|
align: 'center',
|
|
color: '#b2d6ff',
|
|
rich: {
|
|
c: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: '#b2d6ff'
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
data: qwee
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['74%', '75%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '21%'],
|
|
data: [100],
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
<div style="clear: both;height:50px"></div>
|
|
</div>
|
|
|
|
|
|
<!-- win2结束 -------------------------------------------------------------------------------------------------------------------------------------->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--</div>-->
|
|
|
|
|
|
<script type="text/javascript">
|
|
layuiplus.on_w_1(function(){
|
|
layuiplus.init(1);
|
|
//菜单监控
|
|
/*$("a[id^='record_0_']").each(function(i){
|
|
var _this = $(this);
|
|
_this.click(function(){
|
|
var _id = _this.attr("id");
|
|
$("div[class='layui-show']").removeClass("layui-show").addClass("layui-hide");
|
|
$("#"+_id+"_div").removeClass("layui-hide").addClass("layui-show");
|
|
});
|
|
});*/
|
|
form.on("select(record0_timet_filter)",function(data){
|
|
console.log(data.value);
|
|
if(data.value == '0'){
|
|
$("#record_0_time").show();
|
|
}else{
|
|
$("#record_0_time").hide();
|
|
}
|
|
});
|
|
|
|
form.on("select(record0_timet1_filter)",function(data){
|
|
console.log(data.value);
|
|
if(data.value == '0'){
|
|
$("#record_0_time1").show();
|
|
}else{
|
|
$("#record_0_time1").hide();
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
//页面查询按钮
|
|
$("#record0_exp1Btn").click(function(){
|
|
|
|
//record0_exp1a
|
|
$("#record0_exp1a")[0].click();
|
|
});
|
|
|
|
//页面查询按钮
|
|
$("#record0_exp2Btn").click(function(){
|
|
|
|
//record0_exp1a
|
|
$("#record0_exp2a")[0].click();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//页面查询按钮
|
|
$("#record0_queryBtn").click(function(){
|
|
});
|
|
//页面重置按钮
|
|
$("#record0_resetBtn").click(function(){
|
|
});
|
|
//页面区划树刷新按钮
|
|
$("#record0_region_mini_refreshBtn").click(function(){
|
|
classTreeOpt5();
|
|
});
|
|
|
|
|
|
|
|
|
|
//日期input
|
|
ldate.render({
|
|
elem:"#beginTime",
|
|
type:"date",
|
|
max:"#endTime"
|
|
});
|
|
ldate.render({
|
|
elem:"#endTime",
|
|
type:"date",
|
|
max:"nowTime"
|
|
});
|
|
|
|
//日期input
|
|
ldate.render({
|
|
elem:"#beginTime1",
|
|
type:"date",
|
|
max:"#endTime1"
|
|
});
|
|
ldate.render({
|
|
elem:"#endTime1",
|
|
type:"date",
|
|
max:"nowTime"
|
|
});
|
|
|
|
//页面部分==结束================================================================================================================================================================
|
|
//===========================================================================================================================================================================
|
|
//加载数据================================================================================================================
|
|
//加载行政区划树
|
|
classTreeOpt5();
|
|
});
|
|
|
|
//集团用户树数据
|
|
|
|
var classTreeOpt5 = function(){
|
|
var zSet = {
|
|
view:{
|
|
selectedMulti:false
|
|
}
|
|
};
|
|
$.ajax({
|
|
type:"get",
|
|
url:"${ctx}/admin/data/org/tree/jtyh",
|
|
dataType:"json",
|
|
success:function(data){
|
|
//处理树结构
|
|
$.fn.zTree.init($("#record0_mini_rgTree"),zSet,data);
|
|
//menuIconOpt("soc0_socjtyh_tree");
|
|
var treeObj = $.fn.zTree.getZTreeObj("record0_mini_rgTree");
|
|
treeObj.expandAll(true);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|