1048 lines
41 KiB
HTML
1048 lines
41 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>智慧大屏-水之云出品</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
|
||
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
|
||
<link rel="stylesheet" href="../css/smartscreen.css">
|
||
|
||
</head>
|
||
<script>
|
||
window.onload = function () {
|
||
$(".loading").fadeOut();
|
||
}
|
||
/****/
|
||
$(document).ready(function () {
|
||
var whei = $(window).width()
|
||
$("html").css({ fontSize: whei / 20 })
|
||
$(window).resize(function () {
|
||
var whei = $(window).width()
|
||
$("html").css({ fontSize: whei / 20 })
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<body>
|
||
<div class="loading">
|
||
<div class="loadbox"><img src="../picture/loading.gif"> 页面加载中...</div>
|
||
</div>
|
||
<div class="head">
|
||
<h1>智慧大屏-水之云出品</h1>
|
||
<div class="weather"><span id="showTime"></span></div>
|
||
</div>
|
||
<div class="mainbox">
|
||
<div class="layui-row">
|
||
<div class="layui-col-md4">
|
||
<div class="boxall">
|
||
<div class="alltitle">模块A</div>
|
||
<div class="allnav" id="echart1"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall">
|
||
<div class="alltitle">模块B</div>
|
||
<div class="allnav" id="echart5"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall">
|
||
<div class="alltitle">模块C</div>
|
||
<div class="allnav" id="echart6"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4">
|
||
<div class="bar">
|
||
<div class="barbox">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left counter" id="allPlanNum">12581189</li>
|
||
<li class="pulll_left counter" id="allDoneNum">3912410</li>
|
||
</ul>
|
||
</div>
|
||
<div class="barbox2">
|
||
<ul class="clearfix">
|
||
<li class="pulll_left">计划数量</li>
|
||
<li class="pulll_left">实际数量</li>
|
||
</ul>
|
||
</div>
|
||
<div class="map">
|
||
<div class="map1"><img src="../picture/lbx.png"></div>
|
||
<div class="map2"><img src="../picture/jt.png"></div>
|
||
<div class="map3"><img src="../picture/map.png"></div>
|
||
</div>
|
||
</div>
|
||
<div class="boxall">
|
||
<div class="alltitle">模块D</div>
|
||
<div class="allnav" id="echart4"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md4">
|
||
<div class="boxall">
|
||
<div class="alltitle">模块E</div>
|
||
<div class="allnav" id="echart2"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall">
|
||
<div class="alltitle">模块F</div>
|
||
<div class="allnav" id="echart3"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
<div class="boxall">
|
||
<div class="alltitle">模块G</div>
|
||
<div class="allnav" id="echart"></div>
|
||
<div class="boxfoot"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="back"></div>
|
||
<script src="../lib/layui/layui.js" charset="utf-8"></script>
|
||
<script src="../js/lay-config.js" charset="utf-8"></script>
|
||
<script src="../js/framework-ui.js"></script>
|
||
<script>
|
||
var t = null;
|
||
var type = !$.request("type") ? 0 : $.request("type");
|
||
if (type == 0) {
|
||
$(".layuimini-site-mobile").remove();
|
||
}
|
||
else {
|
||
var data = JSON.parse(sessionStorage.getItem("WC_BoardList"));
|
||
setInterval(function () {
|
||
console.log("定时器调用");
|
||
getData();
|
||
reloadData();
|
||
}, data.refleshSecond * 1000);
|
||
if (data.viewType == "true" && data.viewList.length > 1) {
|
||
setTimeout(function () {
|
||
for (var i = 0; i < data.viewList.length; i++) {
|
||
if (window.location.host.indexOf(data.viewList[i]) > -1) {
|
||
var href = i + 1 == data.viewList.length ? data.viewList[0] : data.viewList[i + 1];
|
||
window.location.href = href.indexOf("?") != -1 ? href + "&type=" + type : href + "?type=" + type;
|
||
}
|
||
}
|
||
}, data.skipSecond * 1000);//開始运行
|
||
}
|
||
|
||
}
|
||
var fontSize = '16';
|
||
var color = ['#F35331', '#2499F8', '#3DF098', '#33B734'];
|
||
var yearPlanData = [];
|
||
var yearOrderData = [];
|
||
var differenceData = [];
|
||
var visibityData = [];
|
||
var xAxisData = [];
|
||
t = setTimeout(time, 1000);//開始运行
|
||
function time() {
|
||
clearTimeout(t);//清除定时器
|
||
dt = new Date();
|
||
var y = dt.getFullYear();
|
||
var mt = dt.getMonth() + 1;
|
||
var day = dt.getDate();
|
||
var h = dt.getHours();//获取时
|
||
var m = dt.getMinutes();//获取分
|
||
var s = dt.getSeconds();//获取秒
|
||
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
|
||
t = setTimeout(time, 1000); //设定定时器，循环运行
|
||
}
|
||
function openSetting() {
|
||
if (type == 1) {
|
||
layui.use(['jquery', 'common'], function () {
|
||
var $ = layui.jquery,
|
||
common = layui.common;
|
||
common.modalOpen({
|
||
title: "看板配置",
|
||
url: "/BoardHome/BoardSetting?type=" + type,
|
||
width: "600px",
|
||
height: "550px",
|
||
});
|
||
});
|
||
}
|
||
}
|
||
function orderPlanStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts;
|
||
myChart = echarts.init(document.getElementById('echart1'));
|
||
option = {
|
||
title: { show: false },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
return params[0].name + '<br/>'
|
||
+ params[0].seriesName + ' : ' + params[0].value + '<br/>'
|
||
+ params[1].seriesName + ' : ' + params[1].value + '<br/>'
|
||
},
|
||
textStyle: {
|
||
color: '#FFF',
|
||
fontSize: fontSize
|
||
}
|
||
},
|
||
toolbox: { show: false },
|
||
legend: {
|
||
top: 'top',
|
||
textStyle: {
|
||
color: '#B7E2FF',
|
||
fontSize: '16',
|
||
fontFamily: '微软雅黑'
|
||
},
|
||
data: ['A', 'B']
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
data: xAxisData
|
||
},
|
||
yAxis: {
|
||
inverse: false,
|
||
splitArea: { show: false },
|
||
axisLine: { show: false },
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#B7E1FF',
|
||
fontSize: fontSize,
|
||
fontFamily: 'Arial',
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#09F'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '30',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
series: [{
|
||
name: 'A',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
showAllSymbol: true,
|
||
color: color[1],
|
||
data: yearPlanData
|
||
},
|
||
{
|
||
name: 'B',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
showAllSymbol: true,
|
||
color: '#F90',
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
width: 2
|
||
}
|
||
}
|
||
},
|
||
data: yearOrderData
|
||
},
|
||
{
|
||
name: '不可见',
|
||
type: 'bar',
|
||
stack: '1',
|
||
barWidth: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)'
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)'
|
||
}
|
||
},
|
||
data: visibityData
|
||
},
|
||
{
|
||
name: '变化',
|
||
type: 'bar',
|
||
stack: '1',
|
||
barWidth: 1,
|
||
color: '#B7E1FF',
|
||
data: differenceData
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function badMaterialStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart2'));
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#dddc6b'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
top: '0%',
|
||
data: ['A', 'B'],
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.5)',
|
||
fontSize: fontSize,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '30',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
data: xAxisData
|
||
|
||
}, {
|
||
axisPointer: { show: false },
|
||
axisLine: { show: false },
|
||
position: 'bottom',
|
||
offset: 20,
|
||
|
||
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: 'A',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
|
||
normal: {
|
||
color: '#0184d5',
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(1, 132, 213, 0.4)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(1, 132, 213, 0.1)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0184d5',
|
||
borderColor: 'rgba(221, 220, 107, .1)',
|
||
borderWidth: 12
|
||
}
|
||
},
|
||
data: [80, 90, 100, 80, 90, 80, 90, 100, 80, 90, 100, 85]
|
||
|
||
},
|
||
{
|
||
name: 'B',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
|
||
normal: {
|
||
color: '#00d887',
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(0, 216, 135, 0.4)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(0, 216, 135, 0.1)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#00d887',
|
||
borderColor: 'rgba(221, 220, 107, .1)',
|
||
borderWidth: 12
|
||
}
|
||
},
|
||
data: [20, 10, 0, 20, 10, 20, 10, 0, 20, 10, 0, 15]
|
||
|
||
},
|
||
|
||
]
|
||
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function eqpPlanStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart3'));
|
||
option = {
|
||
// backgroundColor: '#00265f',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
top: '0%',
|
||
data: ['A', 'B', 'C'],
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.5)',
|
||
fontSize: fontSize,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '30',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 1,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
//formatter: '{value} %'
|
||
show: true,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1 )",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: 'A',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
data: [1500, 1200, 600, 200, 300, 300, 900, 600, 200, 300, 300, 900],
|
||
barWidth: '35%', //柱子宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2f89cf',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}, {
|
||
name: 'B',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
data: [1400, 1100, 550, 200, 230, 300, 880, 600, 180, 200, 300, 760],
|
||
barWidth: '35%', //柱子宽度
|
||
// barGap: 1, //柱子之间间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#27d08a',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}, {
|
||
name: 'C',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
data: [1350, 1000, 550, 180, 220, 300, 850, 500, 150, 190, 280, 760],
|
||
barWidth: '35%', //柱子宽度
|
||
// barGap: 1, //柱子之间间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#ffeb7b',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function eqpUseStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart'));
|
||
var dataStyle = {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
//shadowBlur: 40,
|
||
//shadowColor: 'rgba(40, 40, 40, 1)',
|
||
}
|
||
};
|
||
var placeHolderStyle = {
|
||
normal: {
|
||
color: 'rgba(255,255,255,.05)',
|
||
label: { show: false, },
|
||
labelLine: { show: false }
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)'
|
||
}
|
||
};
|
||
option = {
|
||
color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
|
||
tooltip: {
|
||
show: true,
|
||
formatter: "{a} : {c} "
|
||
},
|
||
legend: {
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 12,
|
||
bottom: '3%',
|
||
|
||
data: ['A', 'B', 'C'],
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.6)',
|
||
fontSize: fontSize,
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: 'A',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
center: ['50%', '42%'],
|
||
radius: ['59%', '70%'],
|
||
itemStyle: dataStyle,
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: 75.61,
|
||
name: '01'
|
||
}, {
|
||
value: 100 - 75.61,
|
||
name: 'invisible',
|
||
tooltip: { show: false },
|
||
itemStyle: placeHolderStyle
|
||
}]
|
||
},
|
||
{
|
||
name: 'B',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
center: ['50%', '42%'],
|
||
radius: ['49%', '60%'],
|
||
itemStyle: dataStyle,
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: 75.43,
|
||
name: '02'
|
||
}, {
|
||
value: 100 - 75.43,
|
||
name: 'invisible',
|
||
tooltip: { show: false },
|
||
itemStyle: placeHolderStyle
|
||
}]
|
||
},
|
||
{
|
||
name: 'C',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
hoverAnimation: false,
|
||
center: ['50%', '42%'],
|
||
radius: ['39%', '50%'],
|
||
itemStyle: dataStyle,
|
||
data: [{
|
||
value: 70.53,
|
||
name: '03'
|
||
}, {
|
||
value: 100 - 70.53,
|
||
name: 'invisible',
|
||
tooltip: { show: false },
|
||
itemStyle: placeHolderStyle
|
||
}]
|
||
}]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function inStorageStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart4'));
|
||
option = {
|
||
// backgroundColor: '#00265f',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
top: '0%',
|
||
data: ['A', 'B'],
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.5)',
|
||
fontSize: fontSize,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '30',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 1,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
//formatter: '{value} %'
|
||
show: true,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1 )",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: 'A',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
data: [1500, 1200, 600, 200, 300, 300, 900, 600, 200, 300, 300, 900],
|
||
barWidth: '35%', //柱子宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2f89cf',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}, {
|
||
name: 'B',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
data: [1400, 1100, 550, 200, 230, 300, 880, 600, 180, 200, 300, 760],
|
||
barWidth: '35%', //柱子宽度
|
||
// barGap: 1, //柱子之间间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#27d08a',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function outMaterialStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart5'));
|
||
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '10',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: { show: false },
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
inverse: true,
|
||
type: 'category',
|
||
data: ['数据3', '数据2', '数据4', '数据1', '数据5'],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '模板',
|
||
type: 'bar',
|
||
data: [2300, 1500, 990, 800, 500],
|
||
barWidth: '35%', //柱子宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#27d08a',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function inMaterialStatus() {
|
||
layui.use(['echarts'], function () {
|
||
var echarts = layui.echarts
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart6'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20',
|
||
top: '10',
|
||
right: '20',
|
||
bottom: '10',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: false,
|
||
splitLine: { show: false },
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
inverse: true,
|
||
type: 'category',
|
||
data: ['数据4', '数据5', '数据3', '数据1', '数据2'],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)",
|
||
width: 1,
|
||
type: "solid"
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '模板',
|
||
type: 'bar',
|
||
data: [2300, 1500, 990, 800, 500],
|
||
barWidth: '35%', //柱子宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2f89cf',
|
||
opacity: 1,
|
||
barBorderRadius: 5,
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
}
|
||
function getData() {
|
||
yearPlanData = [];
|
||
yearOrderData = [];
|
||
differenceData = [];
|
||
visibityData = [];
|
||
xAxisData = [];
|
||
var plannum = 0;
|
||
var donenum = 0;
|
||
for (var i = 0; i < 12; i++) {
|
||
yearPlanData.push(Math.round(Math.random() * 900) + 100);
|
||
yearOrderData.push(Math.round(Math.random() * yearPlanData[i]));
|
||
differenceData.push(yearPlanData[i] - yearOrderData[i]);
|
||
visibityData.push(yearOrderData[i]);
|
||
plannum += yearPlanData[i];
|
||
donenum += yearOrderData[i];
|
||
xAxisData.push((i + 1).toString() + "月");
|
||
}
|
||
$('#allPlanNum').html(plannum);
|
||
$('#allDoneNum').html(donenum);
|
||
}
|
||
function reloadData() {
|
||
orderPlanStatus();
|
||
badMaterialStatus();
|
||
eqpPlanStatus();
|
||
outMaterialStatus();
|
||
inStorageStatus();
|
||
inMaterialStatus();
|
||
eqpUseStatus();
|
||
}
|
||
$(function () {
|
||
getData();
|
||
reloadData();
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|