<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>大屏可视化</title>
|
<link rel="stylesheet" href="css/index.css">
|
<link rel="stylesheet" href="css/swiper-bundle.min.css">
|
<script src="js/jquery-3.3.1.min.js"></script>
|
<script src="js/swiper-bundle.min.js"></script>
|
<script src="js/echarts/echarts.min.js"></script>
|
<script src="../../static/js/common.js"></script>
|
</head>
|
<body>
|
<div class="container" id="app">
|
<div class="head">
|
<div class="head-title">自动仓库监控平台</div>
|
<div class="time-tools">
|
<span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span>
|
</div>
|
</div>
|
<div class="body">
|
<div class="area">
|
<div class="box">
|
<div class="box-title">测试状态</div>
|
<div class="box-body">
|
<div class="table-head" style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 3">包号</div><div style="flex: 1">测试状态</div></div>
|
<div class="swiper" style="height: 85%">
|
<div class="swiper-wrapper table-item">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="box">
|
<div class="box-title">12小时入出库统计</div>
|
<div class="box-body" id="smoothedLineChart"></div>
|
</div>
|
</div>
|
<div class="area">
|
<div class="box">
|
<div class="box-title">使用率</div>
|
<div class="box-body" id="stackedColumnChart"></div>
|
</div>
|
<div class="box">
|
<div class="box-title">合格率</div>
|
<div class="box-body" id="barLabelRotation"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
<script>
|
// 左
|
$('.time-tools').click(function () {
|
exitFull();
|
});
|
$('.head-title').click(function () {
|
full();
|
});
|
//开始全屏
|
function full() {
|
var docElm = document.documentElement;
|
//W3C
|
if (docElm.requestFullscreen) {
|
docElm.requestFullscreen();
|
}
|
//FireFox
|
else if (docElm.mozRequestFullScreen) {
|
docElm.mozRequestFullScreen();
|
}
|
//Chrome等
|
else if (docElm.webkitRequestFullScreen) {
|
docElm.webkitRequestFullScreen();
|
}
|
//IE11
|
else if (elem.msRequestFullscreen) {
|
elem.msRequestFullscreen();
|
}
|
}
|
|
//退出全屏
|
function exitFull() {
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
}
|
else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen();
|
}
|
else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen();
|
}
|
else if (document.msExitFullscreen) {
|
document.msExitFullscreen();
|
}
|
}
|
let url = 'http://10.12.55.200:8080/fnwms'
|
var item = [{locNo: '1',locSts: '1',mk: '1',packStatus$: '1'}]
|
var year = '2020';
|
var month = '05';
|
var day = '01';
|
var hour = '08';
|
var minute = '00';
|
var second = '00';
|
var week = '星期一';
|
initBasicInformation();
|
setTimeout(()=>{
|
initTest();
|
},500)
|
setInterval(()=>{
|
initUsageRate();
|
initQualified();
|
initEvening();
|
getDate();
|
setDate();
|
},1000)
|
setInterval(()=>{
|
location.reload()
|
},600000)
|
function initTest() {
|
var box = ''
|
var el
|
var len = item.length
|
var autoplay = true
|
var css = 'table-td'
|
if (len == 0) {
|
box = "<div class='swiper-none'>暂无测试数据</div>"
|
} else if (len < 5) {
|
var itemInfo = {locNo: '',locSts: '',mk: '',packStatus$: ''}
|
for (var j = 0; j < 5-len;j++) {
|
css = 'table-td2'
|
autoplay = false
|
item.push(itemInfo)
|
}
|
}
|
for (var i = 0; i < item.length; i++) {
|
el = "<div class='swiper-slide "+ css + " '><div style='flex: 1'>"
|
+ item[i].locNo + "</div><div style='flex: 1'>"
|
+ item[i].locSts + "</div><div style='flex: 3'>"
|
+ item[i].mk + "</div><div style='flex: 1'>"
|
+ item[i].packStatus$
|
+ "</div></div>"
|
box = box + el
|
}
|
$('.swiper-wrapper').append(box)
|
var mySwiper = new Swiper ('.swiper', {
|
direction: 'vertical', // 垂直切换选项
|
loop: true, // 循环模式选项
|
autoplay:autoplay,
|
slidesPerView: 5,
|
})
|
}
|
function setDate() {
|
getDate();
|
$('#bar-year').text(year);
|
$('#bar-month').text(month);
|
$('#bar-day').text(day);
|
$('#bar-hour').text(hour);
|
$('#bar-minute').text(minute);
|
$('#bar-second').text(second);
|
}
|
/**
|
* 获取时间
|
*/
|
function getDate() {
|
http.get("http://10.12.55.200:8080/fnwcs/monitor/date", null, function (res) {
|
if (res.code === 200){
|
year = res.data.year;
|
month = res.data.month;
|
day = res.data.day;
|
hour = res.data.hour;
|
minute = res.data.minute;
|
second = res.data.second;
|
week = res.data.week;
|
} else if (res.code === 403){
|
parent.location.href = baseUrl+"/login";
|
} else {
|
layer.msg("连接服务器失败", {icon: 2});
|
}
|
})
|
|
}
|
/**
|
* 堆叠柱状图 -- 使用率
|
* */
|
// 基于准备好的dom，初始化echarts实例
|
var stackedColumnChart = echarts.init(document.getElementById('stackedColumnChart'));
|
// 指定图表的配置项和数据
|
var stackedColumnChartOption = {
|
// 全局调色盘。
|
color: ['#00d887', '#0184d5',],
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
textStyle:{color:'#FFF',},
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
data: ['测试库位', '静置库位', '暂存库位', 'NG库位']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
}
|
],
|
series: [
|
{
|
name: '已使用库位',
|
type: 'bar',
|
stack: 'Ad',
|
emphasis: {
|
focus: 'series'
|
},
|
z:99,
|
label: {
|
show: true,
|
fontSize: 16,
|
fontWeight: 'bold',
|
position: 'top',
|
color: '#FFF',
|
offset: [15,5],
|
},
|
barWidth:'50%',
|
data: [],
|
},
|
{
|
name: '空闲库位',
|
type: 'bar',
|
stack: 'Ad',
|
emphasis: {
|
focus: 'series'
|
},
|
label: {
|
show: true,
|
fontSize: 16,fontWeight: 'bold',
|
position: 'top',offset: [-15,5],
|
},
|
data: []
|
},
|
]
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
stackedColumnChart.setOption(stackedColumnChartOption);
|
|
/**
|
* 柱状图标签旋转 -- 合格率
|
* */
|
var chartDom = document.getElementById('barLabelRotation');
|
var barLabelRotation = echarts.init(chartDom);
|
var barLabelRotationOption;
|
|
barLabelRotationOption = {
|
color: ['#80FFA5', '#FFBF00','#00DDFF', '#37A2FF', '#FF0087', ],
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
textStyle:{color:'#FFF',fontSize:14},
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
data: ['未知', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
},
|
series: [
|
{
|
name: '合格',
|
type: 'bar',
|
stack: 'Ad',
|
label: {
|
show: true,
|
fontSize: 16,
|
fontWeight: 'bold',
|
position: 'top',
|
color: '#FFF',
|
offset: [15,5],
|
},
|
z:99,
|
barWidth:'50%',
|
data: [10, 1]
|
},
|
{
|
name: '不合格',
|
type: 'bar',
|
stack: 'Ad',
|
label: {
|
show: true,
|
fontSize: 14,fontWeight: 'bold',
|
position: 'top',offset: [-15,5],
|
},
|
data: [9, 3]
|
}
|
]
|
};
|
|
barLabelRotationOption && barLabelRotation.setOption(barLabelRotationOption);
|
|
|
var smoothedLineChart = echarts.init(document.getElementById('smoothedLineChart'));
|
var smoothedLineChartOption;
|
|
smoothedLineChartOption = {
|
color: ['rgb(225,5,85)', 'rgb(255,72,31)', 'rgb(0,146,252)', 'rgb(13,46,207)', '#FFBF00'],
|
legend: {
|
icon: 'roundRect',
|
data: ['出库', '入库'],
|
textStyle:{color:'#FFF',fontSize:14},
|
},
|
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
left: '3%',
|
right: '5%',
|
bottom: '5%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#FFF'
|
}
|
},
|
},
|
series: [
|
{
|
name: '出库',
|
type: 'line',
|
lineStyle: {
|
normal: {
|
width: 4
|
}
|
},
|
smooth: true,
|
data: [8, 7, 10, 6, 10, 10, 10]
|
},
|
{
|
name: '入库',
|
type: 'line',
|
lineStyle: {
|
normal: {
|
width: 4
|
}
|
},
|
smooth: true,
|
data: [9, 9, 10, 5, 10, 10, 10]
|
},
|
]
|
};
|
|
smoothedLineChartOption && smoothedLineChart.setOption(smoothedLineChartOption);
|
|
|
function initUsageRate() {
|
$.ajax({
|
url: url+"/mobile/pack/usage/rate",
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
for (var i = 0; i < res.data.length; i++) {
|
stackedColumnChartOption.series[0].data[i] = res.data[i].currentQuantity
|
stackedColumnChartOption.series[1].data[i] = (res.data[i].total - res.data[i].currentQuantity)
|
}
|
stackedColumnChart.setOption(stackedColumnChartOption);
|
}
|
}
|
});
|
}
|
function initQualified() {
|
$.ajax({
|
url: url+"/mobile/pack/qualified",
|
method: 'POST',
|
success: function (res) {
|
var qualifieds = []
|
if (res.code === 200) {
|
res.data.reverse()
|
for (var i = 0; i < res.data.length; i++) {
|
barLabelRotationOption.xAxis.data[i] = res.data[i].week
|
barLabelRotationOption.series[0].data[i] = res.data[i].qualified
|
barLabelRotationOption.series[1].data[i] = res.data[i].unqualified
|
var qualified = res.data[i].qualified / res.data[i].total
|
var percent = (Math.round(qualified*10000))/100+'%';
|
qualifieds.push(percent)
|
}
|
$('#lastWeek').text(qualifieds[0])
|
$('#thisWeek').text(qualifieds[1])
|
barLabelRotation.setOption(barLabelRotationOption);
|
}
|
}
|
});
|
}
|
function initEvening() {
|
$.ajax({
|
url: url+"/mobile/pack/evening",
|
method: 'POST',
|
success: function (res) {
|
res.data.reverse()
|
if (res.code === 200) {
|
for (var i = 0; i < res.data.length;i++) {
|
smoothedLineChartOption.xAxis.data[i] = res.data[i].week
|
smoothedLineChartOption.series[0].data[i]=res.data[i].unqualified
|
smoothedLineChartOption.series[1].data[i]=res.data[i].qualified
|
}
|
smoothedLineChart.setOption(smoothedLineChartOption)
|
}
|
}
|
});
|
}
|
function initBasicInformation() {
|
$.ajax({
|
url: url+"/mobile/pack/basic/information",
|
method: 'POST',
|
success: function (res) {
|
var array = []
|
if (res.code === 200) {
|
for (var i = 0; i < res.data.length; i++) {
|
array.push(res.data[i])
|
}
|
item = array
|
}
|
}
|
});
|
}
|
|
</script>
|
