Skip to content

K
kanban-nanjing-11
Commit cc5f8fa2 authored by Allencl's avatar Allencl
Browse files
Options

1

parent 9c6fe563
Hide whitespace changes
Inline Side-by-side
Showing with 300 additions and 417 deletions
css/page2.css
View file @ cc5f8fa2
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
position: relative; position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */ /* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91; border: 1px solid #026d91;
height: 608px; margin-bottom: 22px;} /* height: 608px; */
height: 448px;
margin-bottom: 22px;}
.main_f { background: url(../img/logistics/box1.png) no-repeat; height: 864px; } .main_f { background: url(../img/logistics/box1.png) no-repeat; height: 864px; }
...@@ -18,7 +20,14 @@ ...@@ -18,7 +20,14 @@
.ibox3 { float: right; width: 1192px;} .ibox3 { float: right; width: 1192px;}
.ibox4 { } .ibox4 { }
.ibox_t { position: absolute; left: 12px; top: 22px; background: url(../img/logistics/tit.png) left top no-repeat; width: 676px; height: 100px; padding: 24px 0 0 46px; box-sizing: border-box; } .ibox_t { position: absolute;
/* left: 12px; top: 22px; */
left: -4px;
top: 6px;
background: url(../img/logistics/tit.png) left top no-repeat;
/* width: 676px; */
width: 100%;
height: 100px; padding: 24px 0 0 46px; box-sizing: border-box; }
.ibox_t img { display: block;} .ibox_t img { display: block;}
...@@ -320,74 +329,97 @@ ...@@ -320,74 +329,97 @@
.box-echarts-body-index1 .ul-index1{ .box-echarts-body-index1 .ul-index1{
flex: 4; flex: 6;
margin-right: 12px; margin-right: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index1 .ul-index2{ .box-echarts-body-index1 .ul-index2{
flex: 6; flex: 6;
margin-right: 12px; margin-right: 12px;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index1 .ul-index3{ .box-echarts-body-index1 .ul-index3{
flex: 6; flex: 6;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
}
.box-echarts-body-index1 .ul-index4{
flex: 6;
margin-left: 12px;
/* border-radius: 12px; */
}
.box-echarts-body-index1 .ul-index5{
flex: 6;
margin-left: 12px;
/* border-radius: 12px; */
} }
.box-echarts-body-index2 .ul-index1{ .box-echarts-body-index2 .ul-index1{
flex: 4; flex: 6;
margin-right: 12px; margin-right: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index2 .ul-index2{ .box-echarts-body-index2 .ul-index2{
flex: 6; flex: 6;
margin-right: 12px; /* margin-right: 12px; */
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index2 .ul-index3{ .box-echarts-body-index2 .ul-index3{
flex: 6; flex: 6;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
}
.box-echarts-body-index2 .ul-index4{
flex: 6;
margin-left: 12px;
/* border-radius: 12px; */
}
.box-echarts-body-index2 .ul-index5{
flex: 6;
margin-left: 12px;
/* border-radius: 12px; */
} }
.box-echarts-body-index3 .ul-index1{ .box-echarts-body-index3 .ul-index1{
flex: 4; flex: 4;
margin-right: 12px; margin-right: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index3 .ul-index2{ .box-echarts-body-index3 .ul-index2{
flex: 4; flex: 4;
margin-right: 12px; margin-right: 12px;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index3 .ul-index3{ .box-echarts-body-index3 .ul-index3{
flex: 4; flex: 4;
margin-right: 12px; margin-right: 12px;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.box-echarts-body-index3 .ul-index4{ .box-echarts-body-index3 .ul-index4{
flex: 4; flex: 4;
margin-left: 12px; margin-left: 12px;
border-radius: 12px; /* border-radius: 12px; */
} }
.a1-index-1-table-text{ .a1-index-1-table-text{
display: flex; display: flex;
padding-left: 42px; padding-left: 42px;
...@@ -683,4 +715,82 @@ ...@@ -683,4 +715,82 @@
background: inherit; background: inherit;
content: ''; content: '';
display: inline-block; display: inline-block;
}
.container-main{
width: 100%;
display: flex;
}
.container-main .main-box-left{
flex: 10;
}
.container-main .main-box-right{
flex: 3;
margin-left: 12px;
}
.zongchanliang-box{
height: 300px;
height: 923px;
}
.bottom-inex23-box{
margin-right: 0px !important;
}
.text-123{
text-align: center;
font-size: 140px;
margin-top: 32px;
}
.text-124{
text-align: center;
font-size: 140px;
margin-top: 32px;
color: #1DE9B6;
}
.text-125{
text-align: center;
font-size: 140px;
margin-top: 32px;
}
.ul-list-123{
padding-left: 26px;
padding-right: 26px;
margin-top: 66px;
}
.ul-list-123 li{
display: flex;
border-bottom: 1px solid #039ae569;
padding-bottom: 18px;
margin-top: 42px;
}
.ul-list-123 li div:nth-child(1){
display: inline-block;
flex: 2;
font-size: 52px;
color: #B3E5FC;
}
.ul-list-123 li div:nth-child(2){
display: inline-block;
flex: 2;
font-size: 52px;
text-align: right;
}
.ul-list-125{
margin-top: 0px;
}
.ul-list-125 li{
margin-top: 0px;
padding-bottom: 8px;
} }
\ No newline at end of file
page2.html
View file @ cc5f8fa2
...@@ -46,459 +46,232 @@ ...@@ -46,459 +46,232 @@
<div class="mainer"> <div class="mainer">
<div class="mainbox"> <div class="mainbox">
<div class="container-main">
<div class="box-right-container box-echarts-body-index1"> <div class="main-box-left">
<div class="main_t ul-index1"> <div class="box-right-container box-echarts-body-index1">
<div class="main_t ul-index1">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">交付进度</span> <span class="box-tittle-text">当前车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<div id="icharts_a1" class="echarts-body" style="height: 160px;"></div> <p class="text-123">AS22</p>
<div class="a1-index-1-table-text"> </div>
<span class="span-left">
<b>已交付:</b>
<b>2568</b>
<b>只</b>
</span>
<span class="span-right">
<b>应交付:</b>
<b>2568</b>
<b>只</b>
</span>
</div>
<div class="a1-index-1-table-bottom-text">
<span class="left">物流安全事故:</span>
<span class="right">0</span>
</div> </div>
</div>
</div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">日盘点差异率及差异数量</span> <span class="box-tittle-text">后续车型1</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<span class="leiji-time"> <p class="text-123">AS22</p>
<span>差异目标: </span>
<span>0</span> </div>
</span> </div>
<ul class="echarts-mark-box">
<li> <div class="main_t ul-index3">
<label style="background: #72ccff;"></label>
<span>应盘数量</span> <div class="ibox_t">
</li> <span class="box-tittle-text">后续车型2</span>
<li>
<label style="background: #91cc75;"></label>
<span>实盘数量</span>
</li>
<li class="yuan">
<label style="background: #fac858;"></label>
<span>正值</span>
</li>
<li class="yuan">
<label style="background: #ee6666;"></label>
<span>负值</span>
</li>
</ul>
<div class="echarts-body">
<div class="echarts-box-1">
<div id="echarts_a333" class="echarts-inier"></div>
</div> </div>
<div class="echarts-box-2"> <div class="ibox_m">
<div id="echarts_a222" class="echarts-inier"></div> <p class="text-123">AS22</p>
</div> </div>
<div class="echarts-box-3">
<div id="echarts_a111" class="echarts-inier"></div> </div>
<div class="main_t ul-index4">
<div class="ibox_t">
<span class="box-tittle-text">后续车型3</span>
</div> </div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div> </div>
</div>
</div>
<div class="main_t ul-index3"> <div class="main_t ul-index5">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">存货周转天数</span> <span class="box-tittle-text">后续车型4</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box">
<li class="zhexian">
<label style="background: #72ccff;"></label>
<span>实际值</span>
</li>
<li class="zhexian">
<label style="background: #91cc75;"></label>
<span>目标值</span>
</li>
</ul>
<div class="echarts-body">
<div class="box-left">
<div id="echarts_b356" class="echarts-div"></div>
</div> </div>
<div class="box-right"> <div class="ibox_m">
<div class="inner-box"> <p class="text-123">AS22</p>
<div class="box-top">
<table class="custem-table-index5" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>库区</td>
<td>实际值</td>
</tr>
<tr>
<td>成品灯<br/>（品灯后库）</td>
<td>211.55</td>
</tr>
<tr>
<td>自制件</td>
<td>388.55</td>
</tr>
<tr>
<td>原材料</td>
<td>388.55</td>
</tr>
<tr>
<td>OPS<br/>(不包含免费赠送)</td>
<td>388.55</td>
</tr>
</tbody>
</table>
</div>
<div class="box-bottom">
<div id="echart_a66" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="box-right-container box-echarts-body-index2"> <div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1"> <div class="main_t ul-index1">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">供应商风险物料、交付及时率</span> <span class="box-tittle-text">后续车型5</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<ul class="echarts-mark-box"> <p class="text-123">AS22</p>
<li>
<label style="background: #72ccff;"></label>
<span>风险物料</span>
</li>
<li class="zhexian">
<label style="background: #91cc75;"></label>
<span>交付及时率</span>
</li>
</div>
</ul>
<div id="icharts_b1" class="echarts-body"></div> </div>
</div>
</div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">物流费用趋势</span> <span class="box-tittle-text">后续车型6</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box">
<li>
<label style="background: #72ccff;"></label>
<span>物流费用</span>
</li>
<li class="zhexian">
<label style="background: #91cc75;"></label>
<span>物料费用目标</span>
</li>
<li class="zhexian">
<label style="background: #fac858;"></label>
<span>物料费用占比</span>
</li>
<li class="zhexian">
<label style="background: #ee6666;"></label>
<span>降本金额占比</span>
</li>
<li>
<label style="background: #fff;"></label>
<span>降本金额</span>
</li>
</ul>
<div class="echarts-body">
<div class="box-left">
<div id="echart_b2" class="echarts-div"></div>
</div> </div>
<div class="box-right"> <div class="ibox_m">
<table class="custem-table-index1" cellpadding="0" cellspacing="0"> <p class="text-123">AS22</p>
<tbody>
<tr>
<th rowspan="11"></th>
<td>人员费用</td>
<td>105.01</td>
</tr>
<tr>
<td>运输费</td>
<td>40.79</td>
</tr>
<tr>
<td>循环包装采购费用</td>
<td>12.44</td>
</tr>
<tr>
<td>一次性建材采购费用</td>
<td>12.44</td>
</tr>
<tr>
<td>包装租赁费用</td>
<td>12.44</td>
</tr>
<tr>
<td>仓储费用</td>
<td>12.44</td>
</tr>
<tr>
<td>仓储租赁费用及服务费</td>
<td>12.44</td>
</tr>
<tr>
<td>零部件运费仓储器材费</td>
<td>12.44</td>
</tr>
<tr>
<td>外包服务费</td>
<td>12.44</td>
</tr>
<tr>
<td>设备租赁费</td>
<td>12.44</td>
</tr>
<tr>
<td>合计</td>
<td style="color: #fac858;">12222.44</td>
</tr>
<tr>
<th rowspan="2">物流费用</th>
<td>目标值</td>
<td style="color: #91cc75;">30.20%</td>
</tr>
<tr>
<td >达成值</td>
<td>30.20%</td>
</tr>
<tr>
<th rowspan="2">降本达成</th>
<td>达成值</td>
<td style="color: #91cc75;">30.20%</td>
</tr>
<tr>
<td>累计达成</td>
<td >30.20</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div>
</div>
<div class="main_t ul-index3"> <div class="main_t ul-index3">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">异常物质占压金额趋势</span> <span class="box-tittle-text">后续车型7</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box">
<li>
<label style="background: #72ccff;"></label>
<span>异常金额目标</span>
</li>
<li>
<label style="background: #91cc75;"></label>
<span>异常金额</span>
</li>
<li class="zhexian">
<label style="background: #fac858;"></label>
<span>占压金额占比</span>
</li>
</ul>
<div class="echarts-body">
<div class="box-left">
<div id="echart_b3" class="echarts-div"></div>
</div> </div>
<div class="box-right"> <div class="ibox_m">
<div class="inner-box"> <p class="text-123">AS22</p>
<div class="box-top">
<table class="custem-table-index2" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>异常物质</td>
<td>金额</td>
<td>占比</td>
</tr>
<tr>
<td>自制件</td>
<td>211.55</td>
<td>18%</td>
</tr>
<tr>
<td>产成品</td>
<td>388.55</td>
<td>18%</td>
</tr>
<tr>
<td>零部件</td>
<td>388.55</td>
<td>18%</td>
</tr>
<tr>
<td>售后</td>
<td>388.55</td>
<td>18%</td>
</tr>
</tbody>
</table>
</div>
<div class="box-bottom">
<div id="echarts_b5" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="box-right-container box-echarts-body-index3"> <div class="main_t ul-index4">
<div class="main_t ul-index1"> <div class="ibox_t">
<span class="box-tittle-text">后续车型8</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<div class="ibox_t"> </div>
<span class="box-tittle-text">物流停机</span>
</div> </div>
<div class="ibox_m">
<span class="leiji-time">
<span>本月累计停机: </span>
<span>25</span>
<span> min</span>
</span>
<ul class="echarts-mark-box">
<li>
<label style="background: #72ccff;"></label>
<span>物料停机</span>
</li>
</ul>
<div id="icharts_31" class="echarts-body"></div>
</div>
</div>
<div class="main_t ul-index2"> <div class="main_t ul-index5">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">MPS计划符合率、计划完成率</span> <span class="box-tittle-text">后续车型9</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<span class="leiji-time"> <p class="text-123">AS22</p>
<span>目标: </span>
<span>100</span> </div>
<span> %</span>
</span> </div>
<ul class="echarts-mark-box"> </div>
<li>
<label style="background: #72ccff;"></label> <div class="box-right-container box-echarts-body-index2">
<span>生产计划</span> <div class="main_t ul-index1">
</li> <div class="ibox_t">
<!-- <li> <span class="box-tittle-text">开动率</span>
<label style="background: #91cc75;"></label> </div>
<span>实际达成</span> <div class="ibox_m">
</li> --> </div>
</ul> </div>
<div id="icharts_32" class="echarts-body"></div> <div class="main_t ul-index2">
<div class="ibox_t">
<span class="box-tittle-text">设备运行</span>
</div>
<div class="ibox_m">
<ul class="ul-list-123 ul-list-125">
<li>
<div>正常运行:</div>
<div>
<span>500</span>
<span>分钟</span>
</div>
</li>
<li>
<div>停线时间:</div>
<div>
<span>40</span>
<span>分钟</span>
</div>
</li>
<li>
<div>休息时间:</div>
<div>
<span>30</span>
<span>分钟</span>
</div>
</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main-box-right">
<div class="main_t">
<div class="ibox_t">
<span class="box-tittle-text">设备状态</span>
</div>
<div class="ibox_m">
<p class="text-124">自动</p>
<div class="ibox_t"> </div>
<span class="box-tittle-text">1月客户交付扣分、及时率</span>
</div> </div>
<div class="ibox_m"> <div class="main_t zongchanliang-box">
<span class="leiji-time"> <div class="ibox_t">
<span>本月累计扣分: </span> <span class="box-tittle-text">总产量</span>
<span style="color: #e01f54;">10</span> </div>
<span style="color: #e01f54;"> 分</span> <div class="ibox_m">
</span> <p class="text-125">
<ul class="echarts-mark-box"> <span>207</span>
<li> <span style="font-size: 86px;">台</span>
<label style="background: #72ccff;"></label> </p>
<span>交付扣分</span>
</li> <ul class="ul-list-123">
<li class="zhexian"> <li>
<label style="background: #91cc75;"></label> <div>班次1:</div>
<span>交付及时率</span> <div>
</li> <span>400</span>
</ul> <span>台</span>
<div id="icharts_c3" class="echarts-body"></div> </div>
</li>
<li>
<div>班次2:</div>
<div>
<span>400</span>
<span>台</span>
</div>
</li>
<li>
<div>班次3:</div>
<div>
<span>400</span>
<span>台</span>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div>
<div class="main_t ul-index4"> <div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1 bottom-inex23-box">
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">额外运费</span> <span class="box-tittle-text">小时产量</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<span class="leiji-time">
<span>本月累计运费: </span>
<span>9.31</span>
<span> 万元，</span>
<span>费用占比: </span>
<span>1.2</span>
<span> %</span>
</span>
<ul class="echarts-mark-box">
<li>
<label style="background: #72ccff;"></label>
<span>额外运费</span>
</li>
<li class="zhexian">
<label style="background: #91cc75;"></label>
<span>费用占比</span>
</li>
<li class="zhexian">
<label style="background: #ee6666;"></label>
<span>目标</span>
</li>
</ul>
<div id="icharts_c4" class="echarts-body"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
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