1009 lines
42 KiB
HTML
1009 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/html">
|
|
<head>
|
|
<base href="/population/">
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css?v=1"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=1" media="all"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=1" media="all"/>
|
|
<link rel="stylesheet" href="assets/home/css/index.css?v=1">
|
|
<style>
|
|
[v-clock] {display: none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="viewport" id="app" v-clock>
|
|
<!-- 左边页面 -->
|
|
<div class="left_div">
|
|
<!-- 人口数据统计 -->
|
|
<div class="flex_l1 sub_div">
|
|
<div class="person_sta">
|
|
<div class="box" @click="personShow()">
|
|
<div class="icon">
|
|
<img src="assets/home/images/bj11.png" alt="" style="width: 100%; height: 100%;">
|
|
<div class="icon_2">
|
|
<img src="assets/home/images/bj111.png" alt="" style="width: 100%; height: 100%;">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<span>
|
|
<h5>人口总数</h5>
|
|
</span>
|
|
|
|
<span>
|
|
<em>{{ personCount }}</em>
|
|
<i>人</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="box" @click="jieDaoRenKouShow('稀土路街道')">
|
|
<div class="icon">
|
|
<img src="assets/home/images/bj22.png" alt="" style="width: 100%; height: 100%;">
|
|
<div class="icon_2">
|
|
<img src="assets/home/images/bj222.png" alt="" style="width: 100%; height: 100%;">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<span>
|
|
<h5>稀土路街道</h5>
|
|
</span>
|
|
<span>
|
|
<em>{{ xiTupersonCount }}</em>
|
|
<i>人</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="box" @click="jieDaoRenKouShow('民馨路街道')">
|
|
<div class="icon">
|
|
<img src="assets/home/images/bj33.png" alt="" style="width: 100%; height: 100%;">
|
|
<div class="icon_2">
|
|
<img src="assets/home/images/bj333.png" alt="" style="width: 100%; height: 100%;">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<span>
|
|
<h5>民馨路街道</h5>
|
|
</span>
|
|
<span>
|
|
<em>{{ mingXinpersonCount }}</em>
|
|
<i>人</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="box" @click="jieDaoRenKouShow('万水泉镇')">
|
|
<div class="icon">
|
|
<img src="assets/home/images/bj44.png" alt="" style="width: 100%; height: 100%;">
|
|
<div class="icon_2">
|
|
<img src="assets/home/images/bj444.png" alt="" style="width: 100%; height: 100%;">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<span>
|
|
<h5>万水泉镇</h5>
|
|
</span>
|
|
<span>
|
|
<em>{{ wanShuiQuanpersonCount }}</em>
|
|
<i>人</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 地图 -->
|
|
<div class="flex_l2 sub_div">
|
|
<div class="map" id="mapContainer"></div>
|
|
</div>
|
|
<!-- 人员记录折线图 -->
|
|
<div class="flex_l3 sub_div">
|
|
<!-- 半年 -->
|
|
<div class="box_left sub_div">
|
|
<div class="half_year">
|
|
<div class="halfbox_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>近半年特殊人员记录</h4>
|
|
</div>
|
|
<div class="halfbox_bottom">
|
|
<div class="half_line" id="specialPersonChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 一年 -->
|
|
<div class="box_right sub_div">
|
|
<div class="one_year">
|
|
<div class="onebox_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>近一年信访管理类人员记录</h4>
|
|
</div>
|
|
<div class="onebox_bottom">
|
|
<div class="one_line" id="petitionRecordChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边页面 -->
|
|
<div class="right_div">
|
|
<!--政治面貌-->
|
|
<div style="flex: 3;" class="sub_div">
|
|
<div class="politics">
|
|
<div class="politics_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>政治面貌</h4>
|
|
</div>
|
|
<div class="politics_bottom">
|
|
<dic class="pie" id="politicalStatusChart"></dic>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--性别统计-->
|
|
<div style="flex: 2;" class="sub_div">
|
|
<div class="gender">
|
|
<div class="gender_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>性别统计</h4>
|
|
</div>
|
|
<div class="gender_bottom">
|
|
<img src="assets/home/images/man.png" alt="" class="man">
|
|
<img src="assets/home/images/woman.png" alt="" class="woman">
|
|
<em class="em_man">—{{ genderMaPercentage }}%</em>
|
|
<em class="em_woman">—{{ genderWomanPercentage }}%</em>
|
|
<div class="ratio">
|
|
<img src="assets/home/images/renyuanzhanbi.png" alt="" class="renyuanzhanbi">
|
|
<img src="assets/home/images/manryzb.png" alt="" class="manryzb">
|
|
<img src="assets/home/images/womanryzb.png" alt="" class="womanryzb">
|
|
<div class="manbox" @click="xingBieRenYuanShow('男性')">
|
|
<p>{{ genderMaNum }}</p>
|
|
<h5>男性人数(人)</h5>
|
|
<span>
|
|
<i>占比</i>
|
|
<em>{{ genderMaPercentage }}%</em>
|
|
</span>
|
|
<div class="progress-bar1">
|
|
<div class="progress1" id="manCalc"></div>
|
|
</div>
|
|
</div>
|
|
<div class="womanbox" @click="xingBieRenYuanShow('女性')">
|
|
<p class="woman_p">{{ genderWomanNum }}</p>
|
|
<h5>女性人数(人)</h5>
|
|
<span>
|
|
<i>占比</i>
|
|
<em>{{ genderWomanPercentage }}%</em>
|
|
</span>
|
|
<div class="progress-bar1">
|
|
<div class="progress1" id="womanCalc"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 房屋类型 -->
|
|
<div style="flex: 3;" class="sub_div">
|
|
<div class="society">
|
|
<div class="society_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>房屋类型</h4>
|
|
</div>
|
|
<div class="society_bottom">
|
|
<div class="bar" id="houseTypeChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 特殊信息类人员情况 -->
|
|
<!-- <div class="flex_r3 sub_div">
|
|
<div class="special">
|
|
<div class="special_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>特殊信息类人员情况</h4>
|
|
</div>
|
|
<div class="special_bottom">
|
|
<div class="left_box" @click="teShuRenYuanShow('社区矫正')">
|
|
<img src="assets/home/images/r_33_1.png" alt="" class="r_33_1">
|
|
<h5>{{ correctCount }}人</h5>
|
|
<span>
|
|
<em>社区矫正对象</em>
|
|
</span>
|
|
</div>
|
|
<div class="right_box" @click="teShuRenYuanShow('刑满释放')">
|
|
<img src="assets/home/images/r_33_2.png" alt="">
|
|
<h5>{{ releaseCount }}人</h5>
|
|
<span>
|
|
<em>刑满释放人员</em>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
|
|
|
|
|
|
<!-- 社会保障类人员 -->
|
|
<!-- <div class="flex_r4 sub_div">
|
|
<div class="society">
|
|
<div class="society_top">
|
|
<img src="assets/home/images/箭头.png" alt="">
|
|
<h4>社会保障类人员情况</h4>
|
|
</div>
|
|
<div class="society_bottom">
|
|
<div class="bar" id="protectPersonChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="assets/home/js/jquery.min.js?v=1"></script>
|
|
<script src="assets/home/js/flexible.js?v=1"></script>
|
|
<script type="text/javascript" src="assets/home/js/vue.js?v=1"></script>
|
|
<script type="text/javascript" src="assets/js/echarts.min.js?v=1"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js?v=1"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pFMM3KjMlPlpzEGTXwB5vdj6cDCfB6Py"></script>
|
|
<script>
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'laytpl'], function() {
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
apiHost: 'http://219.147.99.164:8082/datahouse/',
|
|
headers: {
|
|
'PKEY': 'a0a25c1e-818a-489e-98c0-0f3a282a49d2',
|
|
'PPASS': '5be81fdf-2c5d-4ee6-ae45-ffe82b5db2ff'
|
|
},
|
|
longitude: 109.845966,
|
|
latitude: 40.612465,
|
|
genderMaNum: 0,
|
|
genderMaPercentage: 0,
|
|
genderWomanNum: 0,
|
|
genderWomanPercentage: 0,
|
|
correctCount: 0,
|
|
releaseCount: 0,
|
|
personCount: 0,
|
|
xiTupersonCount: 0,
|
|
mingXinpersonCount: 0,
|
|
wanShuiQuanpersonCount: 0,
|
|
|
|
},
|
|
methods: {
|
|
// 地图
|
|
initMap: function(){
|
|
var self = this;
|
|
map = new BMap.Map("mapContainer", {enableMapClick: false,});
|
|
var point = new BMap.Point(this.longitude, this.latitude);
|
|
map.centerAndZoom(point, 12);
|
|
map.disableDoubleClickZoom();
|
|
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
|
|
map.enableContinuousZoom();//开启缩放平滑
|
|
self.initGrid();
|
|
},
|
|
// 初始化网格
|
|
initGrid: function(){
|
|
var self = this;
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/qc90c571?type=1",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
$.each(data, function(i,d){
|
|
var points = [];
|
|
$.each(d.pointList, function(i, d){
|
|
points.push(new BMap.Point(d.lng, d.lat));
|
|
});
|
|
var polygon = new BMap.Polygon(points, { strokeColor: d.grid.gridColor, fillColor: d.grid.gridColor, strokeWeight: 2, strokeOpacity: 0.5 });
|
|
polygon.community = d.grid.community;
|
|
polygon.gridId = d.grid.gridId;
|
|
polygon.gridName = d.grid.gridName;
|
|
polygon.housingId = d.grid.housingId;
|
|
polygon.street = d.grid.street;
|
|
map.addOverlay(polygon);
|
|
|
|
|
|
/* var centerPoint = self.getPolygonCenter(points);
|
|
// 创建标注
|
|
var label = new BMap.Label(d.grid.gridName, { offset: new BMap.Size(20, -10) });
|
|
label.setStyle({ color: "#000000", backgroundColor: d.grid.gridColor, border: "none" });
|
|
// 将标注添加到地图上
|
|
map.addOverlay(label);
|
|
label.setPosition(centerPoint);
|
|
*/
|
|
// 单击监听
|
|
polygon.addEventListener('click', function() {
|
|
self.gridShow(this.street, this.gridId);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取区域中心点
|
|
getPolygonCenter: function(points){
|
|
var totalLng = 0;
|
|
var totalLat = 0;
|
|
for (var i = 0; i < points.length; i++) {
|
|
totalLng += points[i].lng;
|
|
totalLat += points[i].lat;
|
|
}
|
|
var centerLng = totalLng / points.length;
|
|
var centerLat = totalLat / points.length;
|
|
return new BMap.Point(centerLng, centerLat);
|
|
},
|
|
// 初始化人口
|
|
initPerson: function(){
|
|
var self = this;
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/q3cd32d5",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
self.personCount = data.renKou;
|
|
self.xiTupersonCount = data.xiTu;
|
|
self.mingXinpersonCount = data.minXin;
|
|
self.wanShuiQuanpersonCount = data.wanShuiQuan;
|
|
|
|
}
|
|
})
|
|
},
|
|
// 初始化性别
|
|
initGenderData: function(){
|
|
var self = this;
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/q1152adc",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
$.each(data, function(i,v){
|
|
if('男性' === v.name){
|
|
self.genderMaNum = v.value;
|
|
self.genderMaPercentage = v.percent;
|
|
}else if('女性' === v.name){
|
|
self.genderWomanNum = v.value;
|
|
self.genderWomanPercentage = v.percent;
|
|
}
|
|
});
|
|
var progressBar1 = document.getElementById('manCalc');
|
|
progressBar1.style.width = self.genderMaPercentage + '%';
|
|
var progressBar2 = document.getElementById('womanCalc');
|
|
progressBar2.style.width = self.genderWomanPercentage + '%';
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
// 特殊信息类人员
|
|
initSpecialPeopleData: function(){
|
|
var self = this;
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/q146cefa",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
self.releaseCount = data.releaseCount;
|
|
self.correctCount = data.correctCount;
|
|
}
|
|
})
|
|
},
|
|
// 政治面貌
|
|
initPoliticalStatusData: function(){
|
|
var self = this;
|
|
var option = {
|
|
color: ["#5189FF", "#FF9C3D", "#00FFBC", "#FFB200"],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
// 格式化提示内容：
|
|
// a 代表series系列图表名称
|
|
// b 代表series数据名称 data 里面的name
|
|
// c 代表series数据值 data 里面的value
|
|
// d代表 当前数据/总数据的比例
|
|
// formatter: "{b} : {c}"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: '30%',
|
|
left: 'left',
|
|
align: 'auto',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 0
|
|
},
|
|
label: {
|
|
show: true,
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
formatter: '{b}{c}'
|
|
// position: 'center'
|
|
},
|
|
/*emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},*/
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
hoverOffset: 0,
|
|
data: [
|
|
/*{ value: 31, name: "中国共产党员" },
|
|
{ value: 29, name: "共青团员" },
|
|
{ value: 25, name: "预备党员" },
|
|
{ value: 15, name: "其他" }*/
|
|
]
|
|
}
|
|
]
|
|
};
|
|
var myChart = echarts.init(document.getElementById('politicalStatusChart'));
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/qe41cc66",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
option.series[0]['data'] = data;
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
|
|
myChart.on('click', function(params) {
|
|
self.zhengZhiMianMaoRenYuanShow(params.name);
|
|
});
|
|
},
|
|
// 社会保障类人员情况
|
|
initProtectPerson: function(){
|
|
var self = this;
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [],
|
|
axisLabel: {
|
|
color: "#fff",
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: false
|
|
},
|
|
axisTick: {
|
|
show: false // 去除刻度
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: "#fff"
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#C1E5EC" // 分割线颜色
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false // 去除刻度
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
}
|
|
|
|
],
|
|
color: "#FF6D44",
|
|
series: [
|
|
{
|
|
name: 'Direct',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: []
|
|
}
|
|
]
|
|
};
|
|
var myChart = echarts.init(document.getElementById('protectPersonChart'));
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/qe34cc66",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
$.each(data, function(i,v){
|
|
option.xAxis[0]['data'].push(v.name);
|
|
option.series[0]['data'].push(v.value);
|
|
});
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
myChart.on('click', function(params) {
|
|
self.sheHuiBaoZhangRenYuanShow(params.name)
|
|
});
|
|
},
|
|
// 近一年信访管理类人员记录
|
|
initPetitionRecord: function(){
|
|
var self = this;
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: '#fff' // 图例文字颜色
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [],
|
|
axisLabel: {
|
|
color: "#fff" // 文字颜色
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: false
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false // 去除刻度
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
axisLabel: {
|
|
color: "#fff" // 文字颜色
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#6DCCF8" // 分割线颜色
|
|
}
|
|
}
|
|
},
|
|
color: ["#3273E5", "#54EBFD", "#51FC5B", "#FBBB24", "#FB772B"],
|
|
series: [
|
|
{
|
|
name: "矛盾纠纷",
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
},
|
|
{
|
|
name: "社会治安",
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
},
|
|
{
|
|
name: "吸毒人员",
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
},
|
|
{
|
|
name: "涉邪人员",
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
smooth: true,
|
|
data: []
|
|
},
|
|
{
|
|
name: "重点上访",
|
|
type: 'line',
|
|
smooth: true,
|
|
data: []
|
|
},
|
|
]
|
|
};
|
|
var myChart = echarts.init(document.getElementById('petitionRecordChart'));
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/q8d0f588",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
$.each(data, function(i,v){
|
|
option.xAxis['data'].push(v['月份'] + '月');
|
|
option.series[0]['data'].push(v['矛盾纠纷']);
|
|
option.series[1]['data'].push(v['社会治安']);
|
|
option.series[2]['data'].push(v['涉毒人员']);
|
|
option.series[3]['data'].push(v['涉邪人员']);
|
|
option.series[4]['data'].push(v['重点上访户']);
|
|
});
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
|
|
myChart.on('click', function(params) {
|
|
self.xinFangRenYuanShow(params.seriesName)
|
|
});
|
|
|
|
},
|
|
// 近半年特殊人员记录
|
|
initSpecialPersonData: function(){
|
|
var self = this;
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: '#fff' // 图例文字颜色
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [],
|
|
axisLabel: {
|
|
color: "#fff" // 文字颜色
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: false
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false // 去除刻度
|
|
},
|
|
axisLine: {
|
|
show: false // 去除轴线
|
|
},
|
|
axisLabel: {
|
|
color: "#fff" // 文字颜色
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#6DCCF8" // 分割线颜色
|
|
}
|
|
}
|
|
},
|
|
color: ["#FF9313", "#48EDF5"],
|
|
series: [
|
|
{
|
|
name: "社区矫正",
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
smooth: true,
|
|
data: [],
|
|
areaStyle: {
|
|
color: 'rgba(255, 147, 19, 0.3)'
|
|
}
|
|
},
|
|
{
|
|
name: "刑满释放",
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
smooth: true,
|
|
data: [],
|
|
areaStyle: {
|
|
color: 'rgba(13, 231, 242, 0.3)'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
var myChart = echarts.init(document.getElementById('specialPersonChart'))
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/q316ecca",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
$.each(data, function(i,v){
|
|
option.xAxis['data'].push(v['month'] + '月');
|
|
option.series[0]['data'].push(v['sheQu']);
|
|
option.series[1]['data'].push(v['xingMan']);
|
|
});
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
myChart.on('click', function(params) {
|
|
self.teShuRenYuanShow(params.seriesName)
|
|
});
|
|
|
|
},
|
|
initHouseTyoeChart: function(){
|
|
var self = this;
|
|
var option = {
|
|
color: ["#5189FF", "#FF9C3D", "#00FFBC", "#ff55fd"],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
// 格式化提示内容：
|
|
// a 代表series系列图表名称
|
|
// b 代表series数据名称 data 里面的name
|
|
// c 代表series数据值 data 里面的value
|
|
// d代表 当前数据/总数据的比例
|
|
// formatter: "{b} : {c}"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: '30%',
|
|
left: 'left',
|
|
align: 'auto',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 0
|
|
},
|
|
label: {
|
|
show: true,
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
formatter: '{b}{c}'
|
|
// position: 'center'
|
|
},
|
|
/*emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},*/
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
hoverOffset: 0,
|
|
data: [
|
|
/*{ value: 31, name: "中国共产党员" },
|
|
{ value: 29, name: "共青团员" },
|
|
{ value: 25, name: "预备党员" },
|
|
{ value: 15, name: "其他" }*/
|
|
]
|
|
}
|
|
]
|
|
};
|
|
var myChart = echarts.init(document.getElementById('houseTypeChart'));
|
|
$.ajax({
|
|
url: self.apiHost + "app/query/sqlrelease/qf4f381b?area=",
|
|
type: 'GET',
|
|
dataType: 'JSON',
|
|
headers: self.headers,
|
|
success: function(data) {
|
|
option.series[0]['data'].push({name: '出租房', value: data.chuZu});
|
|
option.series[0]['data'].push({name: '空置房', value: data.kongFang});
|
|
option.series[0]['data'].push({name: '自住房', value: data.ziZhu});
|
|
option.series[0]['data'].push({name: '其他', value: data.qiTa});
|
|
myChart.setOption(option);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
// 二级页面 - 人口总数
|
|
personShow: function(){
|
|
layer.open({
|
|
type: 2,
|
|
title: '人口总数',
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/total', []),
|
|
end: function() {
|
|
}
|
|
});
|
|
},
|
|
// 二级页面 - 街道人口
|
|
jieDaoRenKouShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: data + '人口',
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/jiedao?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
},
|
|
// 二级页面 - 特殊人员
|
|
teShuRenYuanShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: data,
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/teshu?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
},
|
|
// 二级页面 - 性别人员
|
|
xingBieRenYuanShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: data + '人员',
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/sex?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
|
|
},
|
|
//二级页面 - 社会保障类人员
|
|
sheHuiBaoZhangRenYuanShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: data + '人员',
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/baozhang?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
},
|
|
//二级页面 - 政治面貌
|
|
zhengZhiMianMaoRenYuanShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: data + '人员',
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/organization?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
/*//二级页面 - 近半年特殊人员
|
|
banNianTeShuRenYuanShow: function(data){
|
|
top.dialog.open({
|
|
url: top.restAjax.path('route/populationinfo-data/organization?name={name}', [data]),
|
|
title: data + '人员',
|
|
width: '80%',
|
|
height: '80%',
|
|
onClose: function() {
|
|
}
|
|
});
|
|
},*/
|
|
|
|
//二级页面 - 近一年信访人员记录
|
|
xinFangRenYuanShow: function(data){
|
|
layer.open({
|
|
type: 2,
|
|
title: false,
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/populationinfo-data/xinfang?name={name}', [data]),
|
|
end: function() {
|
|
}
|
|
});
|
|
},
|
|
// 二级页面 - 网格详情
|
|
gridShow : function(streetName,gridId){
|
|
top.layer.open({
|
|
type: 2,
|
|
title: false,
|
|
closeBtn: 1,
|
|
area: ['90%', '90%'],
|
|
shadeClose: true,
|
|
anim: 2,
|
|
content: top.restAjax.path('route/home/grid-details?streetName={streetName}&gridId={gridId}&gridType={gridType}', [streetName,gridId, 2]),
|
|
end: function() {
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
mounted: function () {
|
|
this.initMap();
|
|
this.initPerson();
|
|
this.initGenderData();
|
|
this.initSpecialPeopleData();
|
|
this.initPoliticalStatusData();
|
|
/*this.initProtectPerson();*/
|
|
this.initPetitionRecord();
|
|
this.initSpecialPersonData();
|
|
this.initHouseTyoeChart();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|