新增超多订单选择框功能

src/pages/bpb/index.vue

@@ -9,7 +9,7 @@
                 <el-button @click="imp" style="margin-left: 10px;">导出</el-button>
             </div>
             <div class="bpb_orderlist">
-                <div ref="bpb_orderlist_title" class="bpb_order_num fontcolor">
+                <div ref="bpb_orderlist_title" class="bpb_order_num fontcolor" @click="showAllOrderList">
                     <template v-if="orderQueryState==2">订单数：<b>{{ orderlist.length }}</b></template>                    
                 </div>
                 <div class="itemlist" ref="orderItemList">
@@ -98,7 +98,7 @@
             </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 v-if="plcPredictState==2">预测结果</div>
+                    <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}">
@@ -115,6 +115,19 @@
             </div>
         </div>
     </div>
+    <div class="abs order_all" ref="order_list_all" v-if="allOrderListShow">
+        <div class="triangle2"></div>
+        <div class="triangle"></div>
+        <el-table :data="orderlist" style="height: 360px;" @selection-change="selectValues">
+            <el-table-column type="selection" width="55" />
+            <el-table-column label="订单编号" align="center" prop="orderCode" />
+            <el-table-column label="订单时间" align="center" prop="orderDate" />
+        </el-table>
+        <div style="line-height: 40px;text-align: center;">
+            <el-button @click="okOrderWin">确定</el-button>
+            <el-button @click="closeOrderWin">关闭</el-button>
+        </div>
+    </div>
 </template>
 <style>
 @import '../../styles/bpb.css';
@@ -148,10 +161,13 @@ export default {
         const selectedDate1 = ref("");
         const selectedDate2 = ref("");
         const days = ref(10);
+        const allOrderListShow = ref(false);
+        const allOrderResultShow = ref(false);
         let selectPredictOrders = ref([]);
         let orderlist=ref([]);
         let orderlistTop5 = ref([]);
         let bpb_mt_item_data = ref([]);
+        const order_list_all = ref(null);
         const bpb_orderlist_title = ref(null);
         const bpb_order_resultlist_title =ref(null);
         const orderItemList = ref(null);
@@ -182,7 +198,6 @@ export default {
                 "days":days.value,
             };
             api.GetOrderList(v).then((res) => {
-                console.log(res);
                 if(res==null){
                     return;
                 }
@@ -208,6 +223,7 @@ export default {
             getOrderDateList();
         }
         function start(){
+            allOrderListShow.value=false;
             orderQueryState.value = 0;
             storageQueryState.value = 0;
             plcPredictState.value = 0;
@@ -272,7 +288,7 @@ export default {
             });
         }
         function date1Changed(v){
-            console.log(v)
+            allOrderListShow.value=false;
             var ind = false;
             var datelist2 = [];
             selectedDate2.value = "";
@@ -376,14 +392,14 @@ export default {
                     const element = selectPredictOrders.value[index];
                     var isalarm=false;
                     var neednum = 0;
-                    for (let index2 = 0; index2 < element.bomlist.length; index2++) {
-                        const element2 = element.bomlist[index2];
+                    for (let index2 = 0; index2 < (element.bomlist||element.bomList).length; index2++) {
+                        const element2 = (element.bomlist||element.bomList)[index2];
                         if(boms[element2.bomCode]!=null){
                             neednum = boms[element2.bomCode].cz;
                             if(neednum>0) isalarm = true;
                         }
                     }
-                    temp2.push({id:element.id,isalarm:isalarm,neednum:neednum})
+                    temp2.push({id:element.id||element.orderCode,isalarm:isalarm,neednum:neednum})
                 }
                 order_result_data.value = temp2;
                 setTimeout(() => {                   
@@ -406,7 +422,64 @@ export default {
             }, 1000);
         }
 
+        function showAllOrderList(){
+            //if(orderlist.value.length<= orderlistTop5.value.length) return;
+            allOrderListShow.value = true;
+            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 selectValues(vs){
+            //console.log(vs)
+            selectPredictOrders.value = vs;
+            let tmpLst = orderlistTop5.value;
+            tmpLst.forEach((item,ind)=>{
+                var d = vs.filter((ele)=> ele.orderCode==item.orderCode);
+                if(d.length>0){
+                    item.checked = true;
+                }else{
+                    item.checked=false;
+                }
+            })
+        }
+        function okOrderWin(){
+            storageQueryState.value = 0;
+            plcPredictState.value = 0;
+            bpb_mt_item_data.value = [];
+            order_result_data.value = [];
+            for(var key in selectPredictOrders.value){
+                var ele = selectPredictOrders.value[key];
+                for (let index = 0; index < ele.bomList.length; index++) {
+                        const element = ele.bomList[index];
+                        const xql = element.xql;
+                        if(boms[element.bomCode]==null) boms[element.bomCode] = element;
+                        else boms[element.bomCode].xql = boms[element.bomCode].xql + xql;
+                }
+            }
+                    //物料清单信息
+                    var temp1 = [];
+                    for(let key in boms){
+                        temp1.push({id:boms[key].bomCode,name:boms[key].bomName,bomSpec:boms[key].bomSpec,need:boms[key].xql,'storage':null,plc:null,isalarm:false});
+                    }
+                    let tempLst=[];
+                    temp1.forEach((item,ind) => {
+                        let top=11+(ind*30)+'px';
+                        let zindex = 100-ind;
+                        let left = 272+(ind*-53)+'px';
+                        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;                    
+                    queryStorage();
+            allOrderListShow.value=false;
+        }
+        function closeOrderWin(){
+            allOrderListShow.value=false;
+        }
+
         function imp(){
+            allOrderListShow.value=false;
             let uri = process.env.VUE_APP_API + "/api/export/order?start=" + selectedDate1.value + "&end=" + selectedDate2.value + "&days=" + days.value;
             //proxy.download(uri, {}, `白坯布靶向智能生产预测${selectedDate1.value}至${selectedDate2.value}.zip`)
             window.open(uri);
@@ -433,6 +506,7 @@ export default {
             order_result_data,
             selectedOrder,
             queryStorage,
+            order_list_all,
             bpb_orderlist_title,
             bpb_order_resultlist_title,
             orderItemList,
@@ -451,6 +525,12 @@ export default {
             bpb_order_resultlist,
             getOrderDateList,
             date1Changed,
+            showAllOrderList,
+            allOrderListShow,
+            allOrderResultShow,
+            okOrderWin,
+            closeOrderWin,
+            selectValues,
         }
     }
 }

src/styles/bpb.css

@@ -53,6 +53,28 @@ input[type='text']{
         transform: scale(1);
     }
 }
+.triangle{
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 50px;
+    left: -12px;
+    border-width: 6px;
+    border-style: solid;
+    border-color:transparent rgb(0 85 102 / 92%) transparent transparent  ;
+    border-radius: 4rpx;
+}
+.triangle2{
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 50px;
+    left: -13px;
+    border-width: 6px;
+    border-style: solid;
+    border-color:transparent #0dcae2 transparent transparent  ;
+    border-radius: 4rpx;
+}
 .refresh{
     animation: rotate 2s linear infinite;
 }
@@ -301,4 +323,14 @@ input[type='text']{
 
 .order_result_line{
 
+}
+.order_all{
+    width: 400px;
+    height: 400px;
+    border: 1px solid #008899;
+    background: rgb(0 85 102 / 92%);
+    z-index: 10000 !important;
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 14px;
 }