master

分支 (2)

管理

管理

master

gh-pages

ningxia_grand_screen
/
new_page1.html

<!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', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
	        ],

	    function (ec) {


	        var myChart1 = ec.init(document.getElementById('map1'));
	        var myChart2 = ec.init(document.getElementById('map2'));
	        // 基于准备好的dom，初始化echarts图表
	        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>