对接预测后台接口

src/api/system.js

@@ -100,6 +100,21 @@ function GetYrGyComper(v){
         data: v
     })
 }
+//白柸布智能靶向预测
+function GetOrderDateList(){
+    return request({
+        url: `api/order/date`,
+        method: "get",
+        data: null
+    })
+}
+function GetOrderList(v){
+    return request({
+        url: `api/order/query`,
+        method: "get",
+        params: v
+    })
+}
 function getSystemCode(data) {
     return request({
         url: `/getSysParamList`,
@@ -140,4 +155,6 @@ export default {
     GetProductionLneInfo,
     Get03Data,
     GetYrGyComper,
+    GetOrderDateList,
+    GetOrderList,
 }

src/pages/bpb/index.vue

@@ -3,9 +3,9 @@
         <div class="bpb_title"></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;">订单日期<el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"></el-date-picker></span>
-                <span style="position: relative;margin-left:10px;">预测周期<input value="10" type="text" style="text-align: center;width: 80px;">&nbsp;天</span>
-                <el-button @click="init">开始</el-button>
+                <span style="position: relative;">订单日期<el-select style="width: 120px;letter-spacing:0;" v-model="selectedDate1" @change="date1Changed"><el-option v-for="(item,index) in orderDateList" :key="index" :label="item" :value="item"></el-option></el-select>到<el-select style="width: 120px;letter-spacing:0;" v-model="selectedDate2"><el-option v-for="(item,index) in orderDateList2" :key="index" :label="item" :value="item"></el-option></el-select></span>
+                <span style="position: relative;margin-left:10px;">预测周期<input v-model="days" type="text" style="text-align: center;width: 80px;">&nbsp;天</span>
+                <el-button @click="start">开始</el-button>
             </div>
             <div class="bpb_orderlist">
                 <div ref="bpb_orderlist_title" class="bpb_order_num fontcolor">
@@ -13,8 +13,8 @@
                 </div>
                 <div class="itemlist" ref="orderItemList">
                     <div class="bpb_order_item" style="top:210px;transition: none;z-index: 0;"></div>
-                    <div class="bpb_order_item" v-for="item in orderlist" :style="{top:item.top,zIndex:item.zindex,transition:item.transition}" @click="selectedOrder(item)">
-                        <div class="no">编号：{{ item.id }}</div>
+                    <div class="bpb_order_item" v-for="(item,index) in orderlistTop5" :style="{top:item.top,zIndex:item.zindex,transition:item.transition}" @click="selectedOrder(item)">
+                        <div class="no">编号：{{ item.orderCode }}</div>
                         <div class="checkbox abs"><input :checked="item.checked" type="checkbox" name=""></div>
                     </div>
                     
@@ -50,7 +50,7 @@
                     <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}">
                             <table cellspacing="0" cellpadding="0"><tbody>
-                                <tr><td rowspan="2">{{ item.name }}</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}} T</td></tr><tr><td :style="{opacity:item.opacity,transition: 'opacity 0.5s'}">库存：{{item.storage==null?'？':item.storage+' 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>
@@ -101,7 +101,7 @@
                 </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-if="!item.isalarm">需求过剩：{{item.neednum}} T<br>编号：{{ item.id }}</div>
                         <div class="no" v-else>产能不足：{{item.neednum}}T<br>编号：{{ item.id }}</div>
                     </div>
                 </div>
@@ -131,7 +131,7 @@
 <script>
 import { ref,onMounted,watch } from 'vue';
 import api from "@/api/system";
-import { ElDatePicker } from 'element-plus';
+import { ElDatePicker,ElMessage } from 'element-plus';
 import 'element-plus/dist/index.css'; // 确保导入样式文件
 import { template } from 'lodash';
 export default {
@@ -139,12 +139,17 @@ export default {
 
     },
     setup(props,{emit}) {
+        const orderDateList = ref([]);
+        const orderDateList2 = ref([]);
         const orderQueryState = ref(0);
         const storageQueryState = ref(0);
         const plcPredictState = ref(0);
-        let selectedDate = ref(new Date().Format("yyyy-MM-dd"));
+        const selectedDate1 = ref("");
+        const selectedDate2 = ref("");
+        const days = ref(10);
         let selectPredictOrders = ref([]);
         let orderlist=ref([]);
+        let orderlistTop5 = ref([]);
         let bpb_mt_item_data = ref([]);
         const bpb_orderlist_title = ref(null);
         const bpb_order_resultlist_title =ref(null);
@@ -170,26 +175,38 @@ export default {
         }
         function getOerderList(){
             orderQueryState.value=1;//开始查询订单
-            setTimeout(() => {
-                var lst = [{id:'12345670'},{id:'12345671'},{id:'12345672'},{id:'12345673'},{id:'12345674'}];
-                orderlist.value = lst.reverse();                
+            var v = {
+                "start":selectedDate1.value,
+                "end":selectedDate2.value,
+                "days":days.value,
+            };
+            api.GetOrderList(v).then((res) => {
+                console.log(res);
+                if(res==null){
+                    return;
+                }
+                orderlist.value = res;                
                 let tmpLst = [];
                 let top=0;
+                orderlistTop5.value = res.slice(0, 5);
                 orderQueryState.value=2;//订单查询完成
                 setTimeout(function(){
-                    orderlist.value.forEach((item,ind)=>{
+                    orderlistTop5.value.forEach((item,ind)=>{
                         top=210-(ind*30)+'px';
                         let zindex = 1+ind;
-                        tmpLst.push({"id":item.id,"top":top,"zindex":zindex,"checked":false,transition:'top '+(ind*0.3)+'s ease-in-out'});
+                        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'});
                     })                
-                    orderlist.value = tmpLst;                    
+                    orderlistTop5.value = tmpLst;                    
                     layout();
                 },1000);
-
-            }, 2000);
+            });
         }
         function init(){            
             testData();   
+
+            getOrderDateList();
+        }
+        function start(){
             orderQueryState.value = 0;
             storageQueryState.value = 0;
             plcPredictState.value = 0;
@@ -199,6 +216,15 @@ export default {
             order_result_data.value = [];
             bpb_orderlist_title.value.style.top="0%";
             bpb_order_resultlist_title.value.style.top='0%';
+            if(selectedDate1.value==""){
+                ElMessage({
+                    message:'请选择订单日期！',
+                    type:'error',
+                    customClass: 'custom-message'
+                });
+                return;
+            }
+            if(selectedDate2.value=="") selectedDate2.value = selectedDate1.value;
             getOerderList();
         }
         //重置订单列表布局
@@ -216,7 +242,7 @@ export default {
                 order_app_line.value.style.top = parseInt(pbp_order_app.value.style.top) + order_app_linkpoint.value.offsetTop - (parseInt(sty2.height) - 30)+'px';
                 let eleXY = lastOrderItemEle.getBoundingClientRect();
                 order_wl_line.value.style.left = eleXY.left + parseInt(sty1.width) + 'px';
-                order_wl_line.value.style.top = eleXY.top - (parseInt(sty1.height)/4)+'px'
+                //order_wl_line.value.style.top = eleXY.top+'px'
 
                 pbp_storage.value.style.top = bpb_mt_list.value.offsetTop + parseInt( window.getComputedStyle(bpb_mt_list.value).height)-60 + 'px';
                 pbp_storage.value.style.left = bpb_mt_list.value.offsetLeft - 120 + 'px';
@@ -236,8 +262,35 @@ export default {
                 plc_wl_line.value.style.height = (0.7*173)+"px"; 
             }, 1000);
         }
+        function getOrderDateList(){
+            api.GetOrderDateList().then(res=>{
+                orderDateList.value = res;
+                if(res!=null && res.length>1) selectedDate1.value = res[res.length-1];
+                selectedDate2.value = selectedDate1.value;
+                start();
+            });
+        }
+        function date1Changed(v){
+            console.log(v)
+            var ind = false;
+            var datelist2 = [];
+            selectedDate2.value = "";
+            for (let index = 0; index < orderDateList.value.length; index++) {
+                const element = orderDateList.value[index];
+                if(ind){
+                    datelist2.push(element);
+                    continue;
+                }
+                if(v==element){
+                    ind = true;
+                    datelist2.push(element);
+                }                
+            }
+            orderDateList2.value = datelist2;
+        }
+        var boms = {};
         function selectedOrder(obj){
-            let tempLst = orderlist.value;
+            let tempLst = orderlistTop5.value;
             bpb_order_resultlist_title.value.style.top='0%';
             storageQueryState.value = 0;
             plcPredictState.value = 0;
@@ -245,39 +298,44 @@ export default {
             order_result_data.value = [];
             for(let i=0;i<tempLst.length;i++){
                 if(tempLst[i].id==obj.id){
-                    tempLst[i].checked = !tempLst[i].checked;
-                    
+                    tempLst[i].checked = !tempLst[i].checked;                    
                     break;
                 }
             }
-            let tmpLst2=[];
+            let tmpLst2=[];            
             tempLst.forEach(ele=>{
-                if(ele.checked) tmpLst2.push(ele);
+                if(ele.checked){
+                    tmpLst2.push(ele);
+                    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;
+                    }
+                }
             })
             selectPredictOrders.value=tmpLst2;
             if(tmpLst2.length==0) storageQueryState.value=0;
             else{
                  setTimeout(() => {
                     //物料清单信息
-                    var temp1 = [
-                        {id:1,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:false},
-                        {id:2,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:false},
-                        {id:3,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:true},
-                        {id:4,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:true}
-                    ];
+                    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,"top":top,"zindex":zindex,"left":left,"isalarm":item.isalarm,need:item.need,storage:item.storage,plc:item.plc};
+                        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();
                  }, 1000);                 
             }
-            orderlist.value = tempLst;
+            orderlistTop5.value = tempLst;
         }
         //库存检查
         function queryStorage(){
@@ -296,10 +354,11 @@ export default {
                 setTimeout(() => {
                     let tempLst = bpb_mt_item_data.value;
                     tempLst.forEach(ele=>{
-                        ele['storage'] = 30;
+                        var bomItem = boms[ele.id];
+                        ele['storage'] = bomItem.kcl;
                         ele['isalarm'] = false;
                         ele['opacity'] = 1;
-                        ele['plc'] = 25;
+                        ele['plc'] = bomItem.last;
                     })
                     bpb_mt_item_data.value = tempLst;                
                     predict();                    
@@ -311,10 +370,21 @@ export default {
             setTimeout(() => {
                 plcPredictState.value = 1;
                  //预测结果列表
-                 var temp2=[
-                        {id:'12345670',isalarm:true,neednum:5},{id:'212345671',isalarm:false,neednum:5},{id:'012345672',isalarm:true,neednum:5},{id:'12345673',isalarm:false,neednum:5},{id:'12345674',isalarm:false,neednum:5},
-                    ];
-                    order_result_data.value = temp2;
+                 var temp2=[];
+                for (let index = 0; index < selectPredictOrders.value.length; index++) {
+                    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];
+                        if(boms[element2.bomCode]!=null){
+                            neednum = boms[element2.bomCode].cz;
+                            if(neednum>0) isalarm = true;
+                        }
+                    }
+                    temp2.push({id:element.id,isalarm:isalarm,neednum:neednum})
+                }
+                order_result_data.value = temp2;
                 setTimeout(() => {                   
                     //排列预测结果元素
                     let tmpLst = [];
@@ -339,12 +409,18 @@ export default {
         });
         return{
             init,
+            start,
+            days,
+            orderDateList,
+            orderDateList2,
             selectPredictOrders,
             orderQueryState,
             storageQueryState,
             plcPredictState,
-            selectedDate,
+            selectedDate1,
+            selectedDate2,
             orderlist,
+            orderlistTop5,
             bpb_mt_item_data,
             order_result_data,
             selectedOrder,
@@ -365,6 +441,8 @@ export default {
             plc_wl_line,
             order_result_line,
             bpb_order_resultlist,
+            getOrderDateList,
+            date1Changed,
         }
     }
 }

src/pages/components/In02.vue

@@ -1796,7 +1796,7 @@ export default {
             OpenIframe({class:'newwin bpbWin',src:item.path,title:item.title||item.name,type:item.type});
         }
         function OpenBPBWin(){
-            OpenIframe({class:'newwin bpbWin',src:'/bpb-fx',title:''});
+            OpenIframe({class:'newwin bpbWin',src:'/bpb-fx',title:'白柸布智能靶向预测'});
         }
         function OpenIframe(data){
             iframeWinData.value = data;

src/styles/bpb.css

@@ -99,10 +99,10 @@ input[type='text']{
     height: 724px;
 }
 .bpb_title{
-    background-image: url('../assets/image/bpb/title.png');
+    /*background-image: url('../assets/image/bpb/title.png');*/
     background-repeat: no-repeat;
     background-size: contain;
-    height: calc(0.7*99px);
+    /*height: calc(0.7*99px);*/
 }
 .bpb_content{
     position: relative;
@@ -251,12 +251,12 @@ input[type='text']{
     background-image: url('../assets/image/bpb/wl1.png') !important;
 }
 .bpb_mt_list table{
-    width: 187%;
-    transform: rotateZ(0deg) rotateX(13deg) rotateY(-291deg) skew(-67deg) !important;
-    letter-spacing: 5px;
+    width: 200%;
+    transform: rotateZ(0deg) rotateX(13deg) rotateY(-291deg) skew(-30deg) !important;
+    letter-spacing: 1px;
     position: absolute;
-    top: 28%;
-    left: -83px;
+    top: 18%;
+    left: -94px;
 }
 .bpb_mt_list tr{
     background: none !important;
@@ -264,7 +264,7 @@ input[type='text']{
 }
 .bpb_mt_list td{
     border-bottom: 0px !important;
-    font-size: 18px;
+    font-size: 20px;
 }
 .bpb_mt_list .bpb_mt_item.alarm table tr:last-child>td:last-child{
     color: rgba(255, 99, 65, 1) !important;