Home Explore Help
Register Sign In
wukai
/
twin-web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

白胚布预测静态页面

liling 4 months ago
parent
be057e68b3
commit
5254d1695b
3 changed files with 301 additions and 4 deletions
Split View Show Diff Stats
  1. 108 2
      bpb_fx.html
  2. 193 2
      css/bpb.css
  3. BIN
      image/bpb/CalendarBlank.png

+ 108 - 2
bpb_fx.html
View File 

@@ -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;">&nbsp;天</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(){

+ 193 - 2
css/bpb.css
View File 

@@ -2,6 +2,38 @@ body{
 
     width: 1366px;
 
     height: 764px;
 
 }
 
+input{
 
+    background: rgba(41, 85, 137, 0.70) !important;
 
+    border: 1px solid rgba(102, 174, 243, 1);
 
+    color: rgba(231, 248, 255, 1);
 
+    font-size: 16px;
 
+    height: 28px;
 
+    line-height: 28px;
 
+    border-radius: 2px;
 
+}
 
+@keyframes rotate {
 
+    from {
 
+      transform: rotate(0deg); /* 动画开始时图片的角度 */
 
+    }
 
+    to {
 
+      transform: rotate(360deg); /* 动画结束时图片旋转360度 */
 
+    }
 
+}
 
+.refresh{
 
+    animation: rotate 2s linear infinite;
 
+}
 
+.abs{
 
+    position: absolute;
 
+    left: 0;
 
+    top:0;
 
+    z-index: 1000;
 
+}
 
+.fontcolor{
 
+    transform: rotateZ(-3deg) rotateX(31deg) rotateY(-47deg) skew(-21deg);
 
+    background: -webkit-linear-gradient(#ffffff, #9c9ded);
 
+    -webkit-background-clip: text;
 
+    -webkit-text-fill-color: transparent;
 
+}
 
 .bpb_bg{
 
     background-image: url('../image/bpb/bg.png');
 
     background-size: contain;
 
@@ -10,11 +42,170 @@ body{
 
     background-image: url('../image/bpb/title.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    height: 9%;
 
+    height: calc(0.7*99px);
 
 }
 
 .bpb_content{
 
     position: relative;
 
     width: 100%;
 
-    height: calc(91%-40px);
 
+    height: 91%;
 
     color: #fff;
 
+}
 
+.bpb_order_num{
 
+    position: absolute;
 
+    left:35%;
 
+    top: -5%;
 
+    z-index: 2;
 
+    font-weight: bold;
 
+    font-size: 20px;
 
+    transform: rotateZ(210deg) rotateX(183deg) rotateY(-203deg) skew(37deg);
 
+}
 
+.bpb_orderlist,.bpb_order_resultlist{
 
+    position: absolute;
 
+    left:calc(0.7*358px);
 
+    top: calc(0.7*20px);
 
+    width: calc(0.7*234px);
 
+    height: calc(0.7*140px);
 
+}
 
+.bpb_order_item{
 
+    position: absolute;
 
+    background-image: url('../image/bpb/Exclude.png');
 
+    background-size: contain;
 
+    background-repeat: no-repeat;
 
+    width: calc(0.7*234px);
 
+    height: calc(0.7*140px);
 
+    z-index: 1;
 
+    left: 0;
 
+    right: 0;
 
+}
 
+.bpb_order_item.alarm{
 
+    background-image: url('../image/bpb/Exclude1.png') !important;
 
+}
 
+.bpb_order_resultlist .bpb_order_item .no{
 
+    font-size: 12px !important;
 
+    top: 34px;
 
+    left: 28px;
 
+    position: absolute;
 
+    transform: rotateZ(32deg) rotateX(35deg) rotateY(-3deg) skew(-28deg);
 
+}
 
+.bpb_order_item .no{
 
+    position: absolute;
 
+    transform: rotateZ(32deg) rotateX(35deg) rotateY(-3deg) skew(-36deg);
 
+    left: 17px;
 
+    top: 45px;
 
+    font-size: 14px;
 
+    font-weight: 400;
 
+}
 
+
 
+.pbp_order_app,.pbp_storage,.pbp_plc{
 
+    position: absolute;
 
+    left: 5%;
 
+    top: 20%;
 
+    height: 150px;
 
+    width: 130px;
 
+}
 
+.pbp_order_app .title,.pbp_storage .title,.pbp_plc .title{
 
+    position: absolute;
 
+    left: -45px;
 
+    top: 30px;
 
+    font-weight: bold;
 
+    font-size: 24px;
 
+    letter-spacing: 5px;
 
+}
 
+.pbp_order_app img,.pbp_storage img,.pbp_plc img{
 
+    width: calc(0.7*130px);
 
+    height: calc(0.7*112px);
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50px;
 
+}
 
+.bpb_mt_list{
 
+    position: absolute;
 
+    /*background-image: url('../image/bpb/bg2.png');*/
 
+    background-size: contain;
 
+    background-repeat: no-repeat;
 
+    z-index: 1;
 
+    left: 33%;
 
+    top:23%;
 
+    width: calc(0.7*700px);
 
+    height: calc(0.7*423px);
 
+}
 
+.bpb_mt_list .title{
 
+    transform: rotateZ(1deg) rotateX(13deg) rotateY(-291deg) !important;    
+    letter-spacing: 28px !important;   
+    font-weight: bold;    
+    font-size: 32px;    
+    text-align: center;    
+    width: 100%;    
+    top: 0%;    
+    position: absolute;    
+    left: 160px;
 
+}
 
+.bpb_mt_list .wlbg{
 
+    width: 100%;height: 100%;position: absolute;
 
+}
 
+.bpb_mt_list .bpb_mt_item{
 
+    position: absolute;
 
+    background-image: url('../image/bpb/wl0.png');
 
+    background-size: contain;
 
+    background-repeat: no-repeat;
 
+    width: calc(0.7*280px);
 
+    height: calc(0.7*166px);
 
+    z-index: 1;
 
+    left: 272px;
 
+    top: 11px;
 
+}
 
+.bpb_mt_list .bpb_mt_item.alarm{
 
+    background-image: url('../image/bpb/wl1.png') !important;
 
+}
 
+.bpb_mt_list table{
 
+    width: 187%;
 
+    transform: rotateZ(0deg) rotateX(13deg) rotateY(-291deg) skew(-67deg) !important;
 
+    letter-spacing: 5px;
 
+    position: absolute;
 
+    top: 28%;
 
+    left: -83px;
 
+}
 
+.bpb_mt_list tr{
 
+    background: none !important;
 
+    height: 24px !important;
 
+}
 
+.bpb_mt_list td{
 
+    border-bottom: 0px !important;
 
+    font-size: 18px;
 
+}
 
+.bpb_mt_list .bpb_mt_item.alarm table tr:last-child>td:last-child{
 
+    color: rgba(255, 99, 65, 1) !important;
 
+    font-weight: bold;
 
+}
 
+.bpb_mt_list .link_point{
 
+    position: absolute;
 
+    width: calc(0.7*117px);
 
+    height: calc(0.7*70px);
 
+}
 
+.bpb_mt_list .cl{
 
+    background-image: url('../image/bpb/device.png');
 
+    background-size: contain;
 
+    position: absolute;
 
+    width: calc(0.7*0.8*174px);
 
+    height: calc(0.7*0.8*174px);
 
+}
 
+
 
+.bpb_mt_list .cl b{
 
+    transform: rotateZ(0deg) rotateX(31deg) rotateY(-308deg) skew(0deg);
 
+    letter-spacing: 1px !important;
 
+    font-weight: bold;
 
+    text-align: center;
 
+    position: absolute;
 
+    left: 29px;
 
+    top: 0px;
 
+    font-size: 22px;
 
+}
 
+
 
+#plc_wl_line{
 
+    /*transform-origin: left bottom;
 
+    transform: rotateZ(-27deg) rotateX(24deg) rotateY(-334deg);*/
 
+}
 
+
 
+.order_result_line{
 
+
 
 }

BIN
image/bpb/CalendarBlank.png
View File