<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../css/projeck.css" />
    <style>
        body,
        html {
            /*background: #F3F3F3;*/
            background: rgba(243, 243, 243, 1);
        }

        .api_layout {
            /*border-top: 1px solid #37b0e9;*/
            padding: 13px 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: #2C3E50;
        }
        /*信号灯信息*/

        .signal_lamp_Msg {
            position: relative;
            background: rgba(255, 255, 255, 1);
            box-shadow: 5px 5px 20px 7px rgba(0, 0, 0, 0.11);
            border-radius: 7px;
            color: rgba(44, 62, 80, 1);
            margin: 0 17px;
        }

        .signal_lamp_Msg:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 89%;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 18px solid #ffffff;
        }

        .header_message {
            height: 45px;
            line-height: 45px;
            border-bottom: solid 1px #f0f0f0;
            padding-left: 21px;
            font-weight: bold;
            font-size: 16px;
        }
        /*状态部分*/

        .content_message {
            padding: 10px 20px;
        }

        .content_message ul {
            display: flex;
        }

        .content_message ul:last-child {
            margin-top: 10px;
        }

        .content_message ul li {
            display: flex;
            justify-content: space-between;
        }
        /*通讯状态*/

        .communication_container {
            display: flex;
            align-items: center;
            line-height: 41px;
            /*margin: 5px 0;*/
        }
        /*.communication_container li {
          line-height: 42px;
        }*/

        .communication_status {
            /*padding: 2px 8px;*/
            padding: 0 8px;
            margin-left: 23px;
            border-radius: 3px;
            background-color: #27ae60;
            color: #fff;
            font-size: 12px;
            height: 21px;
            line-height: 21px
        }
        /*信号灯样式*/

        .straight_container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 41px;
        }

        .sinal_position {
            width: 95%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .straight {
            width: 18px;
            height: 18px;
            border-radius: 18px;
        }
        /*.straight:last-child {
          display: none;
        }*/

        .green_straight {
            background: rgba(39, 174, 96, 1);
        }

        .red_straight {
            background: rgba(231, 76, 60, 1);
        }
        /*步骤条*/

        ol.steps::-webkit-scrollbar {
            /* chrome 隐藏滚动条*/
            display: none;
        }

        ol.steps {
            list-style: none;
            display: flex;
            overflow-x: auto;
            min-height: 400px;
            margin-top: 26px;
            /*background: red*/
        }
        /*ol.steps li.step-active:first-child .step-num {
            display: none;
        }*/

        ol.steps:after,
        ol.steps li:after {
            content: '';
            display: block;
            clear: both;
        }

        ol.steps li {
            float: left;
            flex: 1;
            position: relative;
            min-width: 40px;
        }

        .ol.steps li:last-child {
            display: none;
        }

        ol.steps li .step-line {
            height: 2px;
            margin-top: 15px;
        }
        /*ol.steps li:last-child .step-line {
          display: none;
        }*/

        ol.steps li.step-active .step-line {
            background-color: #00a854;
            box-shadow: inset 0 1px 1px #00a854;
        }

        ol.steps .step-content {
            position: absolute;
            top: 0;
            left: -15px;
            text-align: center;
        }

        ol.steps li .step-content .step-num-one {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top: 6px;
        }

        ol.steps li .step-content .step-num {
            display: inline-block;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            text-align: center;
            border: 2px solid rgba(39, 174, 96, 1);
            margin-top: 8px;
        }

        .InterzoneName_step {
            writing-mode: vertical-lr;
            /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr;
            letter-spacing: 2px;
            /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        }

        .InterzoneName_step_one {
            writing-mode: vertical-lr;
            /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr;
            /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
        }

        ol.steps li.step-active .step-content .step-num {
            background-color: #fff;
        }

        ol.steps li.step-active:first-child .step-content .step-num {
            display: none;
        }

        .QR_code_details {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 15px 0;
            background: #009fe8;
            color: #fff;
            font-size: 18px;
            z-index: 900;
        }
    </style>
</head>

<body>
    <div class="api_layout">
        <div id="rubberTyredcarDetailsContainer"></div>
        <div id="stepListContainer"></div>
    </div>
</body>

</html>
<!-- 仓库页面 -->
<script id="rubberTyredcarDetailsView" type="text/template">
    <div class="signal_lamp_Msg">
        <div class="shi_xin"></div>
        <div class="kong_xin"></div>
        <div class="header_message">{{=InterzoneName}}</div>
        <div class="content_message">
            <ul class="communication_container">
                <li>通讯状态</li>
                <li>
                    {{? it.status == 1}}
                    <div class="communication_status">正常</div>
                    {{??}}
                    <div>不正常</div>
                    {{?}}
                </li>
            </ul>
            <!-- 0是绿灯  1是红灯 -->
            {{ for (var i=0;i
            <it.light.length;i++ ){ }} <div class="straight_container">
                <div class="sinal_position">{{=it.light[i].SignalPosition}}</div>
                {{? it.light[i].StraightStatus == 0 }}
                <div class="green_straight straight"></div>
                {{?? it.light[i].StraightStatus == 1}}
                <div class="red_straight straight"></div>
                {{?}}
        </div>
        {{? it.light[i].Pageid}}
        <div class="QR_code_details" onclick="QRCodeDetails('{{=it.light[i].Pageid}}')">查看详情</div>
        {{?}} {{ } }}
    </div>
    </div>
</script>
<script type="text/template" id="stepListContainerView">
    <ol class="steps">
        {{ for(var i=it.length-1; i>=0; i-- ){ }}
        <li class="step-active">
            <div class="step-line"></div>
            {{? i== 0}}
            <div class="step-content">
                <span class="step-num" id="step-content-first"> </span>
                <div class="InterzoneName_step">{{=it[i].InterzoneName}}</div>
            </div>
            {{?? i== 1}}
            <div class="step-content">
                <span class="step-num-one"><img src="../../image/positionCar.png" alt=""> </span>
                <div class="InterzoneName_step_one">{{=it[i].InterzoneName}}</div>
            </div>
            {{?? i > 1}}
            <div class="step-content">
                <span class="step-num"> </span>
                <div class="InterzoneName_step">{{=it[i].InterzoneName}}</div>
            </div>
            <!-- <div class="step-line"></div> -->
            {{?}}
        </li>
        {{ } }}
    </ol>

</script>

<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script src="../../script/zepto.js" charset="utf-8"></script>
<script type="text/javascript"></script>

<script>
    var toast = new auiToast();
    var InterzoneName = '',
        organizationIds = ""
    apiready = function() {
        var info = $api.getStorage('data');
        var {
            CarUserNo,
            InterzoneName,
            Pageid
        } = api.pageParam;
        organizationIds = JSON.parse(info).data.user.section_id
        rubberTyredcarDetails(CarUserNo);
        signalLampMsg(InterzoneName, Pageid);
    };

    // 位置列表信息
    function rubberTyredcarDetails(CarUserNo) {
        $http.fnReuestDataNologing(
            `${UrlRouter.rubberTyredcarDetails}?carUserNo=${CarUserNo}`,
            '',
            'get',
            '',
            function(ret, err) {
                let obj = {
                    InterzoneName: '',
                }
                ret.data.unshift(obj);
                ret.data.push(obj);
                $apis.html(
                    stepListContainer,
                    '#stepListContainerView',
                    ret.data
                );
                InterzoneName = ret.data[1].InterzoneName;
                window.location.href = "#step-content-first";
            }
        );
    }

    // 硐室口名称  信号灯列表
    function signalLampMsg(InterzoneName, Pageid) {
        $http.fnReuestDataNologing(UrlRouter.signalLampMsg, '', 'post', {
                InterzoneName: InterzoneName
            },
            function(ret, err) {
                if (Pageid) {
                    let obj = {
                        Pageid: Pageid,
                        SignalPosition: '',
                        StraightStatus: '增加'
                    }
                    ret.data.light.push(obj)
                }
                if (ret.code == 0) {
                    $apis.html(
                        rubberTyredcarDetailsContainer,
                        '#rubberTyredcarDetailsView',
                        ret.data
                    );

                }
            }
        );
    }

    // 查看二维码
    function QRCodeDetails(id) {
        var parm = {
            pageId: id,
            organizationIds: organizationIds,
            title: '二维码详情'
        }
        $event.openWin('browseQrcode_win' + Math.random(), '../browseQrcode/browseQrcode_win', parm, '')
    }
</script>
