<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>电桩监控</title>
|
<link href="css/monitor.css" rel="stylesheet">
|
<script src="js/jquery-3.3.1.min.js"></script>
|
<script src="js/vincent.js"></script>
|
<script src="js/echarts/echarts.min.js"></script>
|
<script src="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script>
|
<script src="js/echarts/bmap.min.js"></script>
|
</head>
|
<style>
|
|
|
|
</style>
|
<body class="monitor-bg">
|
|
<!-- 电站详情 -->
|
<div class="animationTop" id="detail-modal">
|
<button id="closeBtn">关闭</button>
|
<ul>
|
<li>场站名: 下沙新加坡科技园充电站</li>
|
<li>快充个数: 10</li>
|
<li>快充电价: 1.08元/度</li>
|
<li>慢充个数: 5</li>
|
<li>慢充电价: 1.44元/度</li>
|
<li>总收入: 4212.4元</li>
|
</ul>
|
</div>
|
|
<!--头部-->
|
<div class="header" >
|
<div class="button-left"></div>
|
<div class="button-right"></div>
|
<div class="time-tools">
|
2019-04-27 10:30:01 星期一
|
</div>
|
<div class="title">
|
自动仓库WCS监控平台
|
</div>
|
</div>
|
|
<!--主体-->
|
<div class="container">
|
|
<!--左-->
|
<div class="container-element-side">
|
<div class="container-side-box">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="introduce">
|
<h6>自动化立体仓库</h6>
|
<p class="english">Automatic Storageand Retrieval System</p>
|
<p class="introduce-content"> 利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>
|
</div>
|
<div class="charge-info">
|
<div class="info-header">
|
<h6>仓库数据</h6>
|
<p class="english">warehouse data</p>
|
</div>
|
<div class="charge-info-elem">
|
<img src="img/a.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count">7777</i>
|
<span class="unit">个</span>
|
</div>
|
<div class="content">库位总数(个)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="img/b.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count">777</i>
|
<span class="unit">个</span>
|
</div>
|
<div class="content">使用中库位(个)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="img/c.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count">33</i>
|
<span class="unit">托</span>
|
</div>
|
<div class="content">今日入库(托)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="img/d.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count">14296</i>
|
<span class="unit">千瓦时</span>
|
</div>
|
<div class="content">今日电总量(千瓦时)</div>
|
</div>
|
</div>
|
</div>
|
<div class="footer container-side-box">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<span>中扬物流客户服务中心</span>
|
<img src="img/wxCode.jpg">
|
</div>
|
</div>
|
</div>
|
|
<!--中-->
|
<div class="container-element-middle">
|
<div class="map-board">
|
<div id="map">
|
</div>
|
</div>
|
<div class="station-list">
|
<div class="outside">
|
<div class="inside">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="station-name">A</div>
|
</div>
|
</div>
|
<div class="outside">
|
<div class="inside">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="station-name">B</div>
|
</div>
|
</div>
|
<div class="outside">
|
<div class="inside">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="station-name">C</div>
|
</div>
|
</div>
|
<div class="outside">
|
<div class="inside">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="station-name">D</div>
|
</div>
|
</div>
|
</ul>
|
</div>
|
</div>
|
|
<!--右-->
|
<div class="container-element-side">
|
<div class="container-side-box right-top">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="line-chart-title">
|
<div class="order-report">
|
<span class="order-report-left" >入库单统计</span>
|
<span class="order-report-right">31</span>
|
</div>
|
<div class="order-report-english english">
|
<span class="order-report-left">ORDER STATISTICS</span>
|
<span class="order-report-right">今日充电订单数</span>
|
</div>
|
</div>
|
<!--折线图-->
|
<div id="line-charts"></div>
|
</div>
|
<div class="container-side-box right-middle">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="top-header">
|
<div class="income-date">
|
<span class="income-date-left" >库存类型</span>
|
<span class="income-date-right">今天</span>
|
</div>
|
<div class="income-date-english english">
|
<span class="income-date-left">INCOME DATE</span>
|
<span class="income-date-right">Today</span>
|
</div>
|
</div>
|
<div class="top-main">
|
<div id="pie-charts"></div>
|
</div>
|
<div class="top-footer">
|
<div class="top-footer-elem">
|
<div class="elem-header" id="elem-header-first">
|
</div>
|
<div class="elem-main">
|
在库
|
</div>
|
<div class="elem-footer">
|
3,300
|
</div>
|
</div>
|
<div class="top-footer-elem">
|
<div class="elem-header" id="elem-header-second">
|
</div>
|
<div class="elem-main">
|
空库
|
</div>
|
<div class="elem-footer">
|
161
|
</div>
|
</div>
|
<div class="top-footer-elem">
|
<div class="elem-header" id="elem-header-third">
|
</div>
|
<div class="elem-main">
|
使用中
|
</div>
|
<div class="elem-footer">
|
666
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="container-side-box right-bottom">
|
<div class="image-border image-border1"></div>
|
<div class="image-border image-border2"></div>
|
<div class="image-border image-border3"></div>
|
<div class="image-border image-border4"></div>
|
<div class="progress-bar">
|
<div class="usage-rate">
|
<span class="usage-rate-left" >库位使用率</span>
|
<span class="usage-rate-right">60%</span>
|
</div>
|
<div class="usage-rate-english english">
|
<span class="usage-rate-left">EQUIPMENT USAGE THIS MONTH</span>
|
<span class="usage-rate-right">同比上月 + 5%</span>
|
</div>
|
</div>
|
<div class="progress-bar-modal">
|
<div class="bar-container">
|
<div class="bar-proportion"><span>实际使用</span></div>
|
</div>
|
<i class="bar-container-count">7777<span>个</span></i>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</body>
|
<script>
|
// 遮罩
|
let closeBtn = document.getElementById('closeBtn');
|
let detailModal = document.getElementById('detail-modal');
|
closeBtn.onclick = function () {
|
detailModal.style.display = 'none';
|
};
|
var data = [];
|
var chart = echarts.init(document.getElementById('map'));
|
var lastStationId = null;
|
var defalutName = '递递叭叭充电桩监控平台';
|
var lastName = defalutName;
|
function reload(stationId){
|
data = [];
|
let center = [120.307658, 30.372121];
|
let param = {
|
stationId: stationId
|
};
|
http.post("http://localhost:8080/admin/stations.action", param, function (res) {
|
res.data.list.map(item => {
|
data.push({
|
name: item.name,
|
stationId: item.stationId,
|
value: [item.lon, item.lat]
|
})
|
});
|
option = {
|
backgroundColor: 'transparent',
|
title: {
|
text: '',
|
subtext: '',
|
sublink: '',
|
left: 'center',
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
tooltip : {
|
trigger: 'item'
|
},
|
bmap: {
|
center: stationId==null?center:data[0].value,
|
zoom: stationId==null?12:18,
|
roam: true, // 是否可缩放
|
},
|
series : [
|
{
|
name: '',
|
type: 'effectScatter',
|
coordinateSystem: 'bmap',
|
data: data,
|
symbolSize: function () {
|
return 18;
|
},
|
showEffectOn: 'emphasis',
|
rippleEffect: {
|
brushType: 'stroke'
|
},
|
hoverAnimation: true,
|
label: { // 标签
|
formatter: '{b}',
|
position: 'right',
|
show: false
|
},
|
itemStyle: {
|
color: '#f4e925',
|
shadowBlur: 10,
|
shadowColor: '#333'
|
},
|
zlevel: 1
|
},
|
]
|
};
|
|
chart.setOption(option);
|
|
var bMap = chart.getModel().getComponent('bmap').getBMap();
|
bMap.setMapStyle({
|
style : "midnight",
|
});
|
|
if (stationId != null) {
|
lastStationId = stationId;
|
lastName = data[0].name;
|
} else {
|
lastStationId = null;
|
lastName = defalutName;
|
}
|
|
}, 'form');
|
}
|
|
reload();
|
|
chart.on('click', function (param) {
|
reload(param.data.stationId);
|
$('.title').html(param.data.name);
|
});
|
|
// 返回
|
$('.button-left').click(function () {
|
reload();
|
$('.title').html(defalutName);
|
});
|
// 刷新
|
$('.button-right').click(function () {
|
detailModal.style.display = 'block';
|
// reload(lastStationId);
|
// $('.title').html(lastName);
|
});
|
|
|
// 折线图
|
let lineCharts = echarts.init(document.getElementById('line-charts'));
|
lineChartOption = {
|
// animation: false,
|
grid: {
|
top: '0%',
|
left: '0%',
|
right: '2%',
|
bottom: '0%',
|
containLabel: true,
|
// backgroundColor: 'rgb(116,148,174,0.3)',
|
show: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['1', '2', '3', '4', '5', '6', '7'],
|
axisLabel: {
|
textStyle:{
|
color:'#aaa', //坐标的字体颜色
|
fontSize: 6,
|
},
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#3590ac', // 坐标轴颜色
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
textStyle:{
|
color:'#aaa', //坐标的字体颜色
|
fontSize: 5
|
},
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#3590ac', // 坐标轴颜色
|
}
|
},
|
splitLine:{
|
show: true,
|
lineStyle:{
|
color:'#517a9b', // 分割线颜色
|
}
|
}
|
|
},
|
series: [{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
areaStyle: {
|
color: '#7494ae' // 折线区域颜色
|
},
|
itemStyle:{
|
normal:{
|
color:'#3590ac', //折点颜色
|
lineStyle:{
|
color:'#3590ac' //折线颜色
|
}
|
}
|
}
|
}]
|
};
|
|
lineCharts.setOption(lineChartOption);
|
|
// 饼图
|
let pieCharts = echarts.init(document.getElementById('pie-charts'));
|
pieChartOption = {
|
// animation: false,
|
grid: {
|
top: '0%',
|
left: '0%',
|
right: '0%',
|
bottom: '0%',
|
containLabel: false,
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 10,
|
data: ['1', '2', '3']
|
},
|
series: [
|
{
|
name: '访问来源',
|
type: 'pie',
|
radius: ['25%', '70%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: false,
|
fontSize: '50',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{value: 335, name: '1'},
|
{value: 310, name: '2'},
|
{value: 234, name: '3'},
|
],
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
},
|
normal:{
|
color:function(params) {
|
//自定义颜色
|
let colorList = [
|
'#28b9a2', '#69d7fc', '#fcbf5d',
|
];
|
return colorList[params.dataIndex]
|
}
|
}
|
}
|
}
|
]
|
};
|
pieCharts.setOption(pieChartOption);
|
|
</script>
|
</html>
|
