<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>显示器</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<link rel="stylesheet" type="text/css" href="../static/css/common.css">
|
<link rel="stylesheet" type="text/css" href="./monitor.css">
|
<link href="../static/layui/css/layui.css" rel="stylesheet">
|
<link href="monitor/css/lunbo.css" rel="stylesheet">
|
<script src="monitor/js/jquery-3.3.1.min.js"></script>
|
<script src="monitor/js/echarts/echarts.min.js"></script>
|
<script src="../static/layui/layui.js"></script>
|
<script src="../static/js/common.js"></script>
|
<script src="monitor/js/monitor.js"></script>
|
<style>
|
.abc {
|
border-top: 3px solid rgb(239, 177, 102);
|
border-right: 1px solid #FFF;
|
border-left: 1px solid #FFF;
|
}
|
</style>
|
</head>
|
<body>
|
<div style="padding: 10px;height: 100%;float: left;width: 6%">
|
<div class="button-window"></div>
|
</div>
|
|
|
<div style="height: 100%;padding-left: 6%">
|
<div style="padding: 10px;height: 100%">
|
<div style="width: 100%;height: 100%;">
|
<div class="head">
|
<label id="lcd-100" class="label lcd">LCD1</label>
|
<label id="lcd-110" class="label lcd">LCD2</label>
|
<label id="lcd-113" class="label lcd">LCD3</label>
|
</div>
|
<div class="body">
|
<!--<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> <span id="bar-week"></span>-->
|
<!--</div>-->
|
<div class="canves1 aData">
|
<div style="width: 25%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around;">
|
<div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计走行距离：<span id="xDistance"></span>米</div>
|
<div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计升降距离：<span id="yDistance"></span>米</div>
|
<div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计走行时长：<span id="xDuration"></span>秒</div>
|
<div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计升降时长：<span id="yDuration"></span>秒</div>
|
</div>
|
<div id="ledData" style="width: 50%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around;background-color: #93D1FF;text-align: center;">
|
AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM
|
</div>
|
<div style="width: 25%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
<div style="width: 80%;height: 40%">
|
<div id="line-charts"></div>
|
</div>
|
<div style="width: 80%;height: 40%">
|
<div id="pie-charts"></div>
|
</div>
|
</div>
|
|
</div>
|
<div class="canves1 bData">
|
<!--展示出库信息-->
|
<div id="ledData4" style="width: 100%;height: 100%;font-size: 30px;display: flex;flex-direction: column;background-color: #93D1FF;display: none">
|
<div class="info-head">
|
<!--头部-->
|
<div style="flex: 2">托盘码:80001289</div>
|
<div style="flex: 2">商品编号</div>
|
<div style="flex: 2">商品名称</div>
|
<div style="flex: 2">规格</div>
|
<div style="flex: 1">数量</div>
|
</div>
|
<div class="info-context">
|
<div style="flex: 2">index</div>
|
<div style="flex: 2">77008945781523</div>
|
<div style="flex: 2">西瓜</div>
|
<div style="flex: 2">500g</div>
|
<div style="flex: 1">30</div>
|
</div>
|
</div>
|
</div>
|
<div class="canves" style="display: none">
|
<!--头部-->
|
<div class="canves-header" >
|
<div class="button-left"></div>
|
<div class="button-right"></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> <span id="bar-week"></span>-->
|
<!--</div>-->
|
<div class="canves-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="monitor/img/a1.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count" id="xDistance0">0</i>
|
<span class="unit">m</span>
|
</div>
|
<div class="content">累计走行距离(米)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="monitor/img/b1.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count" id="yDistance0">0</i>
|
<span class="unit">m</span>
|
</div>
|
<div class="content">累计升降距离(米)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="monitor/img/c1.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count" id="xDuration0">0</i>
|
<span class="unit">s</span>
|
</div>
|
<div class="content">累计走行时长(秒)</div>
|
</div>
|
</div>
|
<div class="charge-info-elem">
|
<img src="monitor/img/d1.png">
|
<div class="info-detail">
|
<div class="real-data">
|
<i class="count" id="yDuration0">0</i>
|
<span class="unit">s</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="../static/images/barcode.png">
|
</div>
|
</div>
|
</div>
|
|
<!--中-->
|
<div class="container-element-middle">
|
<div class="map-board">
|
<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="crn-speed">
|
<div class="speed-content">
|
<div id="crn-chart" class="speed-chart">
|
</div>
|
</div>
|
</div>
|
|
<!-- 中下 -->
|
<div class="scroll-pane">
|
<div class="layui-carousel" id="banner">
|
<div carousel-item>
|
<div class="item-img" id="img-1" style="background-color: red"></div>
|
<div class="item-img" id="img-2" style="background-color: gold"></div>
|
<div class="item-img" id="img-3" style="background-color: green"></div>
|
<div class="item-img" id="img-4" style="background-color: white"></div>
|
<div class="item-img" id="img-5" style="background-color: darkgoldenrod"></div>
|
</div>
|
</div>
|
|
<div id="led-content">
|
<pre id="led-p-content"></pre>
|
</div>
|
|
|
</div>
|
|
</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">
|
<span id="stock-count">0</span>
|
</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">
|
<span id="empty-count">0</span>
|
</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">
|
<span id="none-count">0</span>
|
</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"><span id="usedPr">0</span>%</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="layui-progress layui-progress-big" lay-filter="used-progress" style="background-color: #233751;width: 80%;display: inline-block">
|
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
</div>
|
<!-- <div class="bar-container">-->
|
<!-- <div class="bar-proportion"><span>实际使用</span></div>-->
|
<!-- </div>-->
|
<i class="bar-container-count"><span id="used">0</span></i>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="canves" style="display: none">
|
<div class="canves-header" >
|
<div class="button-left"></div>
|
<div class="button-right"></div>
|
|
<div class="canves-title">
|
自动仓库WCS监控平台
|
</div>
|
</div>
|
<div style="height: 90%;">
|
<div class="container-side-box" style="width: 95%;height: 95%;margin: 20px auto">
|
<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 style="display: flex;align-items: center;justify-content: center;height: 100%;font-size: 40px">
|
Automatic Storageand Retrieval System
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="monitor-operate">
|
<!--显示器选择-->
|
<div class="monitor-operate-item">
|
<div style="width: 100%" class="item-top">
|
<button id="selectAll">全选</button>
|
<button id="unSelectAll">取消全选</button>
|
</div>
|
<div id="checked" style="overflow-y: scroll;height: 80%;border: 1px solid #888" >
|
<label for=""><input type="checkbox" name="monitor" checked="checked" value="100">1号显示器</label>
|
<label for=""><input type="checkbox" name="monitor" value="110">2号显示器</label>
|
<label for=""><input type="checkbox" name="monitor" value="113">3号显示器</label>
|
</div>
|
</div>
|
<!--文本内容-->
|
<div class="monitor-operate-item" style="height: 100%;min-width: 200px;display: flex;align-items: center;">
|
<textarea name="textarea" id="sendContent" cols="50" rows="3" style="font-size: 20px" placeholder="显示内容"></textarea>
|
</div>
|
<!--操作-->
|
<div class="monitor-operate-item" style="height: 100%;min-width: 260px;display: flex;justify-content: space-around">
|
<button id="sendMessage">发送</button>
|
<button id="removeMessage">重置</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
<script>
|
layui.use(['element', 'carousel'], function(){
|
var carousel = layui.carousel;
|
var element = layui.element;
|
// 轮播图
|
carousel.render({
|
elem: '#banner'
|
,width: '100%' //设置容器宽度
|
,arrow: 'hover' // 切换箭头默认显示状态，可选值为 hover（悬停显示） always（始终显示） none（始终不显示）
|
,interval: '3000' // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
|
,anim: 'fade'
|
});
|
});
|
|
/***********************************************************************************/
|
/************************************* 头部按钮 *************************************/
|
/***********************************************************************************/
|
// 左
|
$('.button-left').click(function () {
|
exitFull();
|
});
|
// 右
|
$('.button-right').click(function () {
|
full();
|
});
|
|
var crnId = 1;
|
var lcdId = 100;
|
var lcdData = 'TEST DATA'
|
var lcdControll = 1;
|
$('.lcd').click(function () {
|
var id = this.id.split("-")[1];
|
switch (id) {
|
case '100':
|
crnId = 1;
|
lcdId = 100;
|
break;
|
case '110':
|
crnId = 1;
|
lcdId = 110;
|
break;
|
case '113':
|
crnId = 2;
|
lcdId = 113;
|
break;
|
}
|
getOther2(crnId,lcdId)
|
})
|
|
// lcd切换按钮
|
$(function() {
|
$(".label").click(function() {
|
$(this).addClass("abc").siblings().removeClass("abc");
|
});
|
});
|
// 全选按钮
|
$("#selectAll").click(function(){
|
$('input:checkbox[name=monitor]').each(function () {
|
$(this).prop("checked",true);
|
})
|
});
|
// 取消全选按钮
|
$("#unSelectAll").click(function(){
|
$('input:checkbox[name=monitor]').each(function () {
|
$(this).prop("checked",false);
|
})
|
});
|
// 发送节目按钮
|
$('#sendMessage').click(function () {
|
var sendMessage = $('#sendContent').val()
|
$('input:checkbox[name=monitor]:checked').each(function () {
|
var ledId = parseInt($(this).val())
|
console.log(typeof ledId,ledId,sendMessage)
|
$.ajax({
|
url: baseUrl+"/monitor/led/add/program",
|
data: {ledId:ledId,msg:sendMessage},
|
method: 'GET',
|
success: function (res) {
|
console.log(res)
|
}
|
})
|
})
|
|
})
|
// 移除节目按钮
|
$('#removeMessage').click(function () {
|
var sendMessage = ''
|
inputValue = ''
|
$('input:checkbox[name=monitor]:checked').each(function () {
|
var ledId = parseInt($(this).val())
|
console.log(ledId)
|
$.ajax({
|
url: baseUrl+"/monitor/led/add/program",
|
data: {ledId:ledId,msg:sendMessage},
|
method: 'GET',
|
success: function (res) {
|
console.log(res)
|
}
|
})
|
})
|
|
})
|
setInterval(function () {
|
setDate();
|
initlineChart();
|
initPieChart();
|
getOther2(crnId,lcdId)
|
getInfo(lcdId);
|
getError(lcdId);
|
getProgram(lcdId)
|
}, 1000);
|
|
// 出库信息
|
function getInfo(ledId) {
|
$.ajax({
|
url: baseUrl+"/monitor/led",
|
data: {ledId:ledId},
|
method: 'GET',
|
success: function (res) {
|
if (lcdControll < 3) {
|
$('.aData').attr('display','none')
|
$('.bData').attr('display','flex')
|
}
|
}
|
});
|
}
|
|
// 异常信息
|
function getError(ledId) {
|
$.ajax({
|
url: baseUrl+"/monitor/led/error",
|
data: {ledId:ledId},
|
method: 'GET',
|
success: function (res) {
|
if (lcdControll < 4) {
|
if (res.data == null) {
|
lcdControll = 0
|
} else {
|
lcdControll = 3
|
$('.bData').attr('display','none')
|
$('.aData').attr('display','flex')
|
$('#ledData').text(res.data)
|
}
|
}
|
}
|
});
|
}
|
// 节目信息
|
function getProgram(ledId) {
|
$.ajax({
|
url: baseUrl+"/monitor/led/program",
|
data: {ledId:ledId},
|
method: 'GET',
|
success: function (res) {
|
if (res.data != '') {
|
lcdControll = 4
|
$('.bData').attr('display','none')
|
$('.aData').attr('display','flex')
|
$('#ledData').text(res.data)
|
} else {
|
lcdControll = 0
|
}
|
}
|
});
|
}
|
|
/***********************************************************************************/
|
/************************************ 堆垛机速度 *************************************/
|
/***********************************************************************************/
|
|
|
|
var crnChart = echarts.init(document.getElementById('crn-chart'));
|
crnChartOption = {
|
// backgroundColor: '#1b1b1b',
|
tooltip: {
|
formatter: '{a} <br/>{c} {b}'
|
},
|
// toolbox: { // 保存图片
|
// show: true,
|
// feature: {
|
// mark: {show: true},
|
// restore: {show: true},
|
// saveAsImage: {show: true}
|
// }
|
// },
|
series: [
|
{
|
name: '走行速度',
|
type: 'gauge',
|
min: 0,
|
max: 160,
|
splitNumber: 16,
|
radius: '50%',
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']],
|
width: 3,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
axisLabel: { // 坐标轴数字
|
fontWeight: 'bolder',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
},
|
axisTick: { // 坐标轴小标记
|
length: 15, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
splitLine: { // 分隔线
|
length: 25, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
width: 3,
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
pointer: { // 分隔线
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5
|
},
|
title: { // 速度单位
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
fontSize: 20,
|
fontStyle: 'italic',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
detail: { // 速度值
|
backgroundColor: 'rgba(30,144,255,0.8)',
|
borderWidth: 1,
|
borderColor: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5,
|
offsetCenter: [0, '50%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
color: '#fff'
|
}
|
},
|
data: [{value: 40, name: 'x\nm/min'}]
|
},
|
{
|
name: '升降速度',
|
type: 'gauge',
|
center: ['25%', '55%'], // 默认全局居中
|
radius: '30%',
|
min: 0,
|
max: 40,
|
endAngle: 40,
|
splitNumber: 5,
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
|
width: 2,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
axisLabel: { // 坐标轴小标记
|
fontWeight: 'bolder',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
},
|
axisTick: { // 坐标轴小标记
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
splitLine: { // 分隔线
|
length: 20, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
width: 3,
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
pointer: {
|
width: 5,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5
|
},
|
title: {
|
offsetCenter: [0, '-30%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
fontStyle: 'italic',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
detail: {
|
//backgroundColor: 'rgba(30,144,255,0.8)',
|
// borderWidth: 1,
|
borderColor: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5,
|
width: 80,
|
height: 30,
|
offsetCenter: [35, '20%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
color: '#fff'
|
}
|
},
|
data: [{value: 1.5, name: 'y'}]
|
},
|
{
|
name: '货叉速度',
|
type: 'gauge',
|
center: ['75%', '50%'], // 默认全局居中
|
radius: '30%',
|
min: 0,
|
max: 50,
|
startAngle: 135,
|
endAngle: 50,
|
splitNumber: 2,
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
|
width: 2,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
axisLabel: { // 坐标轴小标记
|
fontWeight: 'bolder',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
},
|
axisTick: { // 坐标轴小标记
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
// axisLabel: {
|
// fontWeight: 'bolder',
|
// color: '#fff',
|
// shadowColor: '#fff', //默认透明
|
// shadowBlur: 10,
|
// formatter: function (v){
|
// switch (v + '') {
|
// case '0': return 'E';
|
// case '1': return 'Gas';
|
// case '2': return 'F';
|
// }
|
// }
|
// },
|
splitLine: { // 分隔线
|
length:15, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
width:3,
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
pointer: {
|
width:2,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5
|
},
|
title: {
|
offsetCenter: [0, '-30%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
fontStyle: 'italic',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
detail: {
|
//backgroundColor: 'rgba(30,144,255,0.8)',
|
// borderWidth: 1,
|
borderColor: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5,
|
width: 80,
|
height: 30,
|
offsetCenter: [40, '5%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder',
|
color: '#fff'
|
}
|
},
|
data: [{value: 0.5, name: 'z'}]
|
},
|
{
|
name: '货叉位置',
|
type: 'gauge',
|
center: ['75%', '50%'], // 默认全局居中
|
radius: '30%',
|
min: 0,
|
max: 2,
|
startAngle: 315,
|
endAngle: 225,
|
splitNumber: 2,
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
|
width: 2,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
show: false
|
},
|
axisLabel: {
|
fontWeight: 'bolder',
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10,
|
formatter: function(v){
|
switch (v + '') {
|
case '0': return '右';
|
case '1': return '中';
|
case '2': return '左';
|
}
|
}
|
},
|
splitLine: { // 分隔线
|
length: 15, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
width: 3,
|
color: '#fff',
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 10
|
}
|
},
|
pointer: {
|
width: 2,
|
shadowColor: '#fff', //默认透明
|
shadowBlur: 5
|
},
|
title: {
|
show: false
|
},
|
detail: {
|
show: false
|
},
|
data:[{value: 0.5, name: 'gas'}]
|
}
|
]
|
};
|
|
|
/***********************************************************************************/
|
/************************************* 折线图 ***************************************/
|
/***********************************************************************************/
|
|
var lineCharts = echarts.init(document.getElementById('line-charts'));
|
var 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:'#ffffff', //坐标的字体颜色
|
fontSize: 20,
|
},
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#ffffff', // 坐标轴颜色
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
textStyle:{
|
color:'#ffffff', //坐标的字体颜色
|
fontSize: 20
|
},
|
},
|
axisLine:{
|
lineStyle:{
|
color:'#ffffff', // 坐标轴颜色
|
}
|
},
|
splitLine:{
|
show: true,
|
lineStyle:{
|
color:'#ffffff', // 分割线颜色
|
}
|
}
|
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
// areaStyle: {
|
// color: '#7494ae' // 折线区域颜色
|
// },
|
itemStyle:{
|
normal:{
|
color:'#3590ac', //折点颜色
|
lineStyle:{
|
color:'#3590ac' //折线颜色
|
}
|
}
|
}
|
},
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
// areaStyle: {
|
// color: '#d55b35' // 折线区域颜色
|
// },
|
itemStyle:{
|
normal:{
|
color:'#ef550e', //折点颜色
|
lineStyle:{
|
color:'#ec670f' //折线颜色
|
}
|
}
|
}
|
}
|
]
|
};
|
|
function initlineChart() {
|
var reportView = lineChartOption;
|
$.ajax({
|
url: baseUrl+"/monitor/line/charts",
|
method: 'GET',
|
success: function (res) {
|
if (res.code === 200){
|
var json = res.data.rows;
|
reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
|
getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
|
reportView.series[0].data=res.data.rows[0].data;
|
reportView.series[1].data=res.data.rows[1].data;
|
lineCharts.setOption(reportView)
|
} else if (res.code === 403){
|
top.location.href = "/";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
}
|
|
/***********************************************************************************/
|
/************************************* 饼图 *****************************************/
|
/***********************************************************************************/
|
|
var pieCharts = echarts.init(document.getElementById('pie-charts'));
|
var 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: ['在库', '空']
|
},
|
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: 1, name: '在库'},
|
{value: 1, name: '空'},
|
{value: 1, name: '使用'},
|
{value: 1, name: '禁用'},
|
],
|
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]
|
}
|
}
|
}
|
}
|
]
|
};
|
// 饼图加载
|
function initPieChart() {
|
$.ajax({
|
url: baseUrl+"/monitor/loc/rep",
|
method: 'GET',
|
success: function (res) {
|
if (res.code === 200){
|
pieChartOption.series[0].data = res.data.pie;
|
pieCharts.setOption(pieChartOption);
|
|
$('#stock-count').text(res.data.stockCunt);
|
$('#empty-count').text(res.data.emptyCount);
|
$('#none-count').text(res.data.noneCount);
|
|
$('#usedPr').text(res.data.usedPr);
|
$('#used').text(res.data.used);
|
|
layui.element.progress('used-progress', res.data.usedPr + '%');
|
} else if (res.code === 403){
|
top.location.href = "/";
|
} else {
|
layer.msg(res.msg);
|
}
|
}
|
});
|
}
|
|
// eCharts 跟随窗口改变
|
window.onresize = function(){
|
crnChart.resize();
|
lineCharts.resize();
|
pieCharts.resize();
|
}
|
|
</script>
|
