@using WMS.BZWeb;
@{
    ViewBag.Title = "效率统计";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@Html.AppendCssFile("/Areas/FJManager/Views/DeviceEffectives/QIndex.css")
<style>

    .bar-chart {
        display: flex;
        flex-direction: row;
        height: 100px;
    }

    .bar {
        height: 10px;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        transition: width 0.5s ease;
        padding-top: 2px;
    }

    .gridflex-container {
        display: flex;
        margin-top: -20px;
        flex-wrap: wrap;
    }

    .gridflex-item {
        width: 50%; /* 两列布局，每列宽度为50% */
        height: 16px;
        box-sizing: border-box;
    }

    /* 为了美观，可以添加一些边框和背景 */
    .gridflex-item {
        /*border: 1px solid #ccc;
          background-color: #f0f0f0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    }

</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>

            <li role="presentation" data-value="3"><a href="#tree_rgv" aria-controls="home" role="tab" data-toggle="tab">RGV</a></li>
            <li role="presentation" data-value="4"><a href="#tree_hj" 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 class="col-xs-4 wrapItem " style="float:right;margin-top:-30px;">
                            <input id="beginTime" placeholder="请输入开始时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <input id="endTime" placeholder="请输入结束时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <a id="btn_Search" class="btn-primary btn-sm"><i class="fa fa-search"></i>&nbsp;<span class="lrlg">查询</span></a>
                            @*  <a id="lr_search" class="btn btn-default"><i class="fa fa-sign-out"></i>&nbsp;确定</a> *@
                        </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 class="lr-layout-body" id="gridtable"></div>
                                    </div>
                                </div>


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

                    <div role="tabpanel" class="tab-pane" id="tree_ajax">


                        <div class="col-xs-4 wrapItem " style="float:right;margin-top:-30px;">
                            <input id="robotbeginTime" placeholder="请输入开始时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <input id="robotendTime" placeholder="请输入结束时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <a id="btn_robotSearch" class="btn-primary btn-sm"><i class="fa fa-search"></i>&nbsp;<span class="lrlg">查询</span></a>
                            @*  <a id="lr_search" class="btn btn-default"><i class="fa fa-sign-out"></i>&nbsp;确定</a> *@
                        </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 class="lr-layout-body" id="gridtable2"></div>
                                    </div>
                                </div>


                            </div>
                        </div>





                    </div>

                    <div role="tabpanel" class="tab-pane" id="tree_rgv">


                        <div class="col-xs-4 wrapItem " style="float:right;margin-top:-30px;">
                            <input id="rgvbeginTime" placeholder="请输入开始时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <input id="rgvendTime" placeholder="请输入结束时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <a id="btn_rgvSearch" class="btn-primary btn-sm"><i class="fa fa-search"></i>&nbsp;<span class="lrlg">查询</span></a>
                            @*  <a id="lr_search" class="btn btn-default"><i class="fa fa-sign-out"></i>&nbsp;确定</a> *@
                        </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 class="lr-layout-body" id="rgvgridtable"></div>
                                    </div>
                                </div>


                            </div>
                        </div>





                    </div>

                    <div role="tabpanel" class="tab-pane" id="tree_hj">


                        <div class="col-xs-4 wrapItem " style="float:right;margin-top:-30px;">
                            <input id="hjbeginTime" placeholder="请输入开始时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <input id="hjendTime" placeholder="请输入结束时间" readonly style="width:180px;border: 1px solid #ccc;    height: 28px;" class="datetime" type="text" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                            <a id="btn_hjSearch" class="btn-primary btn-sm"><i class="fa fa-search"></i>&nbsp;<span class="lrlg">查询</span></a>
                            @*  <a id="lr_search" class="btn btn-default"><i class="fa fa-sign-out"></i>&nbsp;确定</a> *@
                        </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 class="lr-layout-body" id="hjgridtable"></div>
                                    </div>
                                </div>


                            </div>
                        </div>





                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/Content/echarts55/echarts.min.js"></script>
@* <script src="~/Content/echarts55/theme/shine.js"></script> *@
<script>
    var beginTime = '@ViewBag.BeginTime';
    var endTime = '@ViewBag.EndTime';
    var WebApiUrl = '@ViewBag.WebApiUrl';
</script>
@Html.AppendJsFile("/Areas/FJManager/Views/DeviceEffectives/IndexList.js")