Skip to content

K
kwell-mes
Commit 5014355e authored by 王向前's avatar 王向前
Browse files
Options

大屏

parent eccba7a5
Show whitespace changes
Inline Side-by-side
Showing with 1247 additions and 24 deletions
gavel/src/main/java/com/gavel/kwell/controller/KmesBoardController.java
View file @ 5014355e
...@@ -19,5 +19,20 @@ public class KmesBoardController extends BaseController { ...@@ -19,5 +19,20 @@ public class KmesBoardController extends BaseController {
return "kmes/dashboard/first"; return "kmes/dashboard/first";
} }
@RequestMapping("/second")
public String interfaceSecond() {
return "kmes/dashboard/second";
}
@RequestMapping("/third")
public String interfaceThird() {
return "kmes/dashboard/third";
}
@RequestMapping("/fourth")
public String interfaceFourth() {
return "kmes/dashboard/fourth";
}
} }
gavel/src/main/resources/static/css/dashboard/index.css
View file @ 5014355e
...@@ -487,3 +487,46 @@ ...@@ -487,3 +487,46 @@
.border:hover .in{ .border:hover .in{
background: #0d283f; background: #0d283f;
} }
.main-second .center .center-cen{
width: 75%;
}
.main-second .center-right .right-bottom .bottom-b {
width: calc(100% - 0.2rem);
height: 2.6rem;
margin-left: 0.1rem;
margin-top: 0.1rem;
}
.banner{
width: calc(100% - .2rem);
height: calc(100% - .6rem);
margin-left: .1rem;
margin-top: .1rem;
padding: .1rem;
box-sizing: border-box;
overflow: hidden;
}
.banner .list {
color: white !important;
width: 6rem;
float: left;
height: 100%;
margin-top: 0.1rem;
}
.list .listTxt{
color: white !important;
/*width: 80%;*/
float:left;
height: 100%;
}
.list .listTxt p label{
text-align: right;
width: 1rem;
display: inline-block;
color: #a9e2ff;
}
.list .listTxt p{
color: #a9e2ff;
font-size: 14px;
line-height: 25px;
padding-bottom: 0.1rem;
}
\ No newline at end of file
gavel/src/main/resources/static/js/dashboard/echarts.js
View file @ 5014355e
...@@ -2232,7 +2232,7 @@ function setHglEchart(chart) { ...@@ -2232,7 +2232,7 @@ function setHglEchart(chart) {
chart.setOption(ops,true); chart.setOption(ops,true);
} }
function setPieDailyChart(chart) { function setPieDailyChart(chart,cerpent) {
var ops= { var ops= {
color:["#A2E9FF","#409eff"], color:["#A2E9FF","#409eff"],
tooltip: { tooltip: {
...@@ -2249,30 +2249,31 @@ function setPieDailyChart(chart) { ...@@ -2249,30 +2249,31 @@ function setPieDailyChart(chart) {
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
/*label: { hoverAnimation:false,
show: false, silent:true,
position: 'center',
normal:{
show:true,
position:"center",
formatter: '{a}\r\n{b}%',
/!* formatter:function () {
}*!/
}
},*/
/* emphasis: {
label: { label: {
normal: {
show: true, show: true,
fontSize: '40', position: 'center',
fontWeight: 'bold' formatter: function(data){ // 设置圆饼图中间文字排版
return "完工率\n"+(cerpent?(cerpent+"%"):"")
},
},
emphasis: {
disabled:true,
show: false, //文字至于中间时，这里需为true
textStyle: { //设置文字样式
fontSize: '12',
color:"#333"
} }
},*/ }
},
labelLine: { labelLine: {
normal: {
show: false show: false
}
}, },
data: [ data: [
{ value: 20, name: '未完工'}, { value: 20, name: '未完工'},
{ value: 80, name: '完工' }, { value: 80, name: '完工' },
] ]
...@@ -2282,6 +2283,165 @@ function setPieDailyChart(chart) { ...@@ -2282,6 +2283,165 @@ function setPieDailyChart(chart) {
chart.setOption(ops,true); chart.setOption(ops,true);
} }
function setRpcHglEchart(chart) {
var ops = {
color:["#409eff","#ffd03e"],
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
// },
legend: {
data: ['计划', '合格率'],
textStyle:{
color:'white'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
axisPointer: {
type: 'shadow'
},
axisTick:{
show:true,
lineStyle:{
color:"white"
}
},
axisLine:{
show:true,
lineStyle:{
color:"white"
}
},
axisLabel:{
show:true,
color:'white'
}
}
],
yAxis: [
{
type: 'value',
name: '计划',
nameTextStyle:{
color:"white"
},
splitLine: {
show: false,
},
axisTick:{
show:true,
lineStyle:{
color:'white',
}
},
axisLine:{
show:true,
lineStyle:{
color:'white',
}
},
axisLabel:{
show:true,
color:'white',
formatter: '{value}'
}
},
{
type: 'value',
name: '合格率',
min: 0,
max: 100,
interval: 20,
nameTextStyle:{
color:"white"
},
splitLine: {
show: false,
},
axisTick:{
show:true,
lineStyle:{
color:'white',
}
},
axisLine:{
show:true,
lineStyle:{
color:'white',
}
},
axisLabel:{
show:true,
color:'white',
formatter: '{value} %'
}
}
],
series: [
{
name: '计划',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7,
],
barWidth : 30,
itemStyle:{
normal:{
label:{
show:true,
position:"top",
textStyle:{
color:"white",
}
}
}
}
},
{
name: '合格率',
type: 'line',
yAxisIndex: 1,
data: [20,30,90,30,29],
itemStyle:{
normal:{
label:{
show:true,
position:"top",
textStyle:{
color:"orange",
}
}
}
}
}
]
};
chart.setOption(ops,true);
}
// function setPieYChart(chart) { // function setPieYChart(chart) {
// var ops= { // var ops= {
// tooltip: { // tooltip: {
......
gavel/src/main/resources/templates/views/kmes/dashboard/first.html
View file @ 5014355e
...@@ -315,7 +315,7 @@ ...@@ -315,7 +315,7 @@
setTimeProductionEchart(myChartSdcl); /*时段产量*/ setTimeProductionEchart(myChartSdcl); /*时段产量*/
setDailyDataEchart(chartRpcdcsj); /*日排产达成数据*/ setDailyDataEchart(chartRpcdcsj); /*日排产达成数据*/
setHglEchart(chartHgl);/*合格率*/ setHglEchart(chartHgl);/*合格率*/
setPieDailyChart(chartRjh);/*日计划*/ setPieDailyChart(chartRjh,80);/*日计划*/
setPieDailyChart(chartYjh); setPieDailyChart(chartYjh);
$('.myscroll').myScroll({ $('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢 speed: 60, //数值越大，速度越慢
......
gavel/src/main/resources/templates/views/kmes/dashboard/fourth.html 0 → 100644
View file @ 5014355e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KEWELL车间作业及质量看板</title>
<link rel="stylesheet" href="../../css/dashboard/wodry.css">
<link rel="stylesheet" href="../../css/dashboard/index.css">
<link rel="stylesheet" href="../../css/dashboard/public.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header-left fl" id="time"></div>
<div class="header-center fl">
<div class="header-title">
车间作业及质量看板
</div>
<div class="header-img"></div>
</div>
<div class="header-right fl"></div>
<div class="header-bottom fl"></div>
</div>
<div class="center">
<div class="center-left fl" style="width: 33.3%">
<div class="left-top rightTop border">
<video width="100%" height="100%" controls id="firstVideo" autoplay="autoplay" muted>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<!-- <source src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4.ogg" type="video/ogg">-->
<!-- <source src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4.webm" type="video/webm">-->
<object data="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
<embed src="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div class="left-cen rightTop border">
<div class="title">工艺流程图</div>
<div class="bottom-b">
<img src="../../images/dashboard/gylc.png" alt="" style="width: 100%;height: 100%">
</div>
</div>
<div class="left-bottom rightTop border">
<div class="title">时段产量</div>
<div class="bottom-b">
<div id="chartSdcl" class="allnav"></div>
</div>
</div>
</div>
<div class="center-cen fl" style="width: 33.3%">
<div class="cen-top rightTop border" style="height: 3.2rem">
<div class="title">静电手环</div>
<div class="bottom-b">
<div id="chartJdsh" class="allnav">
<div class="allnav-left">
<div class="circle circle-normal" id="chartJdshCirle" ></div>
<ul class="allnav-circle">
<li>
<span class="circle circle-small circle-normal"></span>
<span>正常</span>
</li>
<li>
<span class="circle circle-small circle-close"></span>
<span>关闭</span>
</li>
<li>
<span class="circle circle-small circle-offine"></span>
<span>离线</span>
</li>
<li>
<span class="circle circle-small circle-info"></span>
<span>警告</span>
</li>
</ul>
</div>
<div class="allnav-right">
<ul>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cen-cen rightTop border" style="height: 3.2rem;margin-bottom: 0.4rem">
<div class="title">生产进度跟踪</div>
<div class="bottom-b">
<div id="chartScjdgz" class="allnav">
<div class="echart wenzi">
<div class="gun">
<span>序号</span>
<span>订单号</span>
<span>物料</span>
<span>描述</span>
<span>计划</span>
<span>完工</span>
<span>订单时间</span>
<span>达成率</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b>1</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="cen-bottom rightTop border">
<div class="title"> 在制订单</div>
<div class="bottom-b">
<div class="allnav banner">
<div class="list clearfix">
<div class="listTxt">
<p><label>在制订单：</label> <span>11213131</span></p>
<p><label for="">订单数：</label><span>5000</span></p>
<p><label for="">订单日期：</label><span>2022-02-23</span> </p>
<p><label for="">产品名称：</label><span>电子产品、手机、电脑</span></p>
<p><label for="">备注：</label><span>全国 </span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center-right fr" style="width: 33.3%">
<div class="right-top rightTop border">
<div class="title">日计划/月计划达成</div>
<div class="chart" style="width: calc(100% - 0.2rem);
height: 2.6rem;
margin-left: 0.1rem;
margin-top: 0.1rem;">
<ul style="width: 100%;height: 100%">
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartRjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>日计划数：<span>100</span></div>
<div>日完工数：<span>80</span></div>
</div>
</li>
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartYjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>月计划数：<span>3000</span></div>
<div>月完工数：<span>2400</span></div>
</div>
</li>
</ul>
</div>
</div>
<div class="right-cen border">
<div class="title">合格率</div>
<div class="right-cen-cent">
<div id="chartHgl" class="allnav"></div>
</div>
</div>
<div class="right-bottom rightTop border">
<div class="title">日排产达成数据</div>
<div class="bottom-b" style="width: calc(100% - 0.2rem); height: 2.6rem; margin-left: 0.1rem; margin-top: 0.1rem;">
<div id="chartRpcdcsj" class="allnav"></div>
</div>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="../../lib/easyui/jquery.min.js" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="../../lib/gui/static/plugins/echarts/echarts.min.js"></script>
<script src="../../js/dashboard/wodry.min.js"></script>
<script src="../../js/dashboard/fontscroll.js"></script>
<script src="../../js/dashboard/echarts.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
var myChartSdcl = echarts.init(document.getElementById('chartSdcl'));
var chartRpcdcsj=echarts.init(document.getElementById("chartRpcdcsj"));
var chartHgl=echarts.init(document.getElementById("chartHgl"));
var chartRjh=echarts.init(document.getElementById("chartRjh"));
var chartYjh=echarts.init(document.getElementById("chartYjh"));
var chartJdshCirle=$("#chartJdshCirle");
setTimeProductionEchart(myChartSdcl); /*时段产量*/
setDailyDataEchart(chartRpcdcsj); /*日排产达成数据*/
setHglEchart(chartHgl);/*合格率*/
setPieDailyChart(chartRjh,80);/*日计划*/
setPieDailyChart(chartYjh);
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 46 //li的高度
});
});
</script>
<script>
//顶部时间
function getTime(){
var myDate = new Date();
var myYear = myDate.getFullYear();
var myMonth = myDate.getMonth()+1;
var myToday = myDate.getDate();
var myDay = myDate.getDay();
var myHour = myDate.getHours();
var myMinute = myDate.getMinutes();
var mySecond = myDate.getSeconds();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var nowTime=nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
$('#time').html(nowTime);
};
function fillZero(str){
var realNum;
if(str<10){
realNum = '0'+str;
}else{
realNum = str;
}
return realNum;
}
setInterval(getTime,1000);
</script>
</body>
</html>
\ No newline at end of file
gavel/src/main/resources/templates/views/kmes/dashboard/index.html
View file @ 5014355e
...@@ -17,19 +17,19 @@ ...@@ -17,19 +17,19 @@
</a> </a>
</li> </li>
<li> <li>
<a href="survey.html" target="_blank"> <a href="kmes/dashboard/second" target="_blank">
<img src="images/dashboard/xinyong.png" alt=""> <img src="images/dashboard/xinyong.png" alt="">
<span>展示效果二</span> <span>展示效果二</span>
</a> </a>
</li> </li>
<li> <li>
<a href="index2.html" target="_blank"> <a href="kmes/dashboard/third" target="_blank">
<img src="images/dashboard/fengxian.png" alt=""> <img src="images/dashboard/fengxian.png" alt="">
<span>展示效果三</span> <span>展示效果三</span>
</a> </a>
</li> </li>
<li> <li>
<a href="index3.html" target="_blank"> <a href="kmes/dashboard/fourth" target="_blank">
<img src="images/dashboard/chanye.png" alt=""> <img src="images/dashboard/chanye.png" alt="">
<span>展示效果四</span> <span>展示效果四</span>
</a> </a>
......
gavel/src/main/resources/templates/views/kmes/dashboard/second.html 0 → 100644
View file @ 5014355e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KEWELL车间作业及质量看板</title>
<link rel="stylesheet" href="../../css/dashboard/wodry.css">
<link rel="stylesheet" href="../../css/dashboard/index.css">
<link rel="stylesheet" href="../../css/dashboard/public.css">
</head>
<body>
<div class="main main-second">
<div class="header">
<div class="header-left fl" id="time"></div>
<div class="header-center fl">
<div class="header-title">
车间作业及质量看板
</div>
<div class="header-img"></div>
</div>
<div class="header-right fl"></div>
<div class="header-bottom fl"></div>
</div>
<div class="center">
<div class="center-cen fl">
<div class="cen-top rightTop border">
<video width="100%" height="100%" controls id="firstVideo" autoplay="autoplay" muted>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<object data="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
<embed src="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div class="cen-bottom rightTop border" style="width: calc(50% - 0.1rem);float: left;margin-right: 0.1rem">
<div class="title">时段产量</div>
<div class="bottom-b">
<div id="chartSdcl" class="allnav"></div>
</div>
</div>
<div class="cen-bottom rightTop border" style="width: calc(50% - 0.1rem); display: inline-block; margin-left: 0.1rem;">
<div class="title">生产进度跟踪</div>
<div class="bottom-b">
<div id="chartScjdgz" class="allnav">
<div class="echart wenzi">
<div class="gun">
<span>序号</span>
<span>订单号</span>
<span>物料</span>
<span>描述</span>
<span>计划</span>
<span>完工</span>
<span>订单时间</span>
<span>达成率</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b>1</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center-right fr">
<div class="right-top rightTop border">
<div class="title">日计划/月计划达成</div>
<div class="chart" style="width: calc(100% - 0.2rem);
height: 2.6rem;
margin-left: 0.1rem;
margin-top: 0.1rem;">
<ul style="width: 100%;height: 100%">
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartRjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>日计划数：<span>100</span></div>
<div>日完工数：<span>80</span></div>
</div>
</li>
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartYjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>月计划数：<span>3000</span></div>
<div>月完工数：<span>2400</span></div>
</div>
</li>
</ul>
</div>
</div>
<div class="right-cen border">
<div class="title">合格率</div>
<div class="right-cen-cent">
<div id="chartHgl" class="allnav"></div>
</div>
</div>
<div class="right-bottom rightTop border">
<div class="title">日排产达成数据</div>
<div class="bottom-b">
<div id="chartRpcdcsj" class="allnav"></div>
</div>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="../../lib/easyui/jquery.min.js" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="../../lib/gui/static/plugins/echarts/echarts.min.js"></script>
<script src="../../js/dashboard/wodry.min.js"></script>
<script src="../../js/dashboard/fontscroll.js"></script>
<script src="../../js/dashboard/echarts.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
var myChartSdcl = echarts.init(document.getElementById('chartSdcl'));
var chartRpcdcsj=echarts.init(document.getElementById("chartRpcdcsj"));
var chartHgl=echarts.init(document.getElementById("chartHgl"));
var chartRjh=echarts.init(document.getElementById("chartRjh"));
var chartYjh=echarts.init(document.getElementById("chartYjh"));
var chartJdshCirle=$("#chartJdshCirle");
setTimeProductionEchart(myChartSdcl); /*时段产量*/
setDailyDataEchart(chartRpcdcsj); /*日排产达成数据*/
setHglEchart(chartHgl);/*合格率*/
setPieDailyChart(chartRjh,80);/*日计划*/
setPieDailyChart(chartYjh);
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 46 //li的高度
});
});
</script>
<script>
//顶部时间
function getTime(){
var myDate = new Date();
var myYear = myDate.getFullYear();
var myMonth = myDate.getMonth()+1;
var myToday = myDate.getDate();
var myDay = myDate.getDay();
var myHour = myDate.getHours();
var myMinute = myDate.getMinutes();
var mySecond = myDate.getSeconds();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var nowTime=nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
$('#time').html(nowTime);
};
function fillZero(str){
var realNum;
if(str<10){
realNum = '0'+str;
}else{
realNum = str;
}
return realNum;
}
setInterval(getTime,1000);
</script>
</body>
</html>
\ No newline at end of file
gavel/src/main/resources/templates/views/kmes/dashboard/third.html 0 → 100644
View file @ 5014355e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KEWELL车间作业及质量看板</title>
<link rel="stylesheet" href="../../css/dashboard/wodry.css">
<link rel="stylesheet" href="../../css/dashboard/index.css">
<link rel="stylesheet" href="../../css/dashboard/public.css">
</head>
<body>
<div class="main main-second">
<div class="header">
<div class="header-left fl" id="time"></div>
<div class="header-center fl">
<div class="header-title">
车间作业及质量看板
</div>
<div class="header-img"></div>
</div>
<div class="header-right fl"></div>
<div class="header-bottom fl"></div>
</div>
<div class="center">
<div class="center-right fl" style="width: 40%">
<div class="right-top rightTop border">
<div class="title">生产进度跟踪</div>
<div class="bottom-b">
<div id="chartScjdgz" class="allnav">
<div class="echart wenzi">
<div class="gun">
<span>序号</span>
<span>订单号</span>
<span>物料</span>
<span>描述</span>
<span>计划</span>
<span>完工</span>
<span>订单时间</span>
<span>达成率</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b>1</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9</b>
</span>
<span>WO0001</span>
<span>Wl001</span>
<span>产品1</span>
<span>100</span>
<span>80</span>
<span>01-01</span>
<span>80%</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="right-cen border">
<div class="title">静电手环</div>
<div class="bottom-b">
<div id="chartJdsh" class="allnav">
<div class="allnav-left">
<div class="circle circle-normal" id="chartJdshCirle" ></div>
<ul class="allnav-circle">
<li>
<span class="circle circle-small circle-normal"></span>
<span>正常</span>
</li>
<li>
<span class="circle circle-small circle-close"></span>
<span>关闭</span>
</li>
<li>
<span class="circle circle-small circle-offine"></span>
<span>离线</span>
</li>
<li>
<span class="circle circle-small circle-info"></span>
<span>警告</span>
</li>
</ul>
</div>
<div class="allnav-right">
<ul>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
<li><div class="circle circle-middle out circle-normal"><div class="circle in"></div></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="right-bottom rightTop border">
<div class="title">时段产量</div>
<div class="bottom-b">
<div id="chartSdcl" class="allnav"></div>
</div>
</div>
</div>
<div class="center-cen fr" style="width: 60%">
<div class="cen-top rightTop border">
<video width="100%" height="100%" controls id="firstVideo" autoplay="autoplay" muted>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<object data="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
<embed src="https://media.w3.org/2010/05/sintel/trailer.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div class="cen-bottom rightTop border" style="width: calc(50% - 0.1rem);float: left;margin-right: 0.1rem">
<div class="title">日排产＆合格率</div>
<div class="bottom-b">
<div id="chartRpcHgl" class="allnav"></div>
</div>
</div>
<div class="cen-bottom rightTop border" style="width: calc(50% - 0.1rem); display: inline-block; margin-left: 0.1rem;">
<div class="title">日计划/月计划达成</div>
<div class="chart" style="width: calc(100% - 0.2rem); height: 2.6rem;margin-left: 0.1rem; margin-top: 0.1rem;">
<ul style="width: 100%;height: 100%">
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartRjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>日计划数：<span>100</span></div>
<div>日完工数：<span>80</span></div>
</div>
</li>
<li style="float: left;width: 50%;height: 100%;position: relative;overflow:hidden;">
<div style="position: absolute;top: 0;bottom: 0.4rem;left: 0;right: 0">
<div id="chartYjh" class="allnav"></div>
</div>
<div style="position: absolute;bottom: 0;right: 0;left: 0;text-align: center">
<div>月计划数：<span>3000</span></div>
<div>月完工数：<span>2400</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="../../lib/easyui/jquery.min.js" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="../../lib/gui/static/plugins/echarts/echarts.min.js"></script>
<script src="../../js/dashboard/wodry.min.js"></script>
<script src="../../js/dashboard/fontscroll.js"></script>
<script src="../../js/dashboard/echarts.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
var myChartSdcl = echarts.init(document.getElementById('chartSdcl'));
var chartRjh=echarts.init(document.getElementById("chartRjh"));
var chartYjh=echarts.init(document.getElementById("chartYjh"));
var chartHgl=echarts.init(document.getElementById("chartRpcHgl"));
var chartJdshCirle=$("#chartJdshCirle");
setTimeProductionEchart(myChartSdcl); /*时段产量*/
setRpcHglEchart(chartHgl);/*日排产&合格率*/
setPieDailyChart(chartRjh,80);/*日计划*/
setPieDailyChart(chartYjh);
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 46 //li的高度
});
});
</script>
<script>
//顶部时间
function getTime(){
var myDate = new Date();
var myYear = myDate.getFullYear();
var myMonth = myDate.getMonth()+1;
var myToday = myDate.getDate();
var myDay = myDate.getDay();
var myHour = myDate.getHours();
var myMinute = myDate.getMinutes();
var mySecond = myDate.getSeconds();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var nowTime=nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
$('#time').html(nowTime);
};
function fillZero(str){
var realNum;
if(str<10){
realNum = '0'+str;
}else{
realNum = str;
}
return realNum;
}
setInterval(getTime,1000);
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment