WEBUI/WMS.BZWeb/Areas/DeviceMonitorManager/Views/FJDeviceMonitor/DDJDetail.cshtml

@using WMS.BZWeb;
@{
    ViewBag.Title = "合金库监控堆垛机详情页";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<style>

    .alertBox {
        overflow: hidden;
    }

        .alertBox .left {
            float: left;
            width: 600px;
            background: #f0f2f5;
            padding-top: 15px;
            padding-bottom: 33px;
            box-sizing: border-box;
        }

            .alertBox .left .wrap {
                display: flex;
                flex-direction: row;
                width: 565px;
                margin: 0 auto;
                justify-content: space-between;
            }

                .alertBox .left .wrap .items {
                    width: 137px;
                    height: 107px;
                    background: #Fff;
                    border-radius: 8px;
                    box-shadow: 1px 1px 10px #a39e9e;
                }

                    .alertBox .left .wrap .items.error {
                        border: 1px solid #d10707;
                    }

                    .alertBox .left .wrap .items.warn {
                        border: 1px solid #ffab09;
                    }

                    .alertBox .left .wrap .items .head {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        padding: 12px 11px 10px 15px;
                    }

                    .alertBox .left .wrap .items .platform {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                    }

                        .alertBox .left .wrap .items .platform label {
                            font-family: DIN-Bold;
                            font-size: 16px;
                        }

                    .alertBox .left .wrap .items .content {
                        padding: 0 15px 0 15px;
                    }

            .alertBox .left .floor {
                margin-top: 15px;
                margin-bottom: 14px;
                position: relative;
            }

                .alertBox .left .floor .cover {
                    display: block;
                    margin: 0 auto;
                }

                .alertBox .left .floor .mark {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 23px;
                    height: 30px;
                    line-height: 24px;
                    text-align: center;
                    font-family: DIN-Bold;
                    background-size: 100% 100%;
                }

                    .alertBox .left .floor .mark.normal {
                        color: #1ab700;
                        background: url("../../../../Content/images/DeviceMonitor/normal2.png") no-repeat;
                    }

                    .alertBox .left .floor .mark.warn {
                        color: #ffab09;
                        background: url("../../../../Content/images/DeviceMonitor/warn2.png") no-repeat;
                    }

                    .alertBox .left .floor .mark.error {
                        color: #d10707;
                        background: url("../../../../Content/images/DeviceMonitor/error2.png") no-repeat;
                    }


        .alertBox .right {
            float: left;
            width: 240px;
            background: #fefefe;
            padding: 10px 0px 0 8px;
        }

            .alertBox .right .title {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }

                .alertBox .right .title span {
                    color: #2d2f33;
                    font-size: 16px;
                    font-weight: bold;
                    margin-left: 10px;
                }

            .alertBox .right .device {
                margin-top: 18px;
            }

                .alertBox .right .device .device_Info {
                    height: 32px;
                    line-height: 32px;
                    overflow: hidden;
                    padding: 0 12px;
                }

                    .alertBox .right .device .device_Info .name {
                        font-size: 14px;
                        color: #525866;
                        min-width: 90px;
                        float: left;
                    }

                    .alertBox .right .device .device_Info .inner {
                        font-size: 14px;
                        color: #525866;
                        font-weight: bold;
                        float: left;
                    }

                    .alertBox .right .device .device_Info.even {
                        background: #f2f3f5;
                    }

    .selected {
        color: red;
    }

    .highlight {
        background: yellow;
    }

    .main {
        position: relative;
        min-width: 1024px;
        max-width: 1920px;
        margin: 0 auto;
        height: 100%;
        padding: 0.5% 0.5%;
        box-box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }

    .head {
        width: 100%;
        height: 60px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
    }

        .head .left {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

            .head .left span {
                display: block;
                width: 70px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #d6d6d6;
                font-size: 16px;
                color: #333333;
                margin-right: 6px;
                border-radius: 5px;
                font-family: DIN-Bold;
                cursor: pointer;
            }

                .head .left span.active {
                    background: #1890ff;
                    color: #fff;
                }

        .head .right {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

            .head .right .tipIcon {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-left: 20px;
            }

                .head .right .tipIcon span {
                    color: #525866;
                    font-size: 14px;
                    margin-left: 5px;
                }

    .center {
        height: calc(100% - 60px);
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

        .center .left {
            position: relative;
            padding-left: 177px;
            padding-top: 20px;
            display: flex;
            box-sizing: border-box;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

            .center .left .LineBox {
                padding-top: 57px;
                position: relative;
            }

            .center .left .LineBoxstu {
                position: absolute;
                left: 8px;
                top: 48px;
            }

            .center .left .itemBox {
                display: flex;
                box-sizing: border-box;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .center .left .item {
                position: relative;
                top: 49px;
                left: 4px;
                line-height: 1;
            }

                .center .left .item .num {
                    color: #09355e;
                    position: absolute;
                    left: 48px;
                    top: 5px;
                    font-size: 8px;
                    font-family: DIN-Bold;
                }

                    .center .left .item .num.nums {
                        left: 45px;
                    }

                .center .left .item .ddj {
                    margin-left: 31px;
                    display: block;
                }

                .center .left .item .round {
                    position: absolute;
                    width: 790px;
                    height: 2px;
                    left: -22px;
                    bottom: 8px;
                }

        .center .right {
            height: 100%;
            width: 302px;
            box-sizing: border-box;
            padding: 26px 0 0 12px;
            border-left: 1px solid #bdcadb;
        }

            .center .right .rItem {
                margin-bottom: 20px;
            }

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

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

                .center .right .rItem .tbale {
                    border: 1px solid #bdcadb;
                    width: 235px;
                    margin-left: 12px;
                }

                    .center .right .rItem .tbale .item {
                        overflow: hidden;
                        height: 42px;
                        border-bottom: 1px solid #bdcadb;
                    }

                        .center .right .rItem .tbale .item span {
                            display: block;
                            float: left;
                            width: 98px;
                            height: 42px;
                            line-height: 42px;
                            background: #f8f9fb;
                            font-size: 14px;
                            color: #525866;
                            text-align: center;
                            border-right: 1px solid #bdcadb;
                        }

                        .center .right .rItem .tbale .item label {
                            display: block;
                            float: left;
                            width: 135px;
                            height: 42px;
                            line-height: 42px;
                            font-size: 14px;
                            color: #525866;
                            text-align: center;
                            font-family: DIN-Bold;
                            border-right: 1px solid #bdcadb;
                        }

                .center .right .rItem .InfoItem {
                    margin-bottom: 15px;
                    margin-left: 12px;
                }

                    .center .right .rItem .InfoItem .titleS {
                        display: block;
                        width: 48px;
                        height: 20px;
                        text-align: center;
                        line-height: 20px;
                        background: #fe2c2c;
                        color: #fff;
                        font-size: 12px;
                        border-radius: 5px;
                        margin-bottom: 4px;
                    }

                    .center .right .rItem .InfoItem .InfoBlock {
                        display: flex;
                        flex-direction: row;
                        margin-bottom: 4px;
                    }

                        .center .right .rItem .InfoItem .InfoBlock span {
                            color: #525866;
                            font-size: 14px;
                            display: block;
                            min-width: 70px;
                        }

                        .center .right .rItem .InfoItem .InfoBlock label {
                            color: #525866;
                            font-size: 14px;
                            font-weight: bold;
                        }

    .Colum {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 38px;
    }

    .onOne {
        position: relative;
        border: 1px dashed #dbdbdb;
        background: #f9f9f9;
        margin-right: 4px;
        border-radius: 5px;
    }

        .onOne span {
            position: absolute;
            color: #09355e;
            font-size: 14px;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
        }

    .big {
        position: absolute;
        left: 4px;
        bottom: -112px;
    }

    .ddjnum {
        font-size: 18px;
        position: absolute;
        color: #fff;
        font-family: DIN-Bold;
        left: 65px;
        z-index: 9999;
        top: 24px;
    }

    .position {
        position: absolute;
        left: 216px;
        top: 60px;
    }

    .firstRow {
        position: absolute;
        left: 179px;
        top: 53px;
        color: #292c33;
        font-size: 12px;
    }

    .firstLine {
        position: absolute;
        left: 217px;
        top: 43px;
        color: #292c33;
        font-size: 12px;
    }

    .status {
        position: absolute;
        width: 32px;
        height: 22px;
        margin-left: 10px;
    }

    .ddjline {
        margin-left: 44px;
        width: 723px;
    }

    .station {
        position: relative;
    }

    .stationgoods {
        position: absolute;
        margin-left: -23px;
        margin-top: 1px;
        width: 32px;
        height: 20px;
    }

    .jhd {
        position: absolute;
        margin-left: 20px;
        margin-top: -7px;
        height: 12px;
        width: 12px
    }
</style>
<div class="lr-layout">
    <div class="lr-layout-center">
        <div style="height:80%; width: 100%">
            <div class="alertBox">
                <div class="left">
                    <div class="wrap">
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7788</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：552345186</div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F2站台</span>
                                    <label>7789</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：5586</div>
                            </div>
                        </div>
                        <div class="items error">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7894</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/error.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：5586</div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7895</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：空闲</div>
                                <div class="c_info">任务号：暂无</div>
                            </div>
                        </div>
                    </div>
                    <div class="floor">
                        <img src="~/Content/images/DeviceMonitor/hjfloor.png" class="cover" />

                        <div class="mark normal" style="left:220px;top:67px;">1</div>
                        <div class="mark normal" style="left:216px;top:95px;">2</div>
                        <div class="mark error" style="left:212px;top:120px;">3</div>
                        <div class="mark normal" style="left:208px;top:145px;">4</div>

                        <div class="mark normal" style="left:220px;top:242px;">1</div>
                        <div class="mark warn" style="left:216px;top:270px;">2</div>
                        <div class="mark normal" style="left:212px;top:292px;">3</div>
                        <div class="mark normal" style="left:208px;top:320px;">4</div>
                    </div>
                    <div class="wrap">
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7788</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：5586</div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F2站台</span>
                                    <label>7789</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：5586</div>
                            </div>
                        </div>
                        <div class="items warn">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7894</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/warn.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：入库</div>
                                <div class="c_info">任务号：5586</div>
                            </div>
                        </div>
                        <div class="items">
                            <div class="head">
                                <div class="platform">
                                    <span>2F1站台</span>
                                    <label>7895</label>
                                </div>
                                <img src="~/Content/images/DeviceMonitor/normal.png" />
                            </div>
                            <div class="content">
                                <div class="c_info">任务：空闲</div>
                                <div class="c_info">任务号：暂无</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="title">
                        <img src="~/Content/images/DeviceMonitor/icon.png" class="" />
                        <span>1号堆垛机</span>
                    </div>
                    <div class="device">
                        <div class="device_Info even">
                            <span class="name">设备编号：</span>
                            <span class="inner">SR001</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">运行状态：</span>
                            <span class="inner">正常</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">载货状态：</span>
                            <span class="inner">有货</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">设备高度：</span>
                            <span class="inner">15M</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">承载重量：</span>
                            <span class="inner">300kg</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">设备里程：</span>
                            <span class="inner">150km</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">任务号：</span>
                            <span class="inner">526854</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">起始行：</span>
                            <span class="inner">12</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">起始列：</span>
                            <span class="inner">5</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">起始层：</span>
                            <span class="inner">45</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">起始深度：</span>
                            <span class="inner">1</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">目标行：</span>
                            <span class="inner">65</span>
                        </div>
                        <div class="device_Info even">
                            <span class="name">目标列：</span>
                            <span class="inner">105</span>
                        </div>
                        <div class="device_Info">
                            <span class="name">目标深度：</span>
                            <span class="inner">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>
@Html.AppendJsFile("/Areas/DeviceMonitorManager/Views/HJDeviceMonitor/DDJDetail.js")