替换首页直接跳转大数据页面
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/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>
|
||||
<body>
|
||||
<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)
|
||||
}
|
||||
})
|
||||
});
|
||||
window.location.href = 'http://219.147.99.164:8082/2021/07/12/828375f5-c0c9-4ddf-aa84-0d4d1ef19c80.html';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user