yuansh
/
FBS_VIEW


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <title>产线管理看板</title>

    <link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/dashboard.css" rel="stylesheet" />


</head>

<body id="container" class="container-fluid">
    <div class="row no-padding head-bar" style="height:81px">
        <div class="col-lg-1 col-md-1">

        </div>
        <div class="col-lg-4 col-md-4 page-title">
            产线管理看板
        </div>
        <div class="col-lg-3 col-md-3 block-padding">
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/warehouse.html');">仓库看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/produce.html');">制造看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/esop.html');">E-SOP</button>
        </div>
        <div class="col-lg-4 col-md-4">
        </div>
    </div>
    <div class="my-container" id="div-main">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <!--人员信息-->
                <div class="row block-padding">

                    <div class="col-lg-12  col-md-12 center block-title">班组装人员信息</div>
                </div>
                <div class="row">
                    <div class="person-div" v-for="user in userList">
                        <div>
                            <img v-bind:src="user.avatar" border="0" />
                        </div>
                        <div class="center">
                            {{user.className}}
                        </div>
                        <div class="center">
                            {{user.realName}}&nbsp;&nbsp;{{user.inTime}}
                        </div>
                    </div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日标准工时与实际工时对比</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12" style="height:200px" id="charts_11"></div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日良率</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-2" style="height:200px" id="charts_12"></div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 center block-title">当日质量异常分类</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-2" style="height:200px" id="charts_13"></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="row block-padding">
                    <div class="col-lg-4 col-md-4 padding-around" v-for="task in doingTaskList">
                        <div class="task-block" :class="task.bgcss">
                            <div class="row ">
                                <div class="col-lg-12 col-md-12 center task-block-title">{{task.displayName}}</div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4" style="padding-left: 34px;padding-top: 27px;">
                                    <div class="task-block-title-small center">任务数量</div>
                                    <div class="task-block-title-big center">{{task.planSum}}</div>
                                    <div class="task-block-title-small center" style="padding-top:17px;">已完工总数</div>
                                    <div class="task-block-title-big center">{{task.completeSum}}</div>
                                </div>
                                <div class="col-lg-8 col-md-8" style="padding-left: 4px;padding-top: 20px;">
                                    <div class="task-block-text">完工日期：{{task.planCompleteDate}}</div>
                                    <div class="task-block-text">存货：{{task.materialName}}</div>
                                    <div class="task-block-text">规格：{{task.specs}}</div>
                                    <div class="task-block-text">
                                        <div style="float:left">完成进度：</div>
                                        <div style="float:left;width:120px;padding-top:2px;">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-info" role="progressbar"
                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                    :style="{width:task.completePercent}">
                                                    {{task.completePercent}}
                                                </div>
                                                <div class="progress-bar progress-bar-warning" role="progressbar"
                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                    :style="{width:task.incompletePercent}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <!--月生产计划-->
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">生产计划</div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-1 col-md-1 center no-padding">工单号</div>
                    <div class="col-lg-2 col-md-2 center no-padding">料号</div>
                    <div class="col-lg-2 col-md-2 center no-padding">型号规格</div>
                    <div class="col-lg-2 col-md-2 center no-padding">名称</div>
                    <div class="col-lg-2 col-md-2 center no-padding">计划数量</div>
                    <div class="col-lg-1 col-md-1 center no-padding">工时</div>
                    <div class="col-lg-2 col-md-2 center no-padding">完成进度(已/未)</div>
                </div>
                <div class="row" v-for="product in dayProduceTaskList">
                    <div class="col-lg-1 col-md-1 center no-padding">{{product.orderSheetCode}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding">{{product.materialCode}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding">{{product.materialName}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding">{{product.planSum}}</div>
                    <div class="col-lg-1 col-md-1 center no-padding">{{product.workHour}}</div>
                    <div class="col-lg-2 col-md-2 center no-padding progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100" :style="{width:product.completePercent}">
                            {{product.completeSum}}
                        </div>
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100" :style="{width:product.incompletePercent}">
                            {{product.incompleteSum}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日生产效率</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12" style="height:190px" id="charts_21"></div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日工时分布</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12" style="height:190px" id="charts_22"></div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日计划达成率</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12" style="height:190px" id="charts_23"></div>
                </div>
                <div class="row block-padding">
                    <div class="col-lg-12 col-md-12 center block-title">当日人员出勤情况</div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12" style="height:190px" id="charts_24"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery  -->
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/echarts/echarts.min.js"></script>
    <script src="/lib/echarts/theme/macarons.js"></script>
    <script src="/js/service/person.js"></script>
    <script src="/js/service/material.js"></script>
    <script src="/js/service/product.js"></script>
    <script src="/js/service/workhour.js"></script>
    <script src="/js/service/produce-task.js"></script>
    <script src="/js/content/mycharts.js"></script>
    <script type="text/javascript">
        const userList = ServicePerson.getWorkPersonList();
        // 生产计划
        const dayProduceTaskList = ServiceProduceTask.getDayList();
        // 在生产图片
        const doingTaskList = ServiceProduceTask.getDoingListByOrder();

        var vm = new Vue({
            el: '#div-main',
            data: {
                userList: userList,
                dayProduceTaskList: dayProduceTaskList,
                doingTaskList: doingTaskList
            }
        });
        ChartsService.initBarAndLine("charts_11", ServiceWorkhour.getDayStandAndRealByMaterial());
        ChartsService.initBarWithTwoNumberRate("charts_12", ServiceProduct.getDayGood());
        ChartsService.initBarWithShade("charts_13", ServiceProduct.getDayExceptionByCategory());

        ChartsService.initCommonPanel("charts_21", ServiceProduct.getDayProduceRate());
        ChartsService.initCommonPie("charts_22", ServiceWorkhour.getDayByMaterial());
        ChartsService.initCommonPie("charts_23", ServiceProduceTask.getDayCompleteInfo());
        ChartsService.initCommonPie("charts_24", ServicePerson.getDayAttendance());
    </script>

</body>

</html>