|
|
@@ -9,7 +9,77 @@
|
|
|
</head>
|
|
|
<body onclick="clearEle();" class="bpb_bg">
|
|
|
<div class="bpb_title"></div>
|
|
|
-<div class="bpb_content"><div style="text-align: center;">正在开发中...</div></div>
|
|
|
+<div class="bpb_content">
|
|
|
+ <div class="abs" style="text-align: center;top:2%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
|
|
|
+ <span style="position: relative;">订单日期<input value="2025-01-23" readonly="" type="text" style="text-align: center;width: 150px;"><img class="abs" src="image/bpb/CalendarBlank.png" style="left: inherit;right: 5px;"></span>
|
|
|
+ <span style="position: relative;">预测周期<input value="10" type="text" style="text-align: center;width: 80px;"> 天</span>
|
|
|
+ </div>
|
|
|
+ <div class="bpb_orderlist">
|
|
|
+ <div class="bpb_order_num fontcolor">订单数：<b>8</b></div>
|
|
|
+ <div class="itemlist">
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">编号：12345678</div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pbp_order_app">
|
|
|
+ <div class="title fontcolor">订单系统</div>
|
|
|
+ <div class="iconlist">
|
|
|
+ <img src="image/bpb/o.png" style="z-index: 1">
|
|
|
+ <img src="image/bpb/o.png" id="order_app_linkpoint" style="z-index: 2;top: calc(0.7*110px);left: calc(0.7*70px);">
|
|
|
+ <img src="image/bpb/o.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="abs" id="order_app_line" style="height: 50px;"><img src="image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
|
|
|
+ <div class="bpb_mt_list">
|
|
|
+ <div class="title fontcolor">物料清单</div>
|
|
|
+ <div class="title fontcolor" style="left: 360px;top: 94px;">经编产能</div>
|
|
|
+ <img class="wlbg" src="image/bpb/wlbg.png">
|
|
|
+ <div class="itemlist">
|
|
|
+ <div class="bpb_mt_item"><table cellspacing="0" cellpadding="0"><tr><td rowspan="2">单层涤纶毯(成品)</td><td>需求：30T</td></tr><tr><td>库存：35T</td></tr></table><img src="image/bpb/v320.png" class="link_point"><div class="cl"><b class="">10T</b></div></div>
|
|
|
+ <div class="bpb_mt_item"><table cellspacing="0" cellpadding="0"><tr><td rowspan="2">单层涤纶毯(成品)</td><td>需求：30T</td></tr><tr><td>库存：35T</td></tr></table><img src="image/bpb/v320.png" class="link_point"><div class="cl"><b class="">10T</b></div></div>
|
|
|
+ <div class="bpb_mt_item alarm"><table cellspacing="0" cellpadding="0"><tr><td rowspan="2">单层涤纶毯(成品)</td><td>需求：30T</td></tr><tr><td>库存：35T</td></tr></table><img src="image/bpb/v320.png" class="link_point"><div class="cl"><b class="">10T</b></div></div>
|
|
|
+ <div class="bpb_mt_item alarm"><table cellspacing="0" cellpadding="0"><tr><td rowspan="2">单层涤纶毯(成品)</td><td>需求：30T</td></tr><tr><td>库存：35T</td></tr></table><img src="image/bpb/v320.png" class="link_point"><div class="cl"><b class="">10T</b></div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="abs" id="order_wl_line" style="width: calc(0.5*240px);"><img src="image/bpb/v318.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
|
|
|
+ <div class="pbp_storage">
|
|
|
+ <div class="title fontcolor" style="top: 43px;left: -20px;">仓储</div>
|
|
|
+ <div class="iconlist">
|
|
|
+ <img src="image/bpb/h.png" style="z-index: 1">
|
|
|
+ <img src="image/bpb/h.png" id="storage_app_linkpoint" style="z-index: 2;top: calc(0.7*110px);left: calc(0.7*70px);">
|
|
|
+ <img src="image/bpb/h.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
|
|
|
+ </div>
|
|
|
+ <div class="abs" id="storage_wl_line" style="height: 50px;"><img src="image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="image/bpb/refresh.png" style="left: 35%;top:100%;width: 36px;height: 36px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="pbp_plc">
|
|
|
+ <div class="title fontcolor" style="top: 43px;left: -20px;">生产</div>
|
|
|
+ <div class="iconlist">
|
|
|
+ <img src="image/bpb/plc.png" style="z-index: 1">
|
|
|
+ <img src="image/bpb/plc.png" id="plc_app_linkpoint" style="z-index: 2;top: calc(0.7*110px);left: calc(0.7*70px);">
|
|
|
+ <img src="image/bpb/plc.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
|
|
|
+ </div>
|
|
|
+ <div class="abs" id="plc_wl_line" style="height: 50px;"><img src="image/bpb/v319.png" style="width: 100%;height: 100%;top:0;"><img class="abs refresh" src="image/bpb/refresh.png" style="left: 35%;top:32%;width: 36px;height: 36px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="bpb_order_resultlist" style="left:inherit;right: 50px;top:calc(0.7*710px)">
|
|
|
+ <div class="itemlist">
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item alarm"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ <div class="bpb_order_item alarm"><div class="no">需求过剩：5T<br>编号：12345678</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="abs order_result_line"><img src="image/bpb/v320.png" class="link_point"><img class="abs refresh" src="image/bpb/refresh.png" style="left: 35%;top:27%;width: 36px;height: 36px"></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
<!-- 引入qwebchannel.js、Player.js、PlayerUtils.js -->
|
|
|
@@ -99,7 +169,43 @@
|
|
|
$("#date_select,#ui-datepicker-div,#day_select").on("click", function (e) {
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
- $("#bpb_content").height($(window).height()-$(".bpb_title").height());
|
|
|
+ //$(".bpb_content").height($(window).height()-$(".bpb_title").height());
|
|
|
+ $(".bpb_content .bpb_orderlist .itemlist .bpb_order_item").each(function(ind,obj){
|
|
|
+ var $this = $(this);
|
|
|
+ $this.css({"left":'0px',"top":(ind*30)+'px',"z-index":100-ind});
|
|
|
+ })
|
|
|
+ var lastitem =$(".bpb_content .bpb_orderlist .itemlist .bpb_order_item:last");
|
|
|
+ var orderH = lastitem.height()+lastitem.position().top;
|
|
|
+ $(".bpb_content .bpb_orderlist").height(orderH);
|
|
|
+ $(".pbp_order_app").css({"top":lastitem.position().top+lastitem.height()/2+"px"});
|
|
|
+ var tmpele = $("#order_app_linkpoint");
|
|
|
+ $("#order_app_line").css({"left":(tmpele.offset().left+tmpele.width()/2+30)+"px","top":tmpele.offset().top-tmpele.height()-30+"px"});
|
|
|
+ $("#order_wl_line").css({"top":lastitem.offset().top-lastitem.height()/4+"px","left":lastitem.offset().left+lastitem.width()+"px"});
|
|
|
+ var $bpb_mt_list = $(".bpb_mt_list");
|
|
|
+ $(".pbp_storage").css({"top":$bpb_mt_list.position().top+$bpb_mt_list.height()-60+"px","left":$bpb_mt_list.offset().left-120+"px"});
|
|
|
+ var tmpele = $("#storage_app_linkpoint");
|
|
|
+ $("#storage_wl_line").css({"left":(tmpele.position().left+tmpele.width()/2+30)+"px","top":tmpele.position().top-tmpele.height()-30+"px","width":(0.7*130)+"px","height":(0.7*80)+"px"});
|
|
|
+ $(".bpb_mt_list .itemlist .bpb_mt_item").each(function(ind,obj){
|
|
|
+ var $this = $(this);
|
|
|
+ $this.css({"left":272+(ind*-53)+'px',"top":11+(ind*30)+'px',"z-index":100-ind});
|
|
|
+ var $linkline = $this.find(".link_point").css({"left":$this.width()-16+'px',"top":$this.height()-13+'px',"z-index":100-ind});
|
|
|
+ $this.find(".cl").css({"left":$this.width()+$linkline.width()-40+'px',"top":$this.height()+$linkline.height()-46+'px',"z-index":100-ind});
|
|
|
+ });
|
|
|
+ var $bpb_mt_lastitem = $(".bpb_mt_list .bpb_mt_item:last .cl");
|
|
|
+ $(".pbp_plc").css({"top":$bpb_mt_lastitem.offset().top+$bpb_mt_lastitem.height()-60+"px","left":$bpb_mt_lastitem.offset().left-200+"px"});
|
|
|
+ var tmpele = $("#plc_app_linkpoint");
|
|
|
+ $("#plc_wl_line").css({"left":(tmpele.position().left+tmpele.width()/2+30)+"px","top":tmpele.position().top-tmpele.height()-30+"px","width":(0.7*132)+"px","height":(0.7*173)+"px"});
|
|
|
+ //需求预测结果
|
|
|
+ var orderList = $(".bpb_content .bpb_order_resultlist .itemlist .bpb_order_item");
|
|
|
+ orderList.each(function(ind,obj){
|
|
|
+ var $this = $(this);
|
|
|
+ $this.css({"left":'0px',"top":(ind*-37)+'px',"z-index":1+ind});
|
|
|
+ });
|
|
|
+ var $order_result_line = $(".order_result_line");
|
|
|
+ var orderCount = orderList.length;
|
|
|
+ if(orderCount>3) orderCount=3;
|
|
|
+ var tmpTop = orderList.eq(0).height()*0.7+((orderCount-1)*30);
|
|
|
+ $order_result_line.css({"left":"inherit","right":$(".bpb_content .bpb_order_resultlist").width()+25+"px","top":tmpTop*-1+"px"})
|
|
|
});
|
|
|
function clearEle(){
|
|
|
|
