caiping/app/admin/view/project/index.html

{extend name="common/base"/}

{block name="style"}
<style>
    .footer{
		width: 100%;
		height: 25px;
		text-align: center;
		margin-bottom: 0 !important;
	}

    /* .left-box {
        height: 99vh !important;
    } */

    .left-box-font {
        color: #666666;
        font-size: 0.75vw;
    }

    .button-search {
        /* margin: 2.8vh 0 0 2vh; */
        margin-top: 2vw;
        background-color: rgb(23, 145, 233);
    }

    .layui-card-header {
        border-bottom: 1px solid #eee;
        line-height: 0;

    }

    .choose {
        margin-left: 1.4vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 0;

    }

    .record {
        float: right;
        margin-right: 1.8vw;
        text-align: right;
        width: 45%;
        font-size: 0.75vw !important;
    }

    .box-right-top {
        height: 8vh;
        font-size: 0.75VW;


    }

    .box-right-top-1 {
        color: rgb(23, 145, 233);
        font-size: 1.5vw;
        height: 60%;

    }


    .countdown {
        height: 7vh;
        font-size: 1vw;
        text-align: center;
        border: 1px solid #eee;

    }

    .countdown-top {
        height: 3vh;
        line-height: 3vh;
        border-bottom: 1px solid #eee;
        color: #fff;
        background-color: rgb(23, 145, 233);
        border-bottom: 1px solid rgb(23, 145, 233);
        font-size: 0.8vw;
        padding: 0;
        margin: 0;
    }

    .countdown-bottom {
        height: 4vh;
        line-height: 4vh;
        padding: 0;
        margin: 0;
        background-color: #fff;
    }

    .fund {
        border: 1px solid rgba(209, 209, 204, 0.719);
        margin-top: 1.5vh;
        border-radius: 0.2vw;
        background-color: rgb(250, 250, 250);
    }

    .fund-top {
        font-size: 0.8vw;
        font-weight: 550;

    }


    .list {
        font-size: 0.75vw;

    }

    .layui-form-checked[lay-skin=primary]>i {
        border-color: rgb(23, 145, 233) !important;
        background-color: rgb(23, 145, 233);
    }

    .layui-form-checkbox[lay-skin=primary]:hover>i {
        border-color: rgb(23, 145, 233);
    }


    .bar {
        position: relative;

    }

    /* .progress-box {
        margin-left: 4vw;
    } */

    .line {
        width: 50%;
        height: 1px;
        background-color: black;
        float: left;
        top: 1vh;
        position: relative;
        margin: auto;
        position: absolute;
        left: 42%;
        top: 50%;
        margin-left: 1.25vw;
    }

    /* .text-line {
        float: left;
    } */

    .schedule {
        font-size: 2vw;
        vertical-align: middle;
    }

    .dynamic-top {
        width: 6.5vw;
        height: 3.5vh;
        border: 1px solid;
        /* color: rgb(23, 145, 233); */
        line-height: 3.5vh;
        text-align: center;
        margin: 0 auto;
        border-radius: 0.2vw;
        font-weight: 600;
        font-size: 0.8vw;
        margin-top: 3vh;
    }

    .dynamic-bottom {
        width: 6.5vw;
        height: 3.5vh;
        border: 1px solid;
        /* color: rgb(23, 145, 233); */
        line-height: 3.5vh;
        text-align: center;
        margin: 0 auto;
        border-radius: 0.2vw;
        font-weight: 600;
        font-size: 0.8vw;
        margin-top: 1.5vh;

    }


    .dynamic span {
        float: right;
    }

    .dynamic-top~p {
        color: grey;
        text-align: center;
    }

    .dynamic-bottom~p {
        color: grey;
        text-align: center;
        margin-bottom: 3vh;
    }

    .dynamic-top1 {
        width: 6.5vw;
        height: 3.5vh;
        border: 1px solid;
        /* color: rgb(23, 145, 233); */
        line-height: 3.5vh;
        text-align: center;
        margin: 0 auto;
        border-radius: 0.2vw;
        font-weight: 600;
        font-size: 0.8vw;
        margin-top: 3vh;
    }

    .dynamic-top1~p {
        color: grey;
        text-align: center;

    }

    .dynamic div {
        float: left;
    }

    .detail {
        color: rgb(23, 145, 233);
    }

    .project-list {
        border-bottom: 1px solid #eee;
    }

    .information {
        width: 6vw;
        height: 3.5vh;
        line-height: 3.5vh;
        border-radius: 0.25vw;
    }

    .table-header {
        height: 4.5vh;
        line-height: 4.5vh;
    }


    .basic-information {
        /* width: 7vw; */
        /* height: 3.5vh; */
        border: 1px solid rgb(23, 145, 233);
        color: rgb(23, 145, 233);
        line-height: 3.5vh;
        text-align: center;
        border-radius: 0.2vw;
        font-weight: 600;
        font-size: 0.8vw;
        float: left;
        padding: 0 2%;
    }

    .layui-tab .layui-tab-title .layui-this {
        background-color: rgb(247, 251, 255);
        color: rgb(23, 145, 233);
        border-color: rgb(236, 246, 255);
        font-size: 0.8vw;
        height: 4vh;
        line-height: 4vh;
        font-weight: 600;
    }

    .layui-tab .layui-tab-title li {
        width: 4.5vw;
        font-size: 0.8vw;
        height: 4vh;
        line-height: 4vh;
    }

    .layui-tab .layui-tab-title {
        /* height: 4vh; */
        height: unset;

    }

    .layui-tab-title .layui-this:after {
        border-style: none;
    }

    .per {
        height: 4vh;
        width: 4vw;
        text-align: center;
        line-height: 4vh;
        margin-top: 65%;
        border-radius: 5px;
        border: 1.5px solid rgb(25, 144, 255);
    }

    /* .percentage-box {
        
        width: 4vw;
        
    } */

    .project-list-name {
        font-size: 0.75vw;
    }

    .h3 {
        font-size: 1vw;
    }

    .layui-form-checkbox>div {
        font-size: 0.75vw !important;
    }

    .layui-form-label {
        width: 110px;
    }

    .line-style {
        width: 100%;
        overflow: hidden;
    }

    .line-style-right {
        width: 45%;
        overflow: hidden;
    }

    .dynamic-line {
        padding: 8px 0;
    }

    /* 日志 */
    .log_top {
        padding-left: 1vw;
    }

    .log_top span {
        margin: 0 0.5vw;
    }

    /* 1,1,1 */
    .log_commentary {
        color: rgb(0, 176, 80);
    }

    .log_company {
        color: rgb(255, 33, 0);
    }

    .log_content {
        margin: 1vw 1.5vw 0 1.5vw;
        padding: 0.5vw 1vw;
        text-indent: 1.2em;
        line-height: 2.1vh;
        background-color: rgb(255, 255, 255);
        /* background-color: aqua; */
        border-radius: 0.5vw;
        box-shadow: 0.19vw 0.16vw 0.4vw 0.03vw rgba(0, 0, 0, 0.13);
    }

    /* .log_content_color {
        background-color: rgb(250,250,250);
    } */

    .log_content_img img {
        /* height: 6vw;
        width: 9vw; */
        border-radius: 0.5vw;
        margin: 0.3vw 0;
    }

    .log_item_top {
        height: 70%;
        overflow: scroll;
    }

    .log_item_top {
        height: 60vh;
    }

    .log_item_bottom {
        display: flex;
        /* height: 17vh; */
        /* border-top: 1px solid #eee; */
        margin: 0 1.5vw;
        /* background-color: rgb(250,250,250); */
    }

    .log_input input {
        width: 55vw;
        height: 10vh;
        border: #eee 1px solid;
    }

    .log_bottom_img {
        /* height: 5vh; */
    }

    .log_bottom_img img {
        height: 4vw;
        width: 6vw;
        border-radius: 0.5vw;
        margin: 0.5vw 0vw 0.5vw 0.3vw;
    }

    .log_bottom_left {
        width: 95%;
        margin-top: 1.5vh;
    }

    .log_bottom_right {
        width: 5%;
    }

    /* 上传图片 */
    /* .layui-upload-drag-self {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 6vw;
        height: 4vw;
        line-height: 4vw;
        vertical-align: top;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        outline: 0;
        margin-right: 13px;
        float: left;
    } */

    /* .layui-input-inlines-self {
        position: relative;
        margin-left: 90px;
        min-height: 36px;
        text-align: left;
    }

    .layui-upload-drag-self .layui-icon {
        font-size: 28px;
        color: #8c939d
    }

    .layui-upload-drag-self .img {
        position: relative;
        height: 148px;
        width: 148px;
    }

    .layui-upload-img {
        width: 148px;
        height: 148px;
        border-radius: 6px;
        margin-top: -3px;
        margin-left: -2px;
    } */


    .handle {
        position: absolute;
        width: 148px;
        height: 100%;
        z-index: 100;
        border-radius: 6px;
        top: 0;
        background: rgba(59, 60, 61, 0.6);
        text-align: center;
    }

    .handle .icon-myself {
        z-index: 999;
        transition: all .3s;
        cursor: pointer;
        font-size: 25px;
        width: 25px;
        color: rgba(255, 255, 255, 0.91);
        margin: 0 4px;
    }

    .log_textarea {
        width: 60vw;
        height: 8vh;
        padding: 0.5vw;
        /* margin-right: 2vw; */
    }

    .log_button_img {
        width: 2vw;
    }

    .log_card {
        border: none !important;
    }

    /* 点击图片放大 */
    /* .content_img img {
        max-width: 100%;
        cursor: pointer;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .overlay img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .layui-card:last-child {
        margin-bottom: 46px;
    }

    .layui-input,.layui-form-select {
        display: block;
        width: auto;
        padding-right: auto;
    } */

    /* .layui-form-select{
        padding-right:0;
    } */

    .project-select {
        width: auto !important;
    }

    .layui-form-select .layui-input {
        padding-right: 0;
        text-align: left;
        font-size: 0.75vw;

    }

    .filelist {
        width: 100%;
        overflow: scroll;
        height: 8vw;
        justify-content: flex-start;
        align-content: space-between;
        /* flex-direction: column-reverse; */
        flex-wrap: wrap;
        display: flex;
    }

    .filelist li {
        padding: 0.5vw 0.7vw 0.5vw 0.7vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        border-right: 1px solid #e2e2e2;
    }


    .filelist p {
        margin: 3px 0 5px 0;
        width: 5vw;
        text-align: center;
    }

    .filelist:hover li {
        /* display: initial; */
    }

    .layui-col-md4{
        padding: 6px 0 !important;
    }

    .layui-col-md12{
        padding-left: 0 !important;
    }

    .navleft-body{
        height: 85vh;
        overflow: auto;
    }

    .video{
        height: 100vh;
        overflow: auto;
    }
</style>

{/block}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md4 left-box layui-card">
            <form class="layui-form" action="" lay-filter="component-form-element">
                <div class="layui-card-body layui-row layui-col-space12">
                    <div class="layui-col-md10 layui-form" style="width: 82%;">
                        <div class="layui-card-body layui-row layui-col-space12" style="padding: 10px 0;">
                            <div class="layui-col-md6 " style="display: flex;">
                                <label class="layui-form-label left-box-font" style="padding: 9px 0;">
                                    项目名称：
                                </label>
                                <div class="layui-input-block left-box-font">
                                    <input type="text" name="project_name" placeholder="请输入" autocomplete="off"
                                        class="layui-input " style="font-size: 0.75vw;">
                                </div>
                            </div>
                            <div class="layui-col-md6" style="display: flex;">
                                <label class="layui-form-label left-box-font" style="padding: 9px 0;">
                                    项目状态：
                                </label>
                                <div class="layui-input-block project-select">
                                    <select name="project_status" id="">
                                        <option value=""></option>
                                        <option value="2">审批中</option>
                                        <option value="3">待接收</option>
                                        <option value="4">分配中</option>
                                        <option value="5">作业中</option>
                                        <option value="6">归档中</option>
                                        <option value="8">已归档</option>
                                        <option value="7">退审中</option>
                                        <option value="9">已退审</option>
                                    </select>
                                </div>
                                
                            </div>
                            <div class="layui-col-md6" style="display: flex;">
                                <label class="layui-form-label left-box-font" style="padding: 9px 0;">
                                    送审部门：
                                </label>
                                <div class="layui-input-block">
                                    <input type="text" name="sent_review_unit_name" placeholder="请输入" autocomplete="off"
                                        class="layui-input" style="font-size: 0.75vw;">
                                </div>
                            </div>
                            <div class="layui-col-md6" style="display: flex;">
                                <label class="layui-form-label left-box-font" style="padding: 9px 0;">
                                    负责人：
                                </label>
                                <div class="layui-input-block">
                                    <input type="text" name="entrust_unit_name" placeholder="请输入" autocomplete="off"
                                        class="layui-input" style="font-size: 0.75vw;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;">
                        <button class="layui-btn layui-btn-warm button-search" lay-submit="" lay-filter="webform"><i
                                class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </form>

            <!--<div class="layui-form">
                <div class="layui-card-header">
                    <div class="choose">
                        <input type="checkbox" name="interest[write]" title="与我有关" lay-skin="primary">
                        <input type="checkbox" name="interest[read]" title="与我部门有关" lay-skin="primary">
                        <input type="checkbox" name="interest[code]" title="未完成" checked lay-skin="primary">
                        <p class="record">共3条记录</p>
                    </div>
                </div>

            </div>-->

            <div id="project_list" class="navleft-body">
            {volist name="detail" id="vo"}
                <div class="layui-form navleft" style="cursor: pointer;" data-id="{$vo.id}">
                <div class="layui-card-body">
                    <div class="layui-card-body layui-row layui-col-space12 project-list">
                        <div class="layui-col-md2" style="padding: 0;">
                            <div class="layui-card-body" style="padding: 0;">
                                {if $field.project_status == 1}
                                <div id="main222" class="per">
                                    {switch $vo.project_status}
                                        {case 1}立项中{/case}
                                        {case 2}审批中{/case}
                                        {case 3}待接收{/case}
                                        {case 4}待分配{/case}
                                        {case 5}作业中{/case}
                                        {case 6}归档中{/case}
                                        {case 7}退审中{/case}
                                        {case 8}已归档{/case}
                                        {case 9}已退审{/case}
                                        {default /}未知
                                        {/switch}

                                </div>
                                {/if}
                            </div>
                        </div>
                        <div class="layui-col-md10 list">
                            <a href="JavaScript:void(0)">
                                <div class="layui-card-body layui-row layui-col-space12" style="padding-right: 0;">
                                    {if $field.project_name == 1}
                                    <div class="layui-col-md12 h3">
                                        {$vo.project_name}
                                    </div>
                                    {/if}

                                    {if $field.review_unit}
                                    <div class="layui-col-md12">
                                        服务单位：{$vo.review_unit_name}
                                    </div>
                                    {/if}
                                    <!-- <div class="layui-col-md4">
                                        项目状态：
                                        {switch $vo.project_status}
                                        {case 1}立项中{/case}
                                        {case 2}审批中{/case}
                                        {case 3}待接收{/case}
                                        {case 4}待分配{/case}
                                        {case 5}作业中{/case}
                                        {case 6}归档中{/case}
                                        {case 7}退审中{/case}
                                        {case 8}已归档{/case}
                                        {case 9}已退审{/case}
                                        {default /}未知
                                        {/switch}

                                    </div> -->
                                    {if $field.operate_name == 1}
                                    <div class="layui-col-md4">
                                        作业人：{$vo.operate_head_name}
                                    </div>
                                    {/if}

                                    {if $field.review_head == 1}
                                    <div class="layui-col-md4">
                                        负责人：{$vo.review_head_name}
                                    </div>
                                    {/if}

                                    {if $field.engineering_type == 1}
                                    <div class="layui-col-md4">
                                        工程类别：{$vo.engineering_type}
                                    </div>
                                    {/if}

                                    {if $field.preparation_amount == 1}
                                    <div class="layui-col-md8" style="padding-left: 0;">
                                        编制金额：{if !empty($vo.preparation_amount)}{$vo.preparation_amount}万{/if}
                                    </div>
                                    {/if}

                                    {if $field.create_time == 1}
                                    <div class="layui-col-md4">
                                        {$vo.create_time|date="Y-m-d"} 创建
                                    </div>
                                    {/if}

                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                </div>
            {/volist}
            </div>

        </div>
        <div class="layui-col-md8 video" id="projectkanban">
         </div>
    </div>
</div>

{/block}
<!-- /脚本 -->

<!-- 脚本 -->
{block name="script"}

<script>
     const moduleInit = ['tool'];
    function gouguInit() {
        var form = layui.form,tool=layui.tool,upload = layui.upload;
        var $ = layui.jquery,
            layer = layui.layer;
        $('.navleft').click((e) => {
            let projectId = $(e)[0].currentTarget.dataset.id;
            var cindex = layer.load(3,{shade: 0.1});
            $("#projectkanban").load("/admin/project/kan?id="+ projectId,'',function(){
                layer.close(cindex);
            })
        })
        $(".navleft")[0].click();

        var element = layui.element;
        element.on('tab(test-hash)', function (data) {
            let index = $(this).attr('data-id');
            console.log(index)
            if (index == 1) {
                comment()
            } else if (index == 2) {
                record(index);
            } else if (index == 3) {
                report(index);
            } else if (index == 4) {
                project_user(index)
            } else if (index == 5) {


            } else if (index == 6) {
                contact(index)
            } else if (index == 7) {

            }

        });
        form.on('submit(webform)', function (data) {
            console.log(data.field)
            let host=window.location.host
            console.log(data.field.toString())
             window.location.href = 'https://'+host+'/admin/project/index?project_name=' +  data.field['project_name'] + '&sent_review_unit_name=' +  data.field['sent_review_unit_name'] + '&entrust_unit_name=' +  data.field['entrust_unit_name']+ '&project_status=' +  data.field['project_status'];
            // tool.post("/admin/project/index", data.field, callback);
            return false;
        });
        //看报告
        $('[lay-data="readreport"]').click(function (){
            var id = $(this).attr('data-id');
            parent.layui.tool.side('/admin/project.report/view/id/' + id); // 项目id
        })
     }
</script>

{/block}