master

分支 (1)

管理

管理

master

linyang
/
index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css/base.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/index1.css"/>
</head>
<body>
<div class="wrapper" style="color: white">
    <div class="headers">
        <!--<div class="wrap">-->
        <div class="header-logo">
            <img src="img/LOGO.png"/>
        </div>

        <div class="header-title">
            <div>
                <div class="title-chinese">产 线 管 理 看 板</div>
                <div class="title-english">Production line Management-PV</div>
            </div>
        </div>

        <div class="header-date">
            <dl>
                <dd class="date" id="time"></dd>
            </dl>
        </div>
        <!--</div>-->
    </div>
    <div>
        <div style="width: 23.291vw;height: 39.907vh;margin: auto;padding: auto">
            <div class="container_title">时间/time</div>
            <div style="margin:7.666vw 2.3vw;font-size: 1.81vw">
                <span>安全运行天数</span>
                <span style="color: #71d7d7">{{dateDiff}}天</span>
            </div>
        </div>
    </div>
    <div>
        <div style="width: 50.61vw;height: 39.907vh;margin: auto;padding: auto;padding-left: 1vw;">
            <div class="container_title">产线状态/Production line state</div>
            <div>
                <table class="board" style="border-spacing:1px;border-collapse: separate;">
                    <thead>
                    <tr style="border: 1px solid #08feff;">
                        <th>时间段</th>
                        <th>目标产量</th>
                        <th>实际产量</th>
                        <th>碎片率</th>
                        <th>返工率</th>
                        <th>良率</th>
                        <th>达成率</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody v-for="item in states">
                    <tr>
                        <td>{{item.period}}</td>
                        <td>{{item.goal}}</td>
                        <td>{{item.real}}</td>
                        <td>{{item.fragment}}</td>
                        <td>{{item.rework}}</td>
                        <td>{{item.yield}}</td>
                        <td style="color: #fe1516;background-color: #599ad7;background-size:50% 50%">{{item.reach}}</td>
                        <td v-if="item.reach<100" class="item_state"
                            style="background-image: url(img/production/状态红.png);"></td>
                        <td v-if="item.reach>=100" class="item_state"
                            style="background-image: url(img/production/状态绿.png)">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div>
        <div style="width: 23.584vw;height: 39.907vh;margin: auto;padding: auto">
            <div class="container_title">设备稼动率/Equipment Crop Rate</div>
            <div id="oee" style="height: 80%;width: 100%;padding-top:10%;"></div>
        </div>
    </div>
    <div>
        <div style="width: 74.416vw;height: 33.056vh;margin: auto;padding: auto">
            <div class="container_title" style="padding-top:1%">责任人/Responsible persons</div>
            <div class="person">
                <div style="border: 1px solid #08feff;width: 13.183vw;height: 18.981vh" v-for="item in persons">
                    <P>工号 Number：{{item.number}}</P>
                    <P>姓名 Name：{{item.name}}</P>
                    <P>职位 Position：{{item.position}}</P>
                </div>
            </div>
        </div>
        <!--<div></div>-->
    </div>
    <div>
        <div style="width: 23.584vw;height: 33.056vh;margin: auto;padding: auto">
            <div class="container_title" style="padding-top:2%">预警信息/Early warning information</div>
            <div>
                <table style="color: #ce4041;text-align: center;width: 100%">
                    <thead>
                    <tr>
                        <th>时间段</th>
                        <th>工序</th>
                        <th>预警信息</th>
                    </tr>
                    </thead>
                    <tbody v-for="item in warningInfo">
                    <tr>
                        <td>{{item.period}}</td>
                        <td>{{item.step}}</td>
                        <td>{{item.info}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="js/node_modules/jquery/dist/jquery.js"></script>
<script src="js/node_modules/vue/dist/vue.js"></script>
<script src="js/node_modules/echarts/dist/echarts.js"></script>
<script src="js/base.js"></script>
<script src="js/app1.js"></script>
</body>
</html>