jingzhuanzhi
/
JZZBigScreen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产大屏可视化系统</title>
    <link rel="stylesheet" href="./css/index1.css">
    <link rel="stylesheet" href="./css/animate.css" />
    <link rel="stylesheet" href="./css/element-ui@2.15.9.css" />
    <script src="./libs/vue.js"></script>
    <script src="./libs/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./libs/element-ui@2.15.9.js"></script>
    <script src="./libs/datav.min.vue.js"></script>
    <script src="./libs/echatrs.js"></script>
    <script src="./libs/echarts-tooltip-carousel.js"></script>
    <script src="./libs/day.js"></script>
    <script src="./libs/tailwindcss.js"></script>
    
</head>

<body>
    <div id="app">
        <div class="main">
            <div class="top-border">
                <img src="./image/index1/top_text.png" class="top-text">
                <div class="flex justify-between absolute items-center" style="width: 30%; top: 25px;left: 35%;">
                    <div class="top-content">生产计划完成率：{{planCompletionRate}}%</div>
                    <div class="top-content">生产良品率：{{productionGoodProductRate}}%</div>
                </div>
                <div class="top-time absolute" style="right: 20px;top: 35px;">
                    {{time}}
                </div>
            </div>
            <div class="flex justitfy-between p-5">
                <div>
                    <div class="box-border p-5">
                        <div class="small-top">
                            <div class="pl-12 small-title">领料库存情况</div>
                        </div>
                        <div class="flex justify-between mt-5" style="flex-wrap: wrap;height: 85%;overflow: auto;">
                            <div v-for="(item,index) in comprehensive" :key="index" class="flex w-[427px] h-[170px] mb-3" style="background-color: #126EFE20;">
                                <div class="p-3 w-full">
                                    <div class="flex justify-between w-full items-center mb-2">
                                        <div class="text-[#fff] text-[16px]">{{item.materialName}} ( {{item.specification}} )</div>
                                        <div class="data-type">{{item.status}}</div>
                                    </div>
                                        <table>
                                            <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
                                              <th>物料</th>
                                              <th>所需物料数量</th>
                                              <th>可用库存数量</th>
                                            </tr>
                                            <tr v-for="(itm,idx) in item.details" :key="idx" class="text-[#D0E9FF] text-[14px]">
                                              <td>{{itm.materialName}}</td>
                                              <td>{{itm.needQty}}</td>
                                              <td>{{itm.stockQty}}</td>
                                            </tr>
                                        </table>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="box-border p-5" style="height: 50%;">
                        <div class="small-top relative">
                            <div class="pl-12 small-title">报工情况</div>
                            <div style="position: absolute;right: 10px;top: 10px;">当日填报</div>
                        </div>
                        <div style="height: 390px;">
                            <table>
                                <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
                                  <th>姓名</th>
                                  <th>工单编号</th>
                                  <th>生产产品</th>
                                  <th>当天生产数量</th>
                                  <th>当天生产时长</th>
                                  <th>填报时间</th>
                                </tr>
                                <tr v-for="(itm,idx) in shortageConfig" :key="idx" class="text-[#D0E9FF] text-[14px]">
                                  <td>{{itm.name}}</td>
                                  <td>{{itm.code}}</td>
                                  <td>{{itm.product}}</td>
                                  <td>{{itm.number}}</td>
                                  <td>{{itm.date}}</td>
                                  <td>{{itm.datetime}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>


                <div>
                    <div class="box-right p-5">
                        <div class="small-top relative">
                            <div class="pl-12 small-title">生产排产情况</div>
                            <div style="position: absolute;right: 10px;top: 10px;">计划生产单据：{{dataCount}}个</div>
                        </div>

                        <div style="overflow: auto;height: 96%;">
                            <div v-for="(item,index) in dataList" class="p-5 mb-3" style="background-color: #126EFE20;">
                                <div>
                                    <div class="flex justify-between w-full items-center mb-2">
                                        <div class="text-[#fff] text-[16px]">{{item.productionPlanOrderNo}}</div>
                                        <div>计划生产日期：{{item.planDate}}</div>
                                    </div>

                                    <table>
                                        <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
                                          <th>产品名称</th>
                                          <th>计划生产数量</th>
                                          <th>已排产数量</th>
                                          <th>已生产数量</th>
                                          <th>已排质检数量</th>
                                          <th>已入库数量</th>
                                        </tr>
                                        <tr v-for="(itm,idx) in item.details" :key="idx" class="text-[#D0E9FF] text-[14px]">
                                          <td>{{itm.materialName}}</td>
                                          <td>{{itm.planQty}}</td>
                                          <td>{{itm.scheduledQty}}</td>
                                          <td>{{itm.producedQty}}</td>
                                          <td>{{itm.inspectedQty}}</td>
                                          <td>{{itm.inQty}}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    

    <script src="./js/index1.js"></script>
</body>

</html>