<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宁夏社区矫正业务监管及指挥平台</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/new_page/new_page1.css">
</head>
<body class="page_bg">
<section>
<div class="return_back">
<a href="new_page.html"></a>
</div>
</section>
<header>
<article>
<div class="new_page1_header_logo"></div>
</article>
</header>
<article>
<section>
<div class="new_page1_content">
<div class="new_page1_content_left">
<header>
<div class="new_page1_content_left_title">
<h3>宁夏自治区数据交互图</h3>
</div>
</header>
<div class="new_page1_content_left_content1" >
<div id="map2" style="height:350px; width: 355px; padding-top: 10px;"></div>
</div>
<div class="new_page1_content_left_content2">
<table>
<tr>
<td></td>
<td style="color: #008000;">网络顺通</td>
<td style="color: #f7c108;">网络不通</td>
</tr>
<tr>
<td>市</td>
<td style="color: #008000;"><span class="counter">5</span></td>
<td style="color: #f7c108;"><span class="counter">0</span></td>
</tr>
<tr>
<td>县</td>
<td style="color: #008000;"><span class="counter">19</span></td>
<td style="color: #f7c108;"><span class="counter">3</span></td>
</tr>
<tr>
<td>乡</td>
<td style="color: #008000;"><span class="counter">189</span></td>
<td style="color: #f7c108;"><span class="counter">54</span></td>
</tr>
</table>
</div>
<div class="new_page1_map" style="position: absolute; left: 230px;">
<div id="map" style="height:510px; width: 300px; padding-top: 10px;background-color: none !important; float: right !important; margin-right: 0;"></div>
</div>
</div>
<div class="new_page1_content_right">
<div class="new_page1_content_right_top">
<div class="new_page1_content_right_top_title">
<h3>人员信息情况</h3>
</div>
<div class="new_page1_content_right_content">
<div class="new_page1_content_right_top_list">
<table>
<caption></caption>
<tr>
<td style="color: #008000;">在矫人员</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">4403</span>人</td>
</tr>
<tr>
<td style="color: #0785D1;">累计解矫</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">14374</span>人</td>
</tr>
</table>
</div>
<div class="new_page1_content_right_top_listinfo">
<table>
<caption></caption>
<tr>
<td style="color: #008000;">本年新增</td>
<td style="color: #008000;">同比增加</td>
</tr>
<tr>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">564</span>人</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">10.69</span>%</td>
</tr>
<tr>
<td style="color: #f7c108;">本年减少</td>
<td></td>
</tr>
<tr>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">235</span>人</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">-6.7</span>%</td>
</tr>
</table>
</div>
</div>
</div>
<div class="new_page1_content_right_middle">
<div class="new_page1_content_right_middle_title">
<h3>监管设备情况</h3>
</div>
<div class="new_page1_content_right_middle_list1">
<div id="map1" style="width:160px;height:180px;margin:10px auto;"></div>
</div>
<div class="new_page1_content_right_middle_list2">
<div>
<table>
<caption>设备情况</caption>
<tr>
<td style="color: #0785D1;" rowspan="2">手机定位</td>
<td style="color: #0785D1;">定位</td>
<td style="color: #008000;">在线</td>
<td style="color: #f7c108;">不在线</td>
</tr>
<tr>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">1213</span></td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">781</span></td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">442</span></td>
</tr>
<tr>
<td style="color: #0785D1;" rowspan="2">电子腕带</td>
<td style="color: #0785D1;">定位</td>
<td style="color: #008000;">在线</td>
<td style="color: #f7c108;">不在线</td>
</tr>
<tr>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">400</span></td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">236</span></td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">154</span></td>
</tr>
</table>
<table>
<tr>
<td style="color: #0785D1;" rowspan="2">人脸考勤</td>
<td style="color: #008000;">在线</td>
<td style="color: #f7c108;">不在线</td>
</tr>
<tr>
<td style="width: 111px; color: rgba(255,255,255,0.85)"><span class="counter">220</span></td>
<td style="width: 113px; color: rgba(255,255,255,0.85)"><span class="counter">43</span></td>
</tr>
</table>
</div>
</div>
<div class="new_page1_content_right_middle_list3">
<table>
<caption>监控设备</caption>
<tr>
<td style="color: #0785D1;" colspan="2">总数<span class="counter" style="color: rgba(255,255,255,0.85)">1250</span></td>
</tr>
<tr>
<td style="color: #008000;">在线</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">554</span>台</td>
</tr>
<tr>
<td style="color: #f7c108;">离线</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">656</span>台</td>
</tr>
</table>
</div>
</div>
<div class="new_page1_content_right_bottom">
<div class="new_page1_content_right_bottom_title">
<h3>数据交互情况</h3>
</div>
<table>
<tr>
<td style="color: #0785D1;"><img src="images/fayuan-logo (1).png" style="vertical-align: bottom; margin-right: 5px;"/>法院</td>
<td style="color: #00D0FE;">调查评估</td>
<td ><span class="counter">51</span>人</td>
<td style="color: #00D0FE;">法院移交</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">31</span>人</td>
</tr>
<tr>
<td style="color: #0785D1;"><img src="images/fayuan-logo .png" style="vertical-align: bottom; margin-right: 5px;"/>公安</td>
<td style="color: #00D0FE;">调查评估</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">12</span>人</td>
<td style="color: #00D0FE;">公安移交</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">10</span>人</td>
</tr>
<tr>
<td style="color: #0785D1;"><img src="images/fayuan-logo (3).png" style="vertical-align: bottom; margin-right: 5px;"/>监狱</td>
<td style="color: #00D0FE;">调查评估</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">44</span>人</td>
<td style="color: #00D0FE;">监狱移交</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">10</span>人</td>
</tr>
<tr>
<td style="color: #0785D1;"><img src="images/fayuan-logo (4).png" style="vertical-align: bottom; margin-right: 5px;"/>外省司法</td>
<td style="color: #00D0FE;">调查评估</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">12</span>人</td>
<td style="color: #00D0FE;">外省移交</td>
<td style="color: rgba(255,255,255,0.85)"><span class="counter">3</span>人</td>
</tr>
</table>
</div>
</div>
</div>
</section>
</article>
</body>
</html>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.js"></script>
<script type="text/javascript" src="js/echarts/echarts.js"></script>
<script type="text/javascript" src="js/echarts/chart/map.js"></script>
<script>
$('.counter').countUp();
require.config({
paths: {
echarts: 'js/echarts'
}
});
require(
[
'echarts',
'echarts/chart/map',
'echarts/chart/pie',
'echarts/chart/bar'
],
function (ec) {
var myChart1 = ec.init(document.getElementById('map1'));
var myChart2 = ec.init(document.getElementById('map2'));
var myChart = ec.init(document.getElementById('map'));
option = {
backgroundColor: '#1b1b1b',
color: ['gold', 'aqua', 'lime'],
legend: {
orient: 'vertical',
x: 'left',
data: ['市', '县', '所有'],
selectedMode: 'single',
selected: {
'市': false,
'县': false
},
textStyle: {
color: '#fff'
}
},
series: [
{
name: '宁夏',
type: 'map',
roam: true,
hoverable: false,
mapType: '宁夏',
itemStyle: {
normal: {
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
areaStyle: {
color: '#1b1b1b'
}
}
},
data: [],
geoCoord: {
'银川': [106.3586, 38.1775],
'吴忠': [106.853, 37.3755],
'固原': [106.1389, 35.9363],
'中卫市': [105.4028, 36.9525],
'石嘴山': [106.4795, 39.0015],
'兴庆区': [106.382121, 38.464266],
'西夏区': [106.055556, 38.553281],
'金凤区': [106.24265, 38.478591],
'永宁县': [106.109048, 38.295049],
'贺兰县': [106.266518, 38.687107],
'灵武市': [106.78613, 39.245835],
'大武口区': [106.387216, 38.967534],
'惠农区': [106.78613, 39.245835],
'平罗县': [106.544379, 38.891511],
'利通区': [106.219012, 37.767882],
'红寺堡区': [106.068996, 37.433257],
'盐池县': [107.049761, 37.625337],
'同心县': [106.247387, 37.098457],
'青铜峡市': [105.961462, 37.942125],
'原州区': [106.254011, 36.206829],
'西吉县': [105.726749, 35.939934],
'隆德县': [106.073611, 35.589138],
'泾源县': [106.354023, 35.529746],
'彭阳县': [106.662473, 35.972546],
'沙坡头区': [105.184599, 37.588101],
'中宁县': [105.69187, 37.360097],
'海原县': [105.679649, 36.603125]
}
}, {
name: '市',
type: 'map',
mapType: '宁夏',
data: [],
markLine: {
smooth: true,
effect: {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle: {
normal: {
color: function (s) {
return "green";
},
borderWidth: 1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data: [
[{ name: '银川' }, { name: '吴忠'}],
[{ name: '银川' }, { name: '固原'}],
[{ name: '银川' }, { name: '中卫市'}],
[{ name: '银川' }, { name: '石嘴山'}]
]
},
markPoint: {
symbol: 'emptyTriangle',
symbolSize: 6,
effect: {
show: true,
shadowBlur: 0
},
itemStyle: {
normal: {
label: { show: false }
},
emphasis: {
label: { position: 'top' }
}
},
data: [
{ name: '银川', symbol: 'star', symbolSize: 7 },
{ name: '吴忠' },
{ name: '固原' },
{ name: '中卫市' },
{ name: '石嘴山' }
]
}
},{
name: '县',
type: 'map',
mapType: '宁夏',
data: [],
markLine: {
smooth: true,
effect: {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle: {
normal: {
color: function (s) {
var i = ",1,8,16,";
if (i.indexOf("," + s.dataIndex + ",") > -1) {
return "red";
}
else {
return "green";
}
},
borderWidth: 1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data: [
[{ name: '银川' }, { name: '兴庆区'}],
[{ name: '银川' }, { name: '西夏区'}],
[{ name: '银川' }, { name: '金凤区'}],
[{ name: '银川' }, { name: '永宁县'}],
[{ name: '银川' }, { name: '贺兰县'}],
[{ name: '银川' }, { name: '灵武市'}],
[{ name: '银川' }, { name: '大武口区'}],
[{ name: '银川' }, { name: '惠农区'}],
[{ name: '银川' }, { name: '平罗县'}],
[{ name: '银川' }, { name: '利通区'}],
[{ name: '银川' }, { name: '红寺堡区'}],
[{ name: '银川' }, { name: '盐池县'}],
[{ name: '银川' }, { name: '同心县'}],
[{ name: '银川' }, { name: '青铜峡市'}],
[{ name: '银川' }, { name: '原州区'}],
[{ name: '银川' }, { name: '西吉县'}],
[{ name: '银川' }, { name: '隆德县'}],
[{ name: '银川' }, { name: '泾源县'}],
[{ name: '银川' }, { name: '彭阳县'}],
[{ name: '银川' }, { name: '沙坡头区'}],
[{ name: '银川' }, { name: '中宁县'}],
[{ name: '银川' }, { name: '海原县'}]
]
},
markPoint: {
symbol: 'emptyTriangle',
symbolSize: 6,
effect: {
show: true,
shadowBlur: 0
},
itemStyle: {
normal: {
label: { show: false }
},
emphasis: {
label: { position: 'top' }
}
},
data: [
{ name: '银川', symbol: 'star', symbolSize: 7 },
{ name: '兴庆区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '西夏区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '金凤区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '永宁县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '贺兰县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '灵武市', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '大武口区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '惠农区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '平罗县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '利通区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '红寺堡区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '盐池县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '同心县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '青铜峡市', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '原州区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '西吉县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '隆德县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '泾源县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '彭阳县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '沙坡头区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '中宁县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '海原县', symbol: 'emptyCircle', symbolSize: 5 }
]
}
}, {
name: '所有',
type: 'map',
mapType: '宁夏',
data: [],
markLine: {
smooth: true,
effect: {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle: {
normal: {
color: function (s) {
var i = ",5,12,20,";
if (i.indexOf("," + s.dataIndex + ",") > -1) {
return "red";
}
else {
return "green";
}
},
borderWidth: 1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data: [
[{ name: '银川' }, { name: '吴忠'}],
[{ name: '银川' }, { name: '固原'}],
[{ name: '银川' }, { name: '中卫市'}],
[{ name: '银川' }, { name: '石嘴山'}],
[{ name: '银川' }, { name: '兴庆区'}],
[{ name: '银川' }, { name: '西夏区'}],
[{ name: '银川' }, { name: '金凤区'}],
[{ name: '银川' }, { name: '永宁县'}],
[{ name: '银川' }, { name: '贺兰县'}],
[{ name: '银川' }, { name: '灵武市'}],
[{ name: '银川' }, { name: '大武口区'}],
[{ name: '银川' }, { name: '惠农区'}],
[{ name: '银川' }, { name: '平罗县'}],
[{ name: '银川' }, { name: '利通区'}],
[{ name: '银川' }, { name: '红寺堡区'}],
[{ name: '银川' }, { name: '盐池县'}],
[{ name: '银川' }, { name: '同心县'}],
[{ name: '银川' }, { name: '青铜峡市'}],
[{ name: '银川' }, { name: '原州区'}],
[{ name: '银川' }, { name: '西吉县'}],
[{ name: '银川' }, { name: '隆德县'}],
[{ name: '银川' }, { name: '泾源县'}],
[{ name: '银川' }, { name: '彭阳县'}],
[{ name: '银川' }, { name: '沙坡头区'}],
[{ name: '银川' }, { name: '中宁县'}],
[{ name: '银川' }, { name: '海原县'}]
]
},
markPoint: {
symbol: 'emptyTriangle',
symbolSize: 6,
effect: {
show: true,
shadowBlur: 0
},
itemStyle: {
normal: {
label: { show: false }
},
emphasis: {
label: { position: 'top' }
}
},
data: [
{ name: '银川', symbol: 'star', symbolSize: 7 },
{ name: '吴忠' },
{ name: '固原' },
{ name: '中卫市' },
{ name: '石嘴山' },
{ name: '兴庆区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '西夏区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '金凤区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '永宁县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '贺兰县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '灵武市', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '大武口区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '惠农区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '平罗县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '利通区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '红寺堡区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '盐池县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '同心县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '青铜峡市', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '原州区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '西吉县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '隆德县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '泾源县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '彭阳县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '沙坡头区', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '中宁县', symbol: 'emptyCircle', symbolSize: 5 },
{ name: '海原县', symbol: 'emptyCircle', symbolSize: 5 }
]
}
}
]
};
myChart.setOption(option);
option1 = {
series: [
{
name: '',
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
position: 'inner',
formatter: function (params) {
return params.name+"\n"+(params.percent - 0).toFixed(2) + '%'
}
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
formatter: "{b}\n{d}%"
}
}
},
data: [
{ value: 664, name: '手机定位' },
{ value: 469, name: '电子腕带' },
{ value: 400, name: '没有定位' }
]
}
]
};
myChart1.setOption(option1);
option2 = {
title: {
text: '',
textStyle: { color: "#fff" }
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['网络顺通', '网络不通'],
textStyle: { color: 'white' }
},
xAxis: [
{
type: 'category',
data: ['监控人数', '考勤人数', '手机定位', '电子腕带'],
axisLabel: {
textStyle: {
color: 'white'
}
}
},
],
yAxis: [
{
type: 'value',
axisLabel: {
textStyle: {
color: 'white'
}
}
}
],
series: [
{
name: '网络顺通',
type: 'bar',
data: [115, 22, 61, 32]
},
{
name: '网络不通',
type: 'bar',
data: [79, 30, 36, 13]
}
]
};
myChart2.setOption(option2);
});
</script>