|
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>看板demo</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" href="../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all"> -->
|
<script src="../js/login/jquery.min.js"></script>
|
<script src="../layuiadmin/lib/extend/echarts.js"></script>
|
</head>
|
<style >
|
body{
|
text-align: center;
|
color:#000;
|
margin-top:5px;
|
}
|
|
.div_border{
|
border:1px solid #696969;
|
border-bottom:none;
|
overflow: auto;
|
white-space: nowrap;
|
white-space: nowrap;
|
white-spance: nowrap;
|
}
|
.table {
|
border: 1px solid #696969;
|
border-top: none;
|
text-align: center;
|
width:100%;
|
border-collapse:collapse;
|
}
|
.table td,
|
.table th {
|
border: 1px solid #696969;
|
padding: 0;
|
background-repeat: repeat-x;
|
height: 30px;
|
}
|
.table tr {
|
height: 30px;
|
border-top: 1px solid #0e94ea;
|
/* background: rgba(14, 148, 234, 0.1); */
|
}
|
|
.table thead tr {
|
background: rgba(14, 148, 234, 0.4);
|
}
|
|
.table tr.bg-color {
|
background: rgba(14, 148, 234, 0.2);
|
}
|
h1{margin:0;}
|
h2{margin:0;color:#696969}
|
h3{margin:0;}
|
.tip-title{
|
width: 100%;
|
height: 48px;
|
color:#ffffff;
|
overflow: hidden;
|
box-sizing: border-box;
|
border-bottom: 1px solid #052025;
|
}
|
.container {
|
width:1348px;
|
height: 220px;
|
border:1px solid #696969;
|
|
overflow: auto;
|
white-space: nowrap;
|
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
overflow-x: hidden;
|
overflow-y: hidden;
|
|
}
|
.lable {
|
width: 300px;height: 260px;
|
display: inline-block;
|
|
}
|
|
.lable_tile{
|
height:30px;
|
line-height:30px;
|
background: rgba(14, 148, 234, 0.4)
|
}
|
li {list-style-type:none;}
|
ul{padding-left:5px;}
|
</style>
|
<body>
|
<div >
|
<div >
|
<div id="title" style="height:15%;text-align:center;">
|
<!-- <h1>Mic-power 微电</h1> -->
|
<img src="../images/title.png" style="height:48px;">
|
</div>
|
</div>
|
<div >
|
<div class="div_border" style="height:10%;text-align: center;font-size:18px;">
|
<span style="float:left;margin-left:10px;">线别:C线</span>
|
<span >生产管理看板</span>
|
<span style="float:right;margin-right:10px;">2020-07-10 10:48:09</span>
|
</div>
|
<table class="table" id="tablevalue">
|
<thead>
|
<tr>
|
<th width=10%>线体</th><th width=30%>工单</th><th width=10%>工序</th>
|
<th width=15%>工单数</th><th width=15%>总产出</th><th width=30%>当前产出</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>S1</td><td>5103-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S2</td><td>5103-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S2</td><td>5103-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S3</td><td>5103-202003200001</td><td>SMT B面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S4</td><td>5103-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S5</td><td>5103-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S5</td><td>5133-202003200001</td><td>SMT B面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S61</td><td>5133-202003200001</td><td>SMT A面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
<tr>
|
<td>S7</td><td>5105-202003200001</td><td>SMT B面</td>
|
<td>2000</td><td>1200</td><td>500</td>
|
</tr>
|
</tbody>
|
|
</table>
|
</div>
|
|
<div class="container" style="margin-top:5px;">
|
<div class="lable" style="width:650px;float:left;border-right:1px solid #696969;">
|
<div class="lable_tile"><h3>柏拉图</h3></div>
|
<div id="chartDiv" style="width:650px;height:220px;"></div>
|
</div>
|
|
<div class="lable" style="float:left;width:348px;border-right:1px solid #696969;">
|
<div class="lable_tile"><h3>生产主管</h3></div>
|
<div class="container" style="width:100%;border:none;">
|
<div class="lable" style="width:55%;float:left;">
|
<ul style="text-decoration:underline;font-size:18px;text-align:left;">
|
<li >工号:PL0000</li>
|
<li style="margin-top:25px;">姓名:张三</li>
|
<li style="margin-top:25px;">电话:13888888888</li>
|
</ul>
|
</div>
|
<div class="lable" style="width:45%;float:left;">
|
<img src="../images/touxiang.png" style="width:150px;height:200px;">
|
</div>
|
</div>
|
</div>
|
|
<div class="lable" style="float:left;width:347px;">
|
<div class="lable_tile"><h3>生产主管</h3></div>
|
<div class="container" style="width:100%;border:none;">
|
<div class="lable" style="width:55%;float:left;">
|
<ul style="text-decoration:underline;font-size:18px;text-align:left;">
|
<li >工号:PL0000</li>
|
<li style="margin-top:25px;">姓名:张三</li>
|
<li style="margin-top:25px;">电话:13888888888</li>
|
</ul>
|
</div>
|
<div class="lable" style="width:45%;float:left;">
|
<img src="../images/touxiang.png" style="width:150px;height:200px;">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="position:fixed;margin: auto;left: 0;right: 0;bottom:5px;heigth:20%;text-align: center;">
|
<h2>提高生产效率 打造卓越品质</h2>
|
</div>
|
</div>
|
|
<script type="text/javascript">
|
getChart();
|
function getChart(){
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
crossStyle: {
|
color: '#999'
|
}
|
}
|
},
|
legend: {
|
data: ['蒸发量', '降水量', '平均温度']
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
axisPointer: {
|
type: 'shadow'
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
name: '水量',
|
min: 0,
|
max: 250,
|
interval: 50,
|
axisLabel: {
|
formatter: '{value} ml'
|
}
|
},
|
{
|
type: 'value',
|
name: '温度',
|
min: 0,
|
max: 25,
|
interval: 5,
|
axisLabel: {
|
formatter: '{value} °C'
|
}
|
}
|
],
|
series: [
|
{
|
name: '蒸发量',
|
type: 'bar',
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
},
|
{
|
name: '降水量',
|
type: 'bar',
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
},
|
{
|
name: '平均温度',
|
type: 'line',
|
yAxisIndex: 1,
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
}
|
]
|
};
|
}
|
//创建echarts对象在哪个节点上
|
var myCharts1 = echarts.init(document.getElementById('chartDiv'));
|
//将选项对象赋值给echarts对象。
|
myCharts1.setOption(option,true);
|
</script>
|
|
</body>
|
</html>
|
