217 lines
8.8 KiB
HTML
217 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link rel="stylesheet" href="css/reset.css">
|
||
<link rel="stylesheet" href="css/moudle.css">
|
||
<script src="js/rem.js"></script>
|
||
<script src="js/vue.js"></script>
|
||
<script src="js/echarts.js"></script>
|
||
<script src="js/jquery-2.1.4.min.js"></script>
|
||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RrkB6G1UWWnGW2VN3ce9znbpWIfgRG4g"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!--标题-->
|
||
<div class="cm-page-title">
|
||
<ul>
|
||
<li><a href="javascript:void(0);">网格</a></li>
|
||
<li><a href="javascript:void(0);">党建</a></li>
|
||
<li><a href="javascript:void(0);">人口</a></li>
|
||
<li><a href="javascript:void(0);">统计报表</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--主体-->
|
||
<div class="cm-main">
|
||
<!--上部-->
|
||
<div class="cm-main-top">
|
||
<!--左侧图表-->
|
||
<div class="cm-left-charts">
|
||
<div class="cm-left-charts-box">
|
||
<h3>案件数</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>社区数据</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>正在处理</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--地图-->
|
||
<div class="cm-mid-map" id="map">
|
||
|
||
</div>
|
||
<!--右侧图表-->
|
||
<div class="cm-left-charts cm-right-charts">
|
||
<div class="cm-left-charts-box">
|
||
<h3>今日案件</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>今日受理</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
<div class="cm-left-charts-box">
|
||
<h3>今日完结</h3>
|
||
<div class="cm-charts-container">
|
||
<span>8888</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--下部-->
|
||
<div class="cm-main-bottom">
|
||
<div class="count">
|
||
<div class="count-box">一级片长：000</div>
|
||
<div class="count-box">二级片长：000</div>
|
||
<div class="count-box">三级片长：000</div>
|
||
<div class="count-box">四级片长：000</div>
|
||
<div class="count-box">五级片长：000</div>
|
||
</div>
|
||
<div class="bottom-chart" id="chart-box"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var vue = new Vue({
|
||
el:'#app',
|
||
data: {},
|
||
methods: {
|
||
initBaiduMap: function () {
|
||
function initMap(){
|
||
createMap();//创建地图
|
||
setMapEvent();//设置地图事件
|
||
addMapControl();//向地图添加控件
|
||
addMapOverlay();//向地图添加覆盖物
|
||
}
|
||
function createMap(){
|
||
map = new BMap.Map("map");
|
||
map.centerAndZoom(new BMap.Point(111.755512,40.848422),12);
|
||
}
|
||
function setMapEvent(){
|
||
map.enableScrollWheelZoom();
|
||
map.enableKeyboard();
|
||
map.enableDragging();
|
||
map.enableDoubleClickZoom()
|
||
}
|
||
function addClickHandler(target,window){
|
||
target.addEventListener("click",function(){
|
||
target.openInfoWindow(window);
|
||
});
|
||
}
|
||
function addMapOverlay(){
|
||
var markers = [
|
||
];
|
||
for(var index = 0; index < markers.length; index++ ){
|
||
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
|
||
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
|
||
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
|
||
})});
|
||
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
|
||
var opts = {
|
||
width: 200,
|
||
title: markers[index].title,
|
||
enableMessage: false
|
||
};
|
||
var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
|
||
marker.setLabel(label);
|
||
addClickHandler(marker,infoWindow);
|
||
map.addOverlay(marker);
|
||
};
|
||
}
|
||
//向地图添加控件
|
||
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);
|
||
}
|
||
var map;
|
||
initMap();
|
||
}
|
||
},
|
||
mounted: function () {
|
||
var windowHeight = $(window).height()
|
||
console.log(windowHeight)
|
||
$('.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'})
|
||
function lineChart() {
|
||
var line1 = echarts.init(document.getElementById("chart-box"));
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['每日上报', '每日处理'],
|
||
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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '每日上报',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name: '每日处理',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [220, 182, 191, 234, 290, 330, 310]
|
||
}
|
||
]
|
||
};
|
||
line1.setOption(option);
|
||
}
|
||
lineChart()
|
||
this.initBaiduMap()
|
||
}
|
||
})
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|