xiaoben-as2-php/protected/views/feedback/plan.php

<style>
    /* 弹层样式 */
    .need-pop{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    .need-pop-con{
        background: #fff;
        width: 510px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .need-pop-top{
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        padding: 6px 12px;
    }
    .npt-close{
        font-size: 30px;
        cursor: pointer;
        line-height: 28px;
    }
    .need-pop-list{
        margin: 10px 0;
        line-height: 30px;
    }
    .need-pop-menu{
        width: 110px;
        text-align: right;
        margin-right: 4px;
    }
    .need-pop-menu b{
        color: red;
        font-weight: bold;
    }
    .gray-bg{
        background: #F0F0F0;
    }
    .need-pop-detail{
        width: 370px;
        line-height: 26px;
    }
    .need-pop-detail input,.need-pop-detail textarea{
        border: 1px solid #ccc;
        width: 100%;
    }
    .need-pop-detail input{
        height: 26px;
    }
    .prev-class{
        position: relative;
    }
    .inp-text {
        position: relative;
        text-indent: 10px;
        width: 100%;
        height: 100%;
        line-height: 30px;
        border: 1px solid #D8D8D8;
        cursor: pointer;
    }
    .select-con {
        display: none;
        border: 1px solid #ccc;
        border-top: none;
        position: absolute;
        background: #fff;
        z-index: 10;
        width: 100%;
        text-indent: 10px;
        line-height: 28px;
    }
    .select-con li {
        list-style: none;
    }
    .select-con li:hover{background: #2977ff;color: #fff;cursor: pointer;}
    .inp-text:after {
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #676767;
        position: absolute;
        right: 10px;
        bottom: 12px;
    }

    .list-half{
        width: 49%;
    }
    .list-half .need-pop-detail{
        width: 120px;
    }
    .need-pop-sub{
        display: block;
        margin: 20px auto 30px;
        color: #fff;
        background: #2977ff;
        padding: 2px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .gray-font{
        color: rgb(153, 153, 153);
    }
    .need-warn-con{
        font-size: 12px;
        padding-left: 20px;
    }
    .add-file{
        cursor: pointer;
        font-size: 14px;
    }
    .vtm{
        vertical-align: middle;
    }


    /* 回复样式 */
    .title-detail{
        background: #EFF5FB;
        padding: 20px;
        margin: 20px 30px;
        color: #000;
    }
    .title-msg{
        font-weight: bold;
        margin-bottom: 10px;
    }
    .tar{
        text-align: right;
    }
    .flex{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
    .flex-one{
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
    }
    .flex-two{
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        -o-flex: 2;
        flex: 2;
    }
    .flex-three{
        -webkit-flex: 3;
        -moz-flex: 3;
        -ms-flex: 3;
        -o-flex: 3;
        flex: 3;
    }
    .great-num{
        margin-left: 10px;
    }
    .need-list{
        border-bottom: 1px solid #ccc;
        padding: 4px;
        line-height: 22px;
        min-height: 44px;
    }
    .need-list:last-child{
        border: none;
    }
    .need-detail{
        margin: 0 30px 20px;
    }
    .need-list-menu{
        width: 110px;
        align-self: center;
    }
    .need-list-main{
        align-self: center;
    }
    .download-file{
        color: #2977ff;
        cursor: pointer;
    }
    .great-opt-con{
        width: 80px;
        text-align: right;
        cursor: pointer;
    }
    .title-msg-con{
        position: relative;
        padding-right: 16px;
        margin-left: 8px;
    }
    .title-msg-con:after{
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid #676767;
        position: absolute;
        right: 0px;
        top: 8px;
    }
    .need-list-top{
        margin-bottom: 10px;
    }
    .great-list-name{
        display: inline-block;
        overflow: hidden;
        width: 36px;
        height: 36px;
        background: #2977ff;
        color: #fff;
        border-radius: 50%;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        margin: 6px 6px 0 0;
    }
    .menu-icon{
        width: 18px;
        height: auto;
    }
    .message-name{
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
    }
    .message-list{
        margin-bottom: 12px;
    }
    .message-inp{
        width: 100%;
        padding: 10px;
    }
    .reply-btn{
        color: #fff;
        background: #2977ff;
        padding: 2px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
    }
    .great-hook.hide{
        display: none;
    }


    /* menu */
    .banner-menu{
        /*font-size: 0;*/
    }
    .banner-menu .menu-msg{
        display: inline-block;
        font-size: 14px;
        padding: 4px 22px;
        cursor: pointer;
    }
    .banner-menu .menu-msg.selected{
        border-bottom: 3px solid #2977ff;
    }




    /* 开发计划 */
    .layout-margin{
        margin: 10px 30px;
    }
    .time-sel select{
        width: 90px;
        margin-right: 20px;
    }
    .back-href{
        cursor: pointer;
        color: #2977ff;
    }
    .develop-plan-top{
        background: #EFF5FB;
        padding: 10px;
        line-height: 24px;
    }
    .develop-plan-status {

    }
    .dps-list{
        display: inline-block;
        margin: 0 6px;
        cursor: pointer;
    }
    .dps-list.selected{
        color: rgba(52, 167, 255, 0.988235294117647);
    }
    .end-date b.up{
        color: #2977ff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #676767;
        position: relative;
        top: -16px;
        left: 5px;
    }
    .end-date b.up.selected{
        color: #2977ff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #2977ff;
    }
    .end-date b.down{
        color: #2977ff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #676767;
        position: relative;
        top: 16px;
        left: -5px;
    }
    .end-date b.down.selected{
        color: #2977ff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #2977ff;
    }
    .propose-man{
        height: 24px;
        border-radius: 12px;
        border: 1px solid #ccc;
        text-align: center;
        width: 140px;
        margin-right: 20px;
    }
    .search-propose-man{
        background: #2977ff;
        color: #fff;
        width: 80px;
        height: 24px;
        text-align: center;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        margin-right: 10px;
    }
    .tac{
        text-align: center;
    }
    .title-menu-msg{
        font-size: 16px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
    }
    .gray-bg{
        background: #F2F2F2;
    }
    .first-level-plan{
        position: relative;
    }
    .first-level-plan:before{
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #676767;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .plan-detail{
        padding: 10px 10px 10px 26px;
        align-self: center;
        cursor: pointer;
    }
    .plan-charact{
        display: inline-block;
        vertical-align: middle;
    }
    .plan-charact span{
        display: inline-block;
    }
    .need-source,.need-propose{
        margin-right: 12px;
    }
    .end-date-detail{
        border: 1px solid #ccc;
        padding: 0 14px;
    }
    .fw{
        font-weight: bold;
    }
    .plan-leader{
        align-self: center;
        width: 60px;
        margin-left: 20px;
        color: #36A8FF;
    }
    .leading-official{
        width: 60px;
        margin-left: 20px;
    }
    .finish-progress{
        width: 140px;
        border: 1px solid #ccc;
        background: #fff;
    }
    .progress-bar{
        color: #fff;
        background: #36A8FF;
        text-align: center;
    }
    .task-detail{
        /* display: none; */
    }
    .task-list{
        margin-left: 40px;
        padding: 10px 0;
        position: relative;
        line-height: 20px;
    }
    .task-list:before{
        content: '';
        width: 6px;
        height: 6px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
    }
    .stage-detail span{
        display: inline-block;
        background: #E4E4E4;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 12px;
    }
    .stage-msg.green1{
        color: #fff;
        background: #2977ff;
    }
    .stage-msg.orange1 {
        color: #fff;
        background: #FF9900;
    }
</style>
<div class="clearfix delelop-plan-time layout-margin">
    <div class="fl time-sel">
        <select name="" id="" class="year-sel">
            <?php
            $nowY=date('Y');
            for ($i=2017;$i<=$nowY;$i++){
                if(isset($Year) && $Year==$i){
                    echo '<option value="'.$i.'" selected>'.$i.'年</option>';
                }else{
                    echo '<option value="'.$i.'">'.$i.'年</option>';
                }

            }
            ?>

        </select>
        <select name="" id="" class="month-sel">
            <?php

            for ($i=1;$i<=12;$i++){
                if(isset($Month) && $Month==$i) {
                    echo '<option value="' . $i . '" selected>' . $i . '月</option>';
                }else{
                    echo '<option value="' . $i . '">' . $i . '月</option>';
                }
            }
            ?>
        </select>
        <select name="" id="" class="week-sel">
        </select>
    </div>
    <div class="fr back-href"><a href="<?php echo $this->createUrl('feedback/index')?>">返回需求列表</a></div>
</div>
<div class="clearfix develop-plan-top layout-margin">
    <ul class="fl develop-plan-status">
        <li class="dps-list <?php if(!isset($urlArr['stage']) || !$urlArr['stage']){ echo 'selected';}?>"  rel="0">全部</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==6){ echo 'selected';}?>" rel="6">发布线上</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==4){ echo 'selected';}?>" rel="4">完成开发</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==2){ echo 'selected';}?>" rel="2">完成设计</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==5){ echo 'selected';}?>" rel="5">测试中</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==3){ echo 'selected';}?>" rel="3">开发中</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==1){ echo 'selected';}?>" rel="1">设计中</li>
        <li class="dps-list <?php if(isset($urlArr['stage']) && $urlArr['stage']==7){ echo 'selected';}?>" rel="7">暂停中</li>
    </ul>
    <div class="fr develop-plan-charact">
        <form action="" method="get" id="searchForm">
        <span class="end-date">截止日期<b class="up"></b><b class="down"></b></span>

            <input type="text" name="origin" class="propose-man" value="<?php if(isset($origin) && $origin){ echo $origin;}?>" placeholder="提出人">
            <input type="button" class="search-propose-man" value="搜索">
            <input type="hidden" name="stage" value="<?php if(isset($urlArr['stage']) && $urlArr['stage'] ){echo $urlArr['stage'];}?>">
            <input type="hidden" name="year" value="<?php if(isset($urlArr['year']) && $urlArr['year'] ){echo $urlArr['year'];}?>">
            <input type="hidden" name="month" value="<?php if(isset($urlArr['month']) && $urlArr['month'] ){echo $urlArr['month'];}?>">
            <input type="hidden" name="week" value="<?php if(isset($urlArr['week']) && $urlArr['week'] ){echo $urlArr['week'];}?>">
            <input type="hidden" name="sort" value="<?php if(isset($urlArr['sort']) && $urlArr['sort'] ){echo $urlArr['sort'];}?>">
        </form>
    </div>
</div>
<div class="flex title-menu-msg layout-margin">
    <div class="flex-one gray-font tac">需求及任务</div>
    <div class="leading-official gray-font">负责人</div>
</div>
<div class="layout-margin">
    <?php
    if(isset($data)){
        foreach ($data as $val){
    ?>
            <section class="develop-plan-main">
                <artile class="first-level-plan flex">
                    <div class="flex-one flex plan-detail gray-bg">
                        <div class="flex-one plan-name"><?php echo $val['title']?></div>
                        <div class="plan-charact">
                            <span class="need-source">需求来源：<?php echo $val['origin']?></span>
                            <span class="need-propose">提出人：<?php echo $val['origin']?></span>
                            <span class="end-date-detail fw">截止<?php echo $val['endTime']?></span>
                            <span class="finish-progress">
							<span class="progress-bar" style="width: <?php echo $val['percent']?>%;"><?php echo $val['percent']?>%</span>
						</span>
                        </div>
                    </div>
                    <div class="plan-leader"><?php echo $val['chargeMan']?></div>
                </artile>
                <?php
                if(isset($val['childs']) && $val['childs']){
                    echo ' <ul class="task-detail">';
                    foreach ($val['childs'] as $v){
                 ?>

                            <li class="task-list flex">
                                <div class="flex-one flex">
                                    <div class="flex-one">任务一：<?php echo $v['taskName']?></div>
                                    <div class="stage-detail">
                                        <?php
                                        if(strpos($v['stageName'],'设计')!==false){
                                        ?>
                                            <span class="stage-msg vtm orange1">设计</span>
                                            <img src="/images/arrows.png" alt="" class="vtm">
                                            <span class="stage-msg vtm">开发</span>
                                            <img src="/images/arrows.png" alt="" class="vtm">
                                            <span class="stage-msg vtm">测试</span>
                                            <img src="/images/arrows.png" alt="" class="vtm">
                                            <span class="stage-msg vtm">发布</span>
                                        <?php
                                        }elseif(strpos($v['stageName'],'开发')!==false){

                                        ?>
                                        <span class="stage-msg vtm green1">设计</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm orange1">开发</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm">测试</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm">发布</span>
                                        <?php
                                        }elseif(strpos($v['stageName'],'测试')!==false){

                                        ?>
                                        <span class="stage-msg vtm green1">设计</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm green1">开发</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm orange1">测试</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm">发布</span>
                                        <?php
                                        }elseif(strpos($v['stageName'],'发布')!==false){
                                        ?>
                                        <span class="stage-msg vtm green1">设计</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm green1">开发</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm green1">测试</span>
                                        <img src="/images/arrows.png" alt="" class="vtm">
                                        <span class="stage-msg vtm orange1">发布</span>
                                        <?php
                                        }
                                        ?>

                                    </div>
                                </div>
                                <div class="plan-leader"><?php echo $v['userName']?></div>
                            </li>

                <?php
                        echo '</ul>';
                    }
                }
                ?>

            </section>
    <?php
        }
    }
    ?>

</div>
<script>
    $(function(){
        $('.year-sel').change(function(){
            $('.month-sel').val(1);
            $('input[name=year]').val($(this).val());
            loadWeek($(this).val(),$('.month-sel').val());
        });
        $('.month-sel').change(function(){

            var year=$('.year-sel').val();
            var month=$(this).val();
            $('input[name=month]').val(month);
            loadWeek(year,month);
        });
        $('.week-sel').change(function(){

            $('input[name=week]').val($(this).val());
            $('input[name=year]').val($('.year-sel').val());
            $('input[name=month]').val($('.month-sel').val());
            $('#searchForm').submit();
        });
        $('.dps-list').click(function(){
            var t=$(this).attr('rel');
            $('input[name=stage]').val(t);
            $('#searchForm').submit();
        });
        $('.end-date').click(function(){
            var sort=$('input[name=sort]').val();
            if(sort==0 || sort==2){
                $('input[name=sort]').val(1);
            }else{
                $('input[name=sort]').val(2);
            }
            $('#searchForm').submit();
        });
        function loadWeek(year,month){
            $.ajax({
                url:'<?php echo $this->createUrl('feedback/getweek')?>',
                type:'POST',
                dataType:'json',
                data:{'year':year,'month':month},
                success:function(res){
                    if(res.status==1){
                        var html='';
                        var week=parseInt(<?php echo $Week;?>);
                        for(var i=0;i<res.week.length;i++){

                            if(week==res.week[i]){
                                html+='<option selected value="'+res.week[i]+'">第'+res.week[i]+'周</option>';
                            }else{
                                html+='<option value="'+res.week[i]+'">第'+res.week[i]+'周</option>';
                            }

                        }
                        $('.week-sel').html(html);

                    }
                }
            });
        }
        <?php
        echo 'loadWeek("'.$Year.'","'.$Month.'");';
        ?>
    });
    $('.search-propose-man').click(function(){
        //if($('input[name=origin]').val()!=''){
            $('#searchForm').submit();
        //}

    });
</script>