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>
|