338 lines
15 KiB
HTML
338 lines
15 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">
|
|
</head>
|
|
<body style="overflow: hidden;">
|
|
<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">
|
|
<!--上部-->
|
|
<div class="cm-main-top">
|
|
<!--左侧图表-->
|
|
<div class="cm-left-charts" v-cloak>
|
|
<div class="cm-left-charts-box">
|
|
<h3>案件数</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.caseTotal}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="cm-left-charts-box">
|
|
<h3>社区数据</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.communityCount}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="cm-left-charts-box">
|
|
<h3>正在处理</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.handling}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--地图-->
|
|
<div class="cm-mid-map" id="map">
|
|
|
|
</div>
|
|
<!--右侧图表-->
|
|
<div class="cm-left-charts cm-right-charts" v-cloak>
|
|
<div class="cm-left-charts-box">
|
|
<h3>今日案件</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.todayTotal}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="cm-left-charts-box">
|
|
<h3>今日受理</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.todayHandle}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="cm-left-charts-box">
|
|
<h3>今日完结</h3>
|
|
<div class="cm-charts-container">
|
|
<span>{{dataCount.todayClose}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--下部-->
|
|
<div class="cm-main-bottom" v-cloak>
|
|
<div class="count">
|
|
<div class="count-box" v-for="list in bossCount">{{list}}</div>
|
|
</div>
|
|
<div class="bottom-chart" id="chart-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=2qzNKd33lQERUDakqDDyvLOyqM1x2i8y"></script>
|
|
<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="assets/js/baidu-map-0.0.1.min.js"></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: {
|
|
map: null,
|
|
bossCount: [],
|
|
baseAreas: [],
|
|
areas: [],
|
|
drawAreas: [],
|
|
dataCount: {
|
|
caseTotal: 0, // 案件数
|
|
communityCount: 0, // 社区数
|
|
handling: 0, // 正在处理
|
|
todayClose: 0, // 今日完结
|
|
todayHandle: 0, // 今日处理
|
|
todayTotal: 0 // 今日案件
|
|
},
|
|
xAxis: [],
|
|
dailyCaseCharts: {
|
|
dailyCase: [],
|
|
title: ''
|
|
},
|
|
dailyHandleCharts: {
|
|
dailyHandle: [],
|
|
title: ''
|
|
}
|
|
},
|
|
methods: {
|
|
initMap: function() {
|
|
var self = this;
|
|
top.restAjax.get(top.restAjax.path('api/servicecity/getmapinit', []), {}, null, function(code, data) {
|
|
// 初始化基础片区
|
|
if(typeof(data.areaPoints) != 'undefined' && data.areaPoints != null && data.areaPoints != '') {
|
|
var areaPoints = data.areaPoints.split('$');
|
|
for(var i = 0; i < areaPoints.length; i++) {
|
|
var item = areaPoints[i];
|
|
var points = item.split(';');
|
|
var pointArray = [];
|
|
for(var j = 0; j < points.length; j++) {
|
|
var point = points[j].split(',');
|
|
pointArray.push({
|
|
lng: point[0],
|
|
lat: point[1]
|
|
})
|
|
}
|
|
self.baseAreas.push({
|
|
id: i,
|
|
name: null,
|
|
points: pointArray
|
|
})
|
|
}
|
|
}
|
|
// 初始化地图
|
|
self.map = new BaiduMap('map', {enableMapClick: false});
|
|
self.map.setCenterAndZoom({
|
|
lng: data.mapLng,
|
|
lat: data.mapLat
|
|
}, 13);
|
|
/*var mapStyle ={
|
|
features: ["road", "building","water","land"],//隐藏地图上的poi
|
|
style : "midnight" //设置地图风格为高端黑
|
|
}
|
|
self.map.setMapStyle(mapStyle);*/
|
|
// 必须
|
|
self.map.setDefaultConfig();
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
},
|
|
getBossCount: function() {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/servicecity/countbooslevel', []), {}, null, function(code, data) {
|
|
self.bossCount = data.data.bossLevel;
|
|
}, 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);
|
|
});
|
|
},
|
|
getReportCaseCensus: function() {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/servicecity/getreportcasecensus', []), {}, null, function(code, data) {
|
|
self.dataCount.caseTotal = data.data.caseTotal
|
|
self.dataCount.communityCount = data.data.communityCount
|
|
self.dataCount.handling = data.data.handling
|
|
self.dataCount.todayClose = data.data.todayClose
|
|
self.dataCount.todayHandle = data.data.todayHandle
|
|
self.dataCount.todayTotal = data.data.todayTotal
|
|
|
|
self.xAxis = data.data.xAxis
|
|
|
|
self.dailyCaseCharts.dailyCase = data.data.dailyCaseCharts.dailyCase
|
|
self.dailyCaseCharts.title = data.data.dailyCaseCharts.title
|
|
|
|
self.dailyHandleCharts.dailyHandle = data.data.dailyHandleCharts.dailyHandle
|
|
self.dailyHandleCharts.title = data.data.dailyHandleCharts.title
|
|
|
|
self.lineChart()
|
|
}, 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);
|
|
});
|
|
},
|
|
// 片长片区
|
|
initCommunityBossArea: function(level) {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/servicecity/listuserandpoints?communityBossLevel={level}', [level]), {}, null, function(code, data) {
|
|
// 划片
|
|
self.takeUserArea(data);
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
},
|
|
// 人员划片
|
|
takeUserArea: function(data, addPoints) {
|
|
var self = this;
|
|
self.isTakeUserArea = true;
|
|
self.areas.splice(0, self.areas.length);
|
|
self.takeArea(data, addPoints);
|
|
},
|
|
// 划片
|
|
takeArea: function(data, addPoints) {
|
|
var self = this;
|
|
self.drawAreas.splice(0, self.drawAreas.length);
|
|
var allPointArray = [];
|
|
for(var i = 0, item = data[i]; item = data[i++];) {
|
|
var points = [];
|
|
for(var j = 0, point = item.pointArray[j]; point = item.pointArray[j++];) {
|
|
points.push(
|
|
new BaiduMap.Point(point.lng, point.lat)
|
|
)
|
|
}
|
|
allPointArray = allPointArray.concat(points);
|
|
// 展示默认背景
|
|
self.map.initBackgroundGrid({
|
|
gridArray: [
|
|
{
|
|
id: item.gridId,
|
|
label: item.gridName,
|
|
fillColor: item.fillColor,
|
|
pointArray: points
|
|
}
|
|
]
|
|
});
|
|
}
|
|
if(typeof(addPoints) != 'undefined') {
|
|
allPointArray = allPointArray.concat(addPoints);
|
|
}
|
|
},
|
|
lineChart: function() {
|
|
var self = this;
|
|
var line1 = echarts.init(document.getElementById("chart-box"));
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: [self.dailyCaseCharts.title, self.dailyHandleCharts.title],
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
padding: [15,0,0,0]
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: self.xAxis,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: self.dailyCaseCharts.title,
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: self.dailyCaseCharts.dailyCase
|
|
},
|
|
{
|
|
name: self.dailyHandleCharts.title,
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: self.dailyHandleCharts.dailyHandle
|
|
}
|
|
]
|
|
};
|
|
line1.setOption(option);
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.initMap()
|
|
var windowHeight = $(window).height()
|
|
$('.cm-page-title').css({'height': windowHeight * 0.1 + 'px'})
|
|
$('.cm-main').css({'height': windowHeight * 0.9 + 'px'})
|
|
var countLineHeight = $('.count').height()
|
|
$('.count-box').css({'lineHeight': countLineHeight + 'px'})
|
|
this.getBossCount()
|
|
this.getReportCaseCensus()
|
|
this.initCommunityBossArea(3)
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|