WEBUI/WMS.BZWeb/Areas/FJManager/Views/DeviceEffectives/Index.cshtml

@using WMS.BZWeb;
@{
    ViewBag.Title = "效率统计";
    Layout = "~/Views/Shared/_Index.cshtml";
}

<style>
    html, body, #app {
        overflow: auto;
    }

    /*   .main {*/
    .lr-layout-center {
        position: relative;
        min-width: 1024px;
        max-width: 1920px;
        padding: 0.5% 0.5%;
        box-box-sizing: border-box;
    }

    .center .item {
        padding-top: 12px;
        display: flex;
        flex-direction: column;
    }

        .center .item .title {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 17px;
        }

            .center .item .title span {
                font-size: 16px;
                color: #2d2f33;
                font-weight: bold;
                margin-left: 14px;
            }

        .center .item .wrap {
            padding: 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e6e6e6;
        }

            .center .item .wrap .wrapItem {
                height: 158px;
                margin-top: -10px;
            }

            .center .item .wrap .choseBox {
                margin-left: 45px;
                margin-bottom: 33px;
            }

                .center .item .wrap .choseBox span {
                    color: #878d99;
                    font-size: 14px;
                    margin-right: 26px;
                }

                    .center .item .wrap .choseBox span.active {
                        color: #0479f7;
                    }

    .content-box {
        position: relative;
        margin-top: 1.5vh;
        box-sizing: border-box;
        padding: 1.5vh 1vw;
    }

    .content-box-title-wrap {
        padding-bottom: 2vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    /* 表格 */
    .normal-table-num {
        color: #00b9eb;
        font-weight: 600;
    }

    .table-rate-wrap {
        display: flex;
        align-items: center;
    }

    .table-pan-icon {
        border-radius: 50%;
        background-size: 100% 100%;
        overflow: hidden;
        background-color: #134982;
        transform: rotate(-90deg);
        flex-shrink: 0;
    }

    .table-rate-num {
        padding-left: 0.5vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="lr-layout">
    <div class="lr-layout-center">
        <ul class="left nav nav-tabs lr-nav-tabs" role="tablist" id="lr_left_list">
            <li role="presentation" class="active" data-value="1"><a href="#tree_base" aria-controls="home" role="tab" data-toggle="tab">全部</a></li>
            <li role="presentation" data-value="2"><a href="#tree_ajax" aria-controls="profile" role="tab" data-toggle="tab">堆垛机</a></li>

        </ul>

        <div style="height:100%;">
            <div class="outer-container">
                <div class="tab-content lr-tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tree_base">
                        <div style="height:100%;">
                            <div class="center">

                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>任务完成率</span>
                                    </div>
                                    <div class="wrap">
                                        <div class="choseBox">  </div>
                                        <div class="col-xs-4 wrapItem " style="height:196px;  display: flex;flex-direction: row; margin-top:-35px;">
                                            <div class="col-xs-6   " style=" display: flex;flex-direction: row;  ">
                                                <div class="InfoBlock" style="display:flex;flex-direction: column; vertical-align:middle; ">
                                                    <span>上一班完成率</span>
                                                    <div id="mainLastTaskCompletionRate" style="width:328px;height:296px; margin-left:-80px;margin-top:-20px;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-6   " style=" display: flex;flex-direction: row;  ">
                                                <div class="col-xs-6  ">
                                                    <div class="InfoBlock" style="display:flex;flex-direction: column; vertical-align:middle;margin-left:20px;margin-top:50px;">
                                                        <span style=" color:#878d99">总任务数</span>
                                                        <label style="margin-top:5px;font-size:20px">1568</label>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6  ">
                                                    <div class="InfoBlock" style=" display: flex;flex-direction: column;margin-left:20px;margin-top:50px;">
                                                        <span style=" color:#878d99">完成任务数</span>
                                                        <label style="margin-top:5px;font-size:20px">1235</label>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="col-xs-8 wrapItem " style="margin-top:-75px;">
                                            <div id="mainTaskCompletionRateSpan" class="choseBox" style="margin-bottom:5px;">
                                                <span class="active" queryValue="7">近7天完成率</span>
                                                <span queryValue="15">近15天完成率</span>
                                                <span queryValue="30">近30天完成率</span>
                                            </div>
                                            <div id="mainTaskCompletionRate" style="height:220px;margin-top:-5px;">
                                            </div>
                                        </div>
                                        @*  <el-row :gutter="20">
                                        <el-col :span="7" class="wrapItem" style="background:red;">1</el-col>
                                        <el-col :span="17" class="wrapItem" style="background:yellow;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>任务量统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="mainTaskNumsSpan" class="choseBox">
                                            <span class="active">昨天任务统计</span>
                                            <span>本周任务统计</span>
                                            <span>本月任务统计</span>
                                        </div>
                                        <div id="mainTaskNums" class="col-xs-12 wrapItem " style="height:310px;margin-left:-65px;">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>堆垛机数据统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="mainddjSpan" class="choseBox">
                                            <span class="active">昨天任务统计</span>
                                            <span>本周任务统计</span>
                                            <span>本月任务统计</span>
                                        </div>
                                        <div id="mainddj" class="col-xs-12 wrapItem " style="height:310px;margin-left:-65px;">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>故障统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="mainFaultsSpan" class="choseBox">
                                            <span class="active">昨天故障统计</span>
                                            <span>本周故障统计</span>
                                            <span>本月故障统计</span>
                                        </div>
                                        <div id="mainFaults" class="col-xs-6 wrapItem " style="height:310px;width:646px; margin-left:-45px;">
                                        </div>
                                        <div id="card-8" class="col-xs-6 wrapItem content-box">
                                        </div>
                                        @*     <el-row :gutter="20">
                                        <el-col :span="14" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        <el-col :span="10" class="wrapItem" style="height:310px;background:yellow;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>作业时间数据统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="mainJobTimesSpan" class="choseBox">
                                            <span class="active">昨天数据统计</span>
                                            <span>本周数据统计</span>
                                            <span>本月数据统计</span>
                                        </div>
                                        <div id="mainJobTimes" class="col-xs-12 wrapItem " style="height:410px; margin-left:-45px;">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="tree_ajax">
                        <div class="col-xs-2 wrapItem " style="float:right;margin-top:-30px;">
                            <select id="Code" class="lr-select "></select>
                        </div>
                        <div style="height:100%;">
                            <div class="center">

                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>平均任务执行耗时</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="deviceTaskTimesSpan" class="choseBox" style="margin-top:-8px;">
                                            <span class="active">昨天任务统计</span>
                                            <span>本月任务统计</span>
                                        </div>
                                        <div id="deviceTaskTimes" class="col-xs-12 wrapItem " style="height:310px;width:1300px;margin-left:-45px;margin-top:-35px;">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>设备运行耗时统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="deviceRunTimesSpan" class="choseBox">
                                            <span class="active">昨天数据统计</span>
                                            <span>本月数据统计</span>
                                        </div>
                                        <div id="deviceRunTimes" class="col-xs-12 wrapItem " style="height:310px;width:1400px;margin-left:-85px; ">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>



                                <div class="item">
                                    <div class="title">
                                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                                        <span>作业时间数据统计</span>
                                    </div>
                                    <div class="wrap">
                                        <div id="deviceJobTimesSpan" class="choseBox">
                                            <span class="active">昨天数据统计</span>
                                            <span>本周数据统计</span>
                                            <span>本月数据统计</span>
                                        </div>
                                        <div id="deviceJobTimes" class="col-xs-12 wrapItem " style="height:410px;width:1400px;margin-left:-85px;">
                                        </div>
                                        @* <el-row :gutter="20">
                                        <el-col :span="24" class="wrapItem" style="height:310px;background:red;">1</el-col>
                                        </el-row>*@
                                    </div>
                                </div>


                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/Content/echarts/echarts.min.js"></script>
@Html.AppendJsFile("/Areas/FJManager/Views/DeviceEffectives/Index.js")