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