508 lines
24 KiB
HTML
508 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<base href="/bigdata/">
|
||
<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" type="text/css" href="assets/js/vendor/bigdata/css/reset.css" />
|
||
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bigdata/css/moudle.css" />
|
||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||
<style>
|
||
.marker-container{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);cursor: pointer}
|
||
.top{border: 1px solid #FFF;border-bottom: none;width:35px;height:20px;background-color:red;border-radius:50px 50px 0 0;padding: 5px 5px 0;box-sizing: border-box;box-shadow: 0 10px 0 #fff}
|
||
.mid{border-left: 1px solid #FFF;border-right: 1px solid #FFF;box-sizing: border-box;width:35px;height:10px;background: red;}
|
||
.top img{width: 100%;border-radius: 50%;}
|
||
.bottom{width :0px;height :0px;border-top: 20px solid red;border-left: 18px solid transparent;border-right: 17px solid transparent;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!--标题-->
|
||
<div class="cm-page-title">
|
||
<ul>
|
||
<li><a href="route/bigdata/index1.html">网格</a></li>
|
||
<li><a href="route/bigdata/index2.html">党建</a></li>
|
||
<li><a href="route/system/index.html" target="_blank">考核系统</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--主体-->
|
||
<div class="cm-main main-box">
|
||
<!--左侧-->
|
||
<div class="cm-main-left">
|
||
<div class="page-top">
|
||
<div class="left-box">
|
||
<div class="cm-left-charts-box">
|
||
<h3>支部数</h3>
|
||
<div class="cm-charts-container" v-cloak>
|
||
<span>{{count.zbCount}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>党员数</h3>
|
||
<div class="cm-charts-container" v-cloak>
|
||
<span>{{count.peopleCount}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>男女比例</h3>
|
||
<div class="cm-charts-container" id="chart-box"></div>
|
||
</div>
|
||
</div>
|
||
<div class="map-box">
|
||
<div id="map" class="map-container"></div>
|
||
<div class="map-select" tabindex="0">
|
||
<div class="result" id="selId" v-cloak>
|
||
{{selectUl}}
|
||
<div class="slide-icon">
|
||
<img src="assets/js/vendor/bigdata/images/slide.png" alt="">
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li v-for="level in levelSel" @click="levelChange(level.text, level.val)">{{level.text}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-bottom" id="zhu-chart"></div>
|
||
</div>
|
||
<!--右侧-->
|
||
<div class="cm-main-right" v-cloak>
|
||
<div class="cm-left-charts-box right-box" v-for="item in meeting">
|
||
<h3>{{item.categoryName}}</h3>
|
||
<div class="cm-charts-container">
|
||
<span>{{item.counts}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="assets/js/rem.js"></script>
|
||
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
||
<script type="text/javascript" src="assets/js/echarts.js"></script>
|
||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||
<script src="assets/js/restajax.js"></script>
|
||
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
||
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=2qzNKd33lQERUDakqDDyvLOyqM1x2i8y"></script>
|
||
<script>
|
||
layui.config({
|
||
base: 'assets/layuiadmin/'
|
||
}).extend({
|
||
index: 'lib/index' //主入口模块
|
||
}).use(['index', 'laytpl', 'restajax', 'datamessage', 'dialog'], function() {
|
||
var $ = layui.$;
|
||
var layer = layui.layer;
|
||
var laytpl = layui.laytpl;
|
||
window.dialog = layui.dialog;
|
||
window.restAjax = layui.restajax;
|
||
window.dataMessage = layui.datamessage;
|
||
|
||
var vue = new Vue({
|
||
el:'#app',
|
||
data: {
|
||
count: {
|
||
zbCount: 0,
|
||
peopleCount: 0,
|
||
meeting: 0,
|
||
boy: 0,
|
||
girl: 0
|
||
},
|
||
selectUl: '请选择所属级别',
|
||
levelSel: [
|
||
{text: '请选择所属级别', val: '0'},
|
||
{text: '1级', val: '1'},
|
||
{text: '2级', val: '2'},
|
||
{text: '3级', val: '3'},
|
||
{text: '4级', val: '4'},
|
||
{text: '5级', val: '5'}
|
||
],
|
||
pointArr: [],
|
||
markerList: [],
|
||
belongLevel: 2,
|
||
meeting: [],
|
||
meetingCharts: []
|
||
},
|
||
methods: {
|
||
// 请求支部数，党员数接口
|
||
initPartyOrganizeData: function(value, value2) {
|
||
var self = this;
|
||
self.belongLevel = value;
|
||
var loadLayerIndex;
|
||
var url;
|
||
top.restAjax.get(top.restAjax.path('api/partyorganize/bigdata?belongLevel={belongLevel}&partyOrganizeId={partyOrganizeId}', [value, value2]), {}, null, function(code, data) {
|
||
self.pointArr = data.data.partyOrganizeDTOList;
|
||
self.count.zbCount = data.data.zbCount;
|
||
self.count.peopleCount = data.data.peopleCount;
|
||
self.count.boy = data.data.boy;
|
||
self.count.girl = data.data.girl;
|
||
var dataScroll = {
|
||
zbCount: data.data.zbCount,
|
||
peopleCount: data.data.peopleCount,
|
||
girl: data.data.girl,
|
||
boy: data.data.boy
|
||
};
|
||
for (var i in dataScroll) {
|
||
self.scrollNum(i,dataScroll[i])
|
||
}
|
||
self.initCharts();
|
||
self.initBaiduMap();
|
||
}, function(code, data) {
|
||
self.initCharts();
|
||
self.initBaiduMap();
|
||
top.dialog.msg(data.msg);
|
||
}, function() {
|
||
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
}, function() {
|
||
top.dialog.close(loadLayerIndex);
|
||
});
|
||
},
|
||
// 通过支部等级，筛选支部
|
||
levelChange: function(text, value) {
|
||
var self = this;
|
||
var icoHtml = '<div class="slide-icon">' +
|
||
'<img src="assets/js/vendor/bigdata/images/slide.png" alt="">' +
|
||
'</div>';
|
||
$('#selId').text(text);
|
||
$('#selId').append(icoHtml);
|
||
|
||
self.initPartyOrganizeData(value, '');
|
||
},
|
||
initBaiduMap: function () {
|
||
var self = this;
|
||
function initMap(){
|
||
createMap();//创建地图
|
||
setMapEvent();//设置地图事件
|
||
addMapControl();//向地图添加控件
|
||
addMapOverlay();//向地图添加覆盖物
|
||
}
|
||
function createMap(){
|
||
map = new BMap.Map("map",{enableMapClick: false});
|
||
map.centerAndZoom(new BMap.Point(109.845965, 40.664461),12);
|
||
/*var mapStyle ={
|
||
features: ["road", "building","water","land"],//隐藏地图上的poi
|
||
style : "midnight" //设置地图风格为高端黑
|
||
}
|
||
map.setMapStyle(mapStyle);*/
|
||
}
|
||
function setMapEvent(){
|
||
map.enableScrollWheelZoom();
|
||
map.enableKeyboard();
|
||
map.enableDragging();
|
||
map.enableDoubleClickZoom()
|
||
}
|
||
//向地图添加控件
|
||
function addMapControl(){
|
||
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
|
||
scaleControl.setUnit(BMAP_UNIT_METRIC);
|
||
map.addControl(scaleControl);
|
||
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:0});
|
||
map.addControl(navControl);
|
||
}
|
||
function addMapOverlay(){
|
||
for(var i = 0, item = self.pointArr[i]; item = self.pointArr[i++];) {
|
||
var point = new BMap.Point(item.longitude, item.latitude);
|
||
// var imgSrc = self.url + '/route/file/downloadfile/false/' + item.logo;
|
||
var imgSrc = item.logo;
|
||
var el = createMark(point, imgSrc, item.partyOrganizeId, item.belongLevel);
|
||
}
|
||
}
|
||
// 给地图添加点
|
||
function createMark(point, imgSrc, partyOrganizeId, belongLevel) {
|
||
// 定义绘制图标方法
|
||
function customizeOverlay(center, length){
|
||
this._center = center;
|
||
this._length = length;
|
||
}
|
||
customizeOverlay.prototype = new BMap.Overlay();
|
||
|
||
customizeOverlay.prototype.initialize = function(map){
|
||
// 保存map对象实例
|
||
map = map;
|
||
|
||
// 创建div元素，作为自定义覆盖物的容器
|
||
var el = self.creatMarkerDiv(imgSrc);
|
||
|
||
// 将el添加到覆盖物容器中
|
||
map.getPanes().markerPane.appendChild(el);
|
||
|
||
// 监听点击
|
||
$(el).on('click', function(e){
|
||
self.showPartyOrganize(partyOrganizeId, belongLevel);
|
||
})
|
||
|
||
// 保存div实例
|
||
this._div = el;
|
||
// 需要将el元素作为方法的返回值，当调用该覆盖物的show、hide方法，或者对覆盖物进行移除时，API都将操作此元素。
|
||
return el;
|
||
}
|
||
|
||
// 根据地理坐标转换为像素坐标，并设置给容器
|
||
customizeOverlay.prototype.draw = function(){
|
||
var position = map.pointToOverlayPixel(this._center);
|
||
this._div.style.left = position.x - this._length / 2 + "px";
|
||
this._div.style.top = position.y - this._length / 2 + "px";
|
||
};
|
||
|
||
var mark = new customizeOverlay(point, 36);
|
||
self.markerList.push(mark); // 把mak加入到数组中方便下次添加mark时清除原有点和操作选中状态
|
||
map.addOverlay(mark);
|
||
}
|
||
function addClickHandler(target,window){
|
||
target.addEventListener("click",function(){
|
||
target.openInfoWindow(window);
|
||
});
|
||
}
|
||
var map;
|
||
initMap();
|
||
},
|
||
creatMarkerDiv: function(imgSrc) {
|
||
var oDiv = document.createElement('div');
|
||
oDiv.className = 'marker-container';
|
||
var oTop = document.createElement('div');
|
||
oTop.className = 'top';
|
||
var img = new Image();
|
||
img.src = imgSrc;
|
||
var oMid = document.createElement('div');
|
||
oMid.className = 'mid'
|
||
var oBottom = document.createElement('div');
|
||
oBottom.className = 'bottom'
|
||
oDiv.appendChild(oTop);
|
||
oTop.appendChild(img);
|
||
oDiv.appendChild(oMid);
|
||
oDiv.appendChild(oBottom);
|
||
return oDiv;
|
||
},
|
||
showPartyOrganize: function(partyOrganizeId, belongLevel) {
|
||
var self = this;
|
||
top.dialog.dialogData.partyOrganizeId = '';
|
||
top.dialog.dialogData.belongLevel = '';
|
||
top.dialog.open({
|
||
url: top.restAjax.path('route/bigdata/detail.html?partyOrganizeId={partyOrganizeId}&belongLevel='+belongLevel, [partyOrganizeId]),
|
||
title: '详情',
|
||
width: '1080px',
|
||
height: '98%',
|
||
onClose: function(data) {
|
||
if(top.dialog.dialogData.partyOrganizeId && !top.dialog.dialogData.belongLevel) {
|
||
self.getPartyMemberCount(top.dialog.dialogData.partyOrganizeId);
|
||
self.getMeetingCount(top.dialog.dialogData.partyOrganizeId);
|
||
self.getMeetingCharts(top.dialog.dialogData.partyOrganizeId);
|
||
self.initPartyOrganizeData('', top.dialog.dialogData.partyOrganizeId);
|
||
}else if(top.dialog.dialogData.partyOrganizeId && top.dialog.dialogData.belongLevel) {
|
||
self.getPartyMemberCount(top.dialog.dialogData.partyOrganizeId);
|
||
self.getMeetingCount(top.dialog.dialogData.partyOrganizeId);
|
||
self.getMeetingCharts(top.dialog.dialogData.partyOrganizeId);
|
||
self.initPartyOrganizeData(top.dialog.dialogData.belongLevel, '');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 当前党组织中党员数量
|
||
getPartyMemberCount: function (partyOrganizeId) {
|
||
var self = this;
|
||
var loadLayerIndex;
|
||
top.restAjax.get(top.restAjax.path('api/partyorganize/countpartymember?partyOrganizeId=' + partyOrganizeId, []), {}, null, function(code, data) {
|
||
self.count.zbCount = 0;
|
||
self.count.peopleCount = data.data;
|
||
self.getCountpartymemberSex(partyOrganizeId);
|
||
}, function(code, data) {
|
||
top.dialog.msg(data.msg);
|
||
}, function() {
|
||
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
}, function() {
|
||
top.dialog.close(loadLayerIndex);
|
||
});
|
||
},
|
||
getCountpartymemberSex: function(partyOrganizeId) {
|
||
var self = this;
|
||
var loadLayerIndex;
|
||
self.count.boy = 0;
|
||
self.count.girl = 0;
|
||
top.restAjax.get(top.restAjax.path('api/partyorganize/countpartymembersex?partyOrganizeId=' + partyOrganizeId, []), {}, null, function(code, data) {
|
||
self.count.boy = data.data.boy;
|
||
self.count.girl = data.data.girl;
|
||
}, function(code, data) {
|
||
top.dialog.msg(data.msg);
|
||
}, function() {
|
||
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
}, function() {
|
||
top.dialog.close(loadLayerIndex);
|
||
});
|
||
},
|
||
getMeetingCount: function(partyOrganizeId) {
|
||
var self = this;
|
||
var loadLayerIndex;
|
||
top.restAjax.get(top.restAjax.path('api/partyorganize/meetingcount?partyOrganizeId=' + partyOrganizeId, []), {}, null, function(code, data) {
|
||
self.meeting = data.data.meeting;
|
||
}, function(code, data) {
|
||
top.dialog.msg(data.msg);
|
||
}, function() {
|
||
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
}, function() {
|
||
top.dialog.close(loadLayerIndex);
|
||
});
|
||
},
|
||
getMeetingCharts: function(partyOrganizeId) {
|
||
var self = this;
|
||
var loadLayerIndex;
|
||
self.meetingCharts = [];
|
||
var url;
|
||
if(partyOrganizeId) {
|
||
url = 'api/partyorganize/meetingcharts?partyOrganizeId=' + partyOrganizeId;
|
||
}else {
|
||
url = 'api/partyorganize/meetingcharts';
|
||
}
|
||
top.restAjax.get(top.restAjax.path(url, []), {}, null, function(code, data) {
|
||
self.meetingCharts = data.data.meetingCharts;
|
||
self.initZhuCharts();
|
||
}, function(code, data) {
|
||
top.dialog.msg(data.msg);
|
||
}, function() {
|
||
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
}, function() {
|
||
top.dialog.close(loadLayerIndex);
|
||
});
|
||
},
|
||
initCharts: function () {
|
||
var self = this;
|
||
var pie1 = echarts.init(document.getElementById("chart-box"));
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 'right',
|
||
data: ['男', '女'],
|
||
textStyle: {
|
||
color:'#fff'
|
||
}
|
||
},
|
||
//设置饼状图每个颜色块的颜色
|
||
color : [ 'red', 'orange'],
|
||
series: [
|
||
{
|
||
name: '男女比例',
|
||
type: 'pie',
|
||
radius: '70%',
|
||
center: ['50%', '60%'],
|
||
data: [
|
||
{value: self.count.boy, name: '男'},
|
||
{value: self.count.girl, name: '女'}
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
textStyle: {
|
||
color: '#fff' // 改变标示文字的颜色
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
pie1.setOption(option);
|
||
},
|
||
initZhuCharts: function () {
|
||
var self = this;
|
||
var zhu = echarts.init(document.getElementById("zhu-chart"));
|
||
option = {
|
||
grid: {
|
||
x:30,
|
||
y:20,
|
||
x2:20,
|
||
y2:20
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color:'#fff'
|
||
}
|
||
},
|
||
tooltip: {},
|
||
dataset: {
|
||
source: self.meetingCharts
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
yAxis: {
|
||
axisLabel:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
// Declare several bar series, each will be mapped
|
||
// to a column of dataset.source by default.
|
||
series: [
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'},
|
||
{type: 'bar'}
|
||
]
|
||
};
|
||
|
||
zhu.setOption(option);
|
||
},
|
||
scrollNum: function (key,value) {
|
||
var self = this
|
||
var totalNum = value;
|
||
var nums = 0;
|
||
// 调用计时函数
|
||
setTimeout(timedCount(nums),10);
|
||
|
||
// 循环计时函数, 多次调用自身函数, nums为被传递的参数
|
||
function timedCount(nums){
|
||
var count = Math.round(totalNum/100);
|
||
if(count == 0) {
|
||
count = value;
|
||
}
|
||
nums+=count;
|
||
self.$set(self.count, key, nums)
|
||
// 设置条件使停止计时
|
||
if (nums<totalNum) {
|
||
setTimeout(function(){timedCount(nums)},10);
|
||
}else{
|
||
self.$set(self.count, key, nums)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
var windowHeight = $(window).height()
|
||
$('.cm-page-title').css({'height': windowHeight * 0.1 + 'px'})
|
||
$('.cm-main').css({'height': windowHeight * 0.9 + 'px'})
|
||
|
||
//创建和初始化地图函数
|
||
this.initPartyOrganizeData(0, '')
|
||
this.getMeetingCount('')
|
||
this.getMeetingCharts('')
|
||
|
||
$('.map-select').click(function () {
|
||
$('.slide-icon').toggleClass('rotate')
|
||
$('.map-select ul').slideToggle()
|
||
})
|
||
$('.map-select').blur(function () {
|
||
$('.slide-icon').removeClass('rotate')
|
||
$('.map-select ul').slideUp()
|
||
})
|
||
}
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|