wj
/
ProductionLineMonitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <meta name="google" content="notranslate" />
    <meta http-equiv="Content-Language" content="zh-cn" />

    <title>差异详情</title>

    <link rel="stylesheet" href="/lib/adminlte/bower/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/lib/adminlte/bower/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/adminlte/dist/css/AdminLTE.min.css">
    <script src="~/axios/axios.min.js"></script>
    <script src="~/lib/vue/vue.min.js"></script>

    <style>
        body {
            background-color: #001529;
            color: #FCC439;
            font-size: 16px;
        }

        h2 > small {
            color: #FCC439;
        }

        .table {
            border: solid 1px #0b9afa;
            border-radius: 3px;
            border-collapse: separate;
            border-spacing: 0;
            padding: 1px;
            font-size: 1.1em;
        }

        .table-hover > tbody > tr:hover {
            background-color: #212e3a;
        }

        .table > thead > tr > th {
            background: #0b9afa;
            color: #fff;
            border: 1px solid #0b9afa;
        }

        .table > thead > tr > td {
            background: #0b9afa;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            text-align: center;
            padding: 14px;
            vertical-align: middle;
            text-align: center;
            border-top: 1px solid #212e3a;
        }

        .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
            padding: 14px;
        }

        label {
            line-height: 20px;
            margin-left: 5px;
            margin-right: 15px;
            color: #FCC439;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }

            .radio_type:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 2px solid #777;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 2px solid green;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
                top: 3px;
                left: 3px;
            }

            .radio_type:checked:after {
                content: '';
                width: 14px;
                height: 14px;
                text-align: center;
                border: 2px solid green;
                background: green;
                border-radius: 50%;
                position: absolute;
                top: 3px;
                left: 3px;
            }

            </style>
</head>
<body>

    <div id="app">
        <div class="col-md-12">
            <div class="col-md-1" style="padding-top: 18px;">
                <button type="button" class="btn btn-default form-control" v-on:click="revert()"
                        style="background-color:#0b9afa; color: white; border: 0px">
                    <span class="glyphicon glyphicon-arrow-left">
                    </span>
                    返回
                </button>
            </div>
            <div class="col-md-11">
                <h2>{{ module }}<small>（{{ month - 1 }}/21 ~ {{ month }}/20）</small></h2>
            </div>
        </div>
        <div class="col-md-12">
            <div style="text-align:left; padding-left: 15px;">
                <div class="col-md-2">
                    <div class="form-group">
                        <div>
                            <label>
                                <input class="radio_type" type="radio" name="optionsRadios" value="ALL" v-on:click="onClickOptionsRadios()">
                                全部机种
                            </label>
                        </div>
                        <div v-for="moduleType1 in ms">
                            <label>
                                <input class="radio_type" type="radio" name="optionsRadios" :value=moduleType1 v-on:click="onClickOptionsRadios()">
                                {{ moduleType1 }}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <div>
                            <label>
                                <input class="radio_type" type="radio" name="optionsRadios1" value=0 v-on:click="onClickOptionsRadios()">
                                全部线别
                            </label>
                        </div>
                        <div v-for="line in ls">
                            <label>
                                <input class="radio_type" type="radio" name="optionsRadios1" :value=line v-on:click="onClickOptionsRadios()">
                                {{ line }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div :style="{'color': (difference >= 0 ? '#fff' : '#ff6e76'), 'text-align':'right','padding': '15px', 'font-size': '1.2em' }">
                累计差异：{{ difference }} pcs
            </div>
            <div id="container" style="height: 400px; width: 100%;">
            </div>
            <div id="container1" style="height: 200px; width: 100%;">
            </div>
        </div>

        <div class="col-md-6" style="padding-left: 2%">
            <table id="table1" class="table table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>类型</th>
                        <th>详情</th>
                        <th>频次</th>
                        <th>影响时间(min)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(differenceInfo, index) in differenceInfos">
                        <td>{{ index + 1 }}</td>
                        <td>{{ differenceInfo.typeName }}</td>
                        <td>{{ differenceInfo.description }}</td>
                        <td>{{ differenceInfo.frequency}}</td>
                        <td>{{ differenceInfo.differenceTime }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="~/lib/adminlte/bower/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/echarts/echarts.min.js"></script>
    <script src="~/js/home/differenceV1.js" asp-append-version="true"></script>
</body>
</html>