优化功能

src/pages/bpb/index.vue

@@ -40,8 +40,8 @@
             </div>
             <div class="abs" id="order_app_line" ref="order_app_line" style="height: 50px; left: 192px; top: 287px;"><img src="../../assets/image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
             <div class="bpb_mt_list" ref="bpb_mt_list">
-                <div class="title fontcolor">物料清单</div>
-                <div class="title fontcolor" style="left: 360px;top: 94px;">经编产能</div>
+                <div class="title bpb_order_num fontcolor"  @click="showAllBomList">物料清单 <b>{{ bpb_mt_item_data.length }}</b></div>
+                <div class="title fontcolor" style="left: 443px;top: 111px;">经编产能</div>
                 <img class="wlbg" src="../../assets/image/bpb/wlbg.png">
                 <div class="wlbg" style="right: -9px;top: 0%;height: 169%;bor;box-shadow: 3px 3px 10px #287faa;border: 1px solid rgb(47, 120, 171);width: 27%;border-radius: 3px;transform: rotateZ(240deg) rotateX(136deg) rotateY(-218deg) skew(0deg, -2deg);background: #0f3f6645;"></div>
                 <div class="itemlist">
@@ -49,12 +49,12 @@
                         请选择预测订单
                     </div>
                     <template v-else>
-                        <div v-for="item in bpb_mt_item_data" :class="item.isalarm ? 'bpb_mt_item alarm':'bpb_mt_item'" :key="item.id" :style="{left:item.left,top:item.top,zIndex:item.zindex}">
+                        <div v-for="(item,index) in bpb_mt_item_data_Top6" :class="item.isalarm ? 'bpb_mt_item alarm':'bpb_mt_item'" :key="item.id" :style="{left:item.left,top:item.top,zIndex:item.zindex}">
                             <table cellspacing="0" cellpadding="0"><tbody>
-                                <tr><td rowspan="2">{{ item.name }}<br>{{ item.bomSpec }}</td><td>需求：{{item.need}} T</td></tr><tr><td :style="{opacity:item.opacity,transition: 'opacity 0.5s'}">库存：{{item.storage==null?'？':item.storage+' T'}}</td></tr>
+                                <tr><td rowspan="2">{{ item.name }}<br>{{ item.bomSpec }}</td><td>需求：{{item.need/1000}} T</td></tr><tr><td :style="{opacity:item.opacity,transition: 'opacity 0.5s'}">库存：{{item.storage==null?'？':item.storage/1000+' T'}}</td></tr>
                             </tbody></table>
                             <img src="../../assets/image/bpb/v320.png" class="link_point" :style="{top:'90%',left:'90%',zIndex:item.zindex}">
-                            <div class="cl" :style="{top:'102%',left:'119%',zIndex:item.zindex}"><b class="">{{item.plc==null?'?':item.plc+'T'}}</b></div>
+                            <div class="cl" :style="{top:'102%',left:'119%',zIndex:item.zindex}"><b class="">{{item.plc==null?'?':item.plc/1000+'T'}}</b></div>
                         </div>
                     </template>
                 </div>
@@ -97,13 +97,13 @@
                 </div>
             </div>    
             <div class="bpb_order_resultlist" ref="bpb_order_resultlist" style="left:inherit;right: 50px;top:calc(0.7*710px)">
-                <div ref="bpb_order_resultlist_title" class="bpb_order_num fontcolor">
+                <div ref="bpb_order_resultlist_title" class="bpb_order_num fontcolor" @click="showAllResultList" style="width: 75%;text-align: center;">
                     <div v-if="plcPredictState==2">预测结果 <b>{{ order_result_data.length }}</b></div>
                 </div>
                 <div class="itemlist" v-show="plcPredictState==2">
-                    <div :class="item.isalarm?'bpb_order_item alarm': 'bpb_order_item'" v-for="item in order_result_data" :key="item.id" :style="{zIndex:item.zindex,top:item.top,left:item.left,transition:transition}">
-                        <div class="no" v-if="!item.isalarm">需求过剩：{{item.neednum}} T<br>编号：{{ item.id }}</div>
-                        <div class="no" v-else>产能不足：{{item.neednum}}T<br>编号：{{ item.id }}</div>
+                    <div :class="item.isalarm?'bpb_order_item alarm': 'bpb_order_item'" v-for="item in order_result_data_Top5" :key="item.id" :style="{zIndex:item.zindex,top:item.top,left:item.left,transition:transition}">
+                        <div class="no" v-if="!item.isalarm">产能过剩：{{item.neednum/1000}} T<br>编号：{{ item.id }}</div>
+                        <div class="no" v-else>产能不足：{{item.neednum/1000}}T<br>编号：{{ item.id }}</div>
                     </div>
                 </div>
                 <div class="abs order_result_line" ref="order_result_line">
@@ -128,6 +128,40 @@
             <el-button @click="closeOrderWin">关闭</el-button>
         </div>
     </div>
+    <div class="abs bom_all" ref="bom_list_all" v-if="allBomListShow">
+        <div class="bom_triangle2"></div>
+        <div class="bom_triangle"></div>
+        <el-table :data="bpb_mt_item_data" style="height: 360px;">
+            <el-table-column label="物料编码" align="center" prop="id" />
+            <el-table-column label="规格型号" align="center" prop="bomSpec" />
+            <el-table-column label="物料名称" align="center" prop="name" width="240px"/>
+            <el-table-column label="产能(T)" align="center" prop="plc">
+                <template #default="scope">
+                      <span>{{ scope.row.plc/1000 }} T</span>
+                    </template>
+            </el-table-column>
+        </el-table>
+        <div style="line-height: 40px;text-align: center;">
+            <el-button @click="closeAllBomList">关闭</el-button>
+        </div>
+    </div>
+    <div class="abs bom_all" ref="result_list_all" :style="{'left':'auto !important','height':result_table_height+40+'px'}" v-if="allOrderResultShow">
+        <div class="bom_triangle2"></div>
+        <div class="bom_triangle"></div>
+        <el-table :data="order_result_data" :style="{'height': result_table_height+'px'}">
+            <el-table-column label="订单编号" align="center" prop="id" />
+            <el-table-column label="客户名称" align="center" prop="customerName"  width="240px"/>
+            <el-table-column label="订单时间" align="center" prop="orderDate" width="160px"/>
+            <el-table-column label="预测结果" align="center" prop="neednum" >
+                <template #default="scope">
+                      <span :style="{'color':scope.row.isalarm?'red':''}" v-html="(scope.row.neednum>0?'产能不足<br>':'产能过剩<br>') + (scope.row.neednum/1000) +'T'"></span>
+                    </template>
+            </el-table-column>
+        </el-table>
+        <div style="line-height: 40px;text-align: center;">
+            <el-button @click="closeAllResultList">关闭</el-button>
+        </div>
+    </div>
 </template>
 <style>
 @import '../../styles/bpb.css';
@@ -153,6 +187,7 @@ export default {
 
     },
     setup(props,{emit}) {
+        const result_table_height=ref(360)
         const orderDateList = ref([]);
         const orderDateList2 = ref([]);
         const orderQueryState = ref(0);
@@ -162,12 +197,16 @@ export default {
         const selectedDate2 = ref("");
         const days = ref(10);
         const allOrderListShow = ref(false);
+        const allBomListShow = ref(false);
         const allOrderResultShow = ref(false);
         let selectPredictOrders = ref([]);
         let orderlist=ref([]);
         let orderlistTop5 = ref([]);
         let bpb_mt_item_data = ref([]);
+        let bpb_mt_item_data_Top6 = ref([]);
         const order_list_all = ref(null);
+        const bom_list_all = ref(null);
+        const result_list_all = ref(null);
         const bpb_orderlist_title = ref(null);
         const bpb_order_resultlist_title =ref(null);
         const orderItemList = ref(null);
@@ -184,6 +223,7 @@ export default {
         const plc_wl_line = ref(null);
         const bpb_order_resultlist = ref(null);
         const order_result_line = ref(null);
+        let order_result_data_Top5 = ref([]);
         let order_result_data = ref([]);
 
         function testData(){           
@@ -210,7 +250,7 @@ export default {
                     orderlistTop5.value.forEach((item,ind)=>{
                         top=210-(ind*30)+'px';
                         let zindex = 1+ind;
-                        tmpLst.push({"id":item.orderCode,"orderCode":item.orderCode,bomlist:item.bomList,"top":top,"zindex":zindex,"checked":false,transition:'top '+(ind*0.3)+'s ease-in-out'});
+                        tmpLst.push({"id":item.orderCode,"orderCode":item.orderCode,customerName:item.customerName,orderDate:item.orderDate,bomlist:item.bomList,"top":top,"zindex":zindex,"checked":false,transition:'top '+(ind*0.3)+'s ease-in-out'});
                     })                
                     orderlistTop5.value = tmpLst;                    
                     layout();
@@ -230,6 +270,7 @@ export default {
             orderlist.value = [];
             selectPredictOrders.value=[];
             bpb_mt_item_data.value = [];
+            bpb_mt_item_data_Top6.value = [];
             order_result_data.value = [];
             bpb_orderlist_title.value.style.top="0%";
             bpb_order_resultlist_title.value.style.top='0%';
@@ -291,6 +332,7 @@ export default {
             allOrderListShow.value=false;
             var ind = false;
             var datelist2 = [];
+            bpb_mt_item_data_Top6.value=[];
             selectedDate2.value = "";
             for (let index = 0; index < orderDateList.value.length; index++) {
                 const element = orderDateList.value[index];
@@ -312,6 +354,7 @@ export default {
             storageQueryState.value = 0;
             plcPredictState.value = 0;
             bpb_mt_item_data.value = [];
+            bpb_mt_item_data_Top6.value=[];
             order_result_data.value = [];
             for(let i=0;i<tempLst.length;i++){
                 if(tempLst[i].id==obj.id){
@@ -348,7 +391,8 @@ export default {
                         let obj = {"id":item.id,name:item.name,bomSpec:item.bomSpec,"top":top,"zindex":zindex,"left":left,"isalarm":item.isalarm,need:item.need,storage:item.storage,plc:item.plc};
                         tempLst.push(obj);
                     });
-                    bpb_mt_item_data.value = tempLst;                    
+                    bpb_mt_item_data.value = tempLst;   
+                    bpb_mt_item_data_Top6.value = tempLst.slice(0,6);         
                     queryStorage();
                  }, 1000);                 
             }
@@ -366,6 +410,7 @@ export default {
                         ele['opacity'] = 0;
                     })
                     bpb_mt_item_data.value = tempLst;
+                    bpb_mt_item_data_Top6.value = tempLst.slice(0,6);
                 }, 500);
                 //渐显
                 setTimeout(() => {
@@ -377,10 +422,10 @@ export default {
                         ele['opacity'] = 1;
                         ele['plc'] = bomItem.last;
                     })
-                    bpb_mt_item_data.value = tempLst;                
+                    bpb_mt_item_data.value = tempLst;    
+                    bpb_mt_item_data_Top6.value = tempLst.slice(0,6);            
                     predict();                    
                 }, 1000);
-
             }, 3000);
         }
         function predict(){
@@ -399,37 +444,75 @@ export default {
                             if(neednum>0) isalarm = true;
                         }
                     }
-                    temp2.push({id:element.id||element.orderCode,isalarm:isalarm,neednum:neednum})
+                    temp2.push({id:element.id||element.orderCode,customerName:element.customerName,orderDate:element.orderDate,isalarm:isalarm,neednum:neednum})
                 }
+                temp2.sort(function(a, b){
+                    return a.isalarm - b.isalarm
+                }).reverse();
                 order_result_data.value = temp2;
+                order_result_data_Top5.value = temp2.slice(0,10);
                 setTimeout(() => {                   
                     //排列预测结果元素
                     let tmpLst = [];
                     order_result_data.value.forEach((item,ind)=>{
-                        tmpLst.push({"id":item.id,"zindex":1+ind,"left":'0px',"top":(ind*-37)+'px',"isalarm":item.isalarm,"neednum":item.neednum,transition:"opt "+(ind*0.5)+"s ease-in-out"});
+                        tmpLst.push({"id":item.id,customerName:item.customerName,orderDate:item.orderDate,"zindex":1+ind,"left":'0px',"top":(ind*-37)+'px',"isalarm":item.isalarm,"neednum":item.neednum,transition:"opt "+(ind*0.5)+"s ease-in-out"});
                     });
                     order_result_data.value = tmpLst;
-                    
-                    var orderCount = order_result_data.value.length;
+                    order_result_data_Top5.value = tmpLst.slice(0,10);
+                    var orderCount = order_result_data_Top5.value.length;
                     if(orderCount>3) orderCount=3;
                     var tmpTop = parseInt(window.getComputedStyle(bpb_order_resultlist.value.querySelectorAll('.bpb_order_item')[0]).height)*0.7+((orderCount-1)*30);
                     order_result_line.value.style.left = 'inherit';
                     order_result_line.value.style.right = parseInt(window.getComputedStyle(bpb_order_resultlist.value).width) + 25 + 'px';
                     order_result_line.value.style.top = tmpTop*-1+"px";   
-                    bpb_order_resultlist_title.value.style.top =   ((tmpLst.length-1)*-37)-10+'px';
+                    bpb_order_resultlist_title.value.style.top =   ((order_result_data_Top5.value.length-1)*-37)-10+'px';
                     plcPredictState.value = 2;              
-                }, 3000);
+                }, 5000);
             }, 1000);
         }
 
         function showAllOrderList(){
             //if(orderlist.value.length<= orderlistTop5.value.length) return;
             allOrderListShow.value = true;
+            allBomListShow.value= false;
+            allOrderResultShow.value =false;
             setTimeout(() => {
                 order_list_all.value.style.top =  bpb_orderlist_title.value.offsetTop+'px';
                 order_list_all.value.style.left = bpb_orderlist_title.value.parentElement.offsetLeft+parseInt( window.getComputedStyle(bpb_orderlist_title.value.parentElement).width)+'px';
             }, 20);
         }
+        function showAllBomList(){
+            allBomListShow.value=true
+            allOrderListShow.value=false;
+            allOrderResultShow.value = false;
+            setTimeout(() => {
+                bom_list_all.value.style.top =  '86px';
+                bom_list_all.value.style.left = '191px';
+            }, 20);
+        }
+
+        function showAllResultList(){
+            allBomListShow.value=false;
+            allOrderListShow.value=false;
+            allOrderResultShow.value = true;
+            var t = parseInt(window.getComputedStyle(bpb_order_resultlist_title.value.parentElement).top)+bpb_order_resultlist_title.value.offsetTop-70;
+            if((724-t)<400 ){
+                result_table_height.value=200;
+            }else{
+                result_table_height.value=360;
+            }
+            setTimeout(() => {
+                result_list_all.value.style.top = t + 'px';
+                result_list_all.value.style.right = '160px';
+            }, 20); 
+        }
+
+        function closeAllBomList(){
+            allBomListShow.value=false;
+        }
+        function closeAllResultList(){
+            allOrderResultShow.value = false;
+        }
         function selectValues(vs){
             //console.log(vs)
             selectPredictOrders.value = vs;
@@ -447,7 +530,9 @@ export default {
             storageQueryState.value = 0;
             plcPredictState.value = 0;
             bpb_mt_item_data.value = [];
+            bpb_mt_item_data_Top6.value=[];
             order_result_data.value = [];
+            boms={};
             for(var key in selectPredictOrders.value){
                 var ele = selectPredictOrders.value[key];
                 for (let index = 0; index < ele.bomList.length; index++) {
@@ -470,7 +555,8 @@ export default {
                         let obj = {"id":item.id,name:item.name,bomSpec:item.bomSpec,"top":top,"zindex":zindex,"left":left,"isalarm":item.isalarm,need:item.need,storage:item.storage,plc:item.plc};
                         tempLst.push(obj);
                     });
-                    bpb_mt_item_data.value = tempLst;                    
+                    bpb_mt_item_data.value = tempLst;
+                    bpb_mt_item_data_Top6.value = tempLst.slice(0,6);                     
                     queryStorage();
             allOrderListShow.value=false;
         }
@@ -491,6 +577,7 @@ export default {
             init,
             start,
             imp,
+            result_table_height,
             days,
             orderDateList,
             orderDateList2,
@@ -503,10 +590,14 @@ export default {
             orderlist,
             orderlistTop5,
             bpb_mt_item_data,
+            bpb_mt_item_data_Top6,
             order_result_data,
+            order_result_data_Top5,
             selectedOrder,
             queryStorage,
             order_list_all,
+            result_list_all,
+            bom_list_all,
             bpb_orderlist_title,
             bpb_order_resultlist_title,
             orderItemList,
@@ -526,8 +617,13 @@ export default {
             getOrderDateList,
             date1Changed,
             showAllOrderList,
+            showAllBomList,
+            closeAllBomList,
             allOrderListShow,
+            allBomListShow,
             allOrderResultShow,
+            showAllResultList,
+            closeAllResultList,
             okOrderWin,
             closeOrderWin,
             selectValues,

src/styles/bpb.css

@@ -234,15 +234,15 @@ input[type='text']{
     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;
+    transform: rotateZ(1deg) rotateX(12deg) rotateY(-291deg) !important;
+    letter-spacing: 20px !important;
+    font-weight: bold;
+    font-size: 32px;
+    text-align: center;
+    width: 67%;
+    top: -2%;
+    position: absolute;
+    left: 254px;
 }
 .bpb_mt_list .wlbg{
     width: 100%;height: 100%;position: absolute;
@@ -333,4 +333,37 @@ input[type='text']{
     border-radius: 5px;
     padding: 5px;
     font-size: 14px;
+}
+.bom_all{
+    width: 600px;
+    height: 400px;
+    border: 1px solid #008899;
+    background: rgb(0 85 102 / 92%);
+    z-index: 10000 !important;
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 14px;   
+}
+
+.bom_triangle{
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 50px;
+    right: -12px;
+    border-width: 6px;
+    border-style: solid;
+    border-color: transparent transparent transparent rgb(0 85 102 / 92%) ;
+    border-radius: 4rpx;
+}
+.bom_triangle2{
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 50px;
+    right: -13px;
+    border-width: 6px;
+    border-style: solid;
+    border-color: transparent transparent transparent #0dcae2 ;
+    border-radius: 4rpx;
 }