替换首页直接跳转大数据页面
This commit is contained in:
wans
parent
2932620199
commit
3d22945204
@ -11,327 +11,9 @@
|
|||||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||||
</head>
|
</head>
|
||||||
<body style="overflow: hidden;">
|
<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">
|
|
||||||
<!--上部-->
|
|
||||||
<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>
|
<script>
|
||||||
layui.config({
|
window.location.href = 'http://219.147.99.164:8082/2021/07/12/828375f5-c0c9-4ddf-aa84-0d4d1ef19c80.html';
|
||||||
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user