Calculation/app/view/tender/detail.ejs

<% include ./tender_sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main  d-flex justify-content-between">
            <h2>进行至 第7期<small class="text-warning">（审批中）</small></h2>
            <div>
                <a href="biaoduan-xiezuo.html" class="btn btn-sm btn-light" ><i class="fa fa-users"></i> 协作办公</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <!--金额概况-->
            <div class="row mb-5">
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">163,000.00</h5>
                            <p class="card-text text-muted">0号台帐合同</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">30,000.00</h5>
                            <p class="card-text text-muted">本期完成</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">50,000.00 <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占合同比例">1%</small></h5>
                            <p class="card-text text-muted">截止本期变更</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">70,000.00</h5>
                            <p class="card-text text-muted">截止本期完成</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">40,000.00</h5>
                            <p class="card-text text-muted">截止上期完成</p>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">30,000.00</h5>
                            <p class="card-text text-muted">本期应付</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--进度条-->
            <div class="mb-5">
                <div class="progress">
                    <div class="progress-bar bg-success" style="width: 24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥40,000.00">24%</div>
                    <div class="progress-bar bg-info" style="width:18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥30,000.00">18%</div>
                    <div class="progress-bar bg-gray" style="width:58%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥930,00.00">58%</div>
                </div>
            </div>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tubiao" role="tab">进度表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#shuxing" role="tab">标段属性</a>
                </li>
            </ul>
            <div class="tab-content">
                <!--进度表-->
                <div id="tubiao" class="tab-pane active">
                    <!--月进度图表-->
                    <div id="chartContainer3" style="height: 300px; width: 100%;" class="my-5">
                    </div>
                    <!--期汇总图表-->
                    <div id="chartContainer4" style="height: 300px; width: 100%;" class="mb-5">
                    </div>
                </div>
                <!--标段属性-->
                <div id="shuxing" class="tab-pane">
                    <div class="row my-3">
                        <div class="col-2">
                            <div class="nav flex-column nav-pills" >
                                <a class="nav-link active" id="v-pills-agi-tab" data-toggle="pill" href="#v-pills-agi" role="tab">属性</a>
                                <a class="nav-link" id="v-pills-count-tab" data-toggle="pill" href="#v-pills-count" role="tab">计算参数</a>
                                <a class="nav-link" id="v-pills-display-tab" data-toggle="pill" href="#v-pills-display" role="tab">显示设置</a>
                            </div>
                        </div>
                        <div class="col">
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="v-pills-agi" role="tabpanel">
                                    <!--操作-->
                                    <div class="d-flex justify-content-end mt-3">
                                        <div>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="edit-agi"> 编辑</button>
                                        </div>
                                        <div style="display: none">
                                            <button type="button" class="btn btn-sm btn-outline-success" id="post-agi"><i class="fa fa-check"></i> 提交</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-outline-danger" id="cancel-agi"><i class="fa fa-close"></i> 取消</button>
                                        </div>
                                    </div>
                                    <!--合同信息-->
                                    <legend class="mt-3">合同信息</legend>
                                    <!--默认显示-->
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">建设项目名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="项目A" readonly="" id="build-name">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">合同编号</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="deal-code">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">合同名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="deal-name">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--参建单位-->
                                    <legend class="mt-3">参建单位</legend>
                                    <!--编辑模式-->
                                    <div class="form-group">
                                        <label>建设单位：</label>
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">单位名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="build-company">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">法人代表</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="build-corporation">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">签订日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" id="build-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>承包单位1：</label>
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">单位名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="contract1-company">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">法人代表</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="contract1-corporation">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">签订日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" id="contract1-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>承包单位2：</label>
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">单位名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="contract2-company">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">法人代表</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="contract2-corporation">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">签订日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" id="contract2-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>监理单位1：</label>
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">单位名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="supervision1-company">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">法人代表</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="supervision1-corporation">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">签订日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" id="supervision1-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>监理单位2：</label>
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">单位名称</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="supervision2-company">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">法人代表</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" id="supervision2-corporation">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">签订日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" id="supervision2-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--技术参数-->
                                    <legend class="mt-3">技术参数</legend>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">公路等级</span>
                                                    </div>
                                                    <select class="form-control" disabled="" id="load-level">
                                                        <option value="1">高速公路</option>
                                                        <option value="2">一级公路</option>
                                                        <option value="3">二级公路</option>
                                                        <option value="4">三级公路</option>
                                                        <option value="5">四级公路</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">长度（KM）</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="length">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">起始桩号</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="start-peg">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">终止桩号</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="end-peg">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">车道数</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="lane-count">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">合同工期</span>
                                                    </div>
                                                    <input type="text" class="form-control" value="" readonly="" id="deal-period">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">开工日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" readonly="" id="start-date">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">计划完工日期</span>
                                                    </div>
                                                    <input type="date" class="form-control" value="" readonly="" id="plan-end-date">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-count" role="tabpanel" >
                                    <!--操作-->
                                    <div class="d-flex justify-content-end mt-3">
                                        <span>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="edit-count">编辑</button>
                                        </span>
                                        <span style="display: none">
                                            <button type="button" class="btn btn-sm btn-outline-success" id="post-count"><i class="fa fa-check"></i> 提交</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-outline-danger" id="cancel-count"><i class="fa fa-close"></i>  取消</button>
                                        </span>
                                    </div>
                                    <!--小数位数-->
                                    <legend class="mt-3">小数位数</legend>
                                    <div class="form-group">
                                        <label>全局设置</label>
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">数量</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="3" id="decimal-qty">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">金额</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="2" id="decimal-tp">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>单独设置</label>
                                        <div class="row">
                                            <div class="col-auto">
                                                <div class="form-group form-check mt-1">
                                                    <input type="checkbox" class="form-check-input" id="decimal-deal" checked="">
                                                    <label class="form-check-label" for="exampleCheck1">签约清单</label>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">数量</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="3" id="decimal-deal-qty">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">金额</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="2" id="decimal-deal-tp">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-auto">
                                                <div class="form-group form-check mt-1">
                                                    <input type="checkbox" class="form-check-input" id="decimal-pay">
                                                    <label class="form-check-label" for="exampleCheck2">合同支付</label>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">数量</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="3" readonly="" id="decimal-pay-qty">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">金额</span>
                                                    </div>
                                                    <input type="number" class="form-control" value="2" readonly="" id="decimal-pay-tp">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <legend class="mt-3">合同参数</legend>
                                    <!--默认显示-->
                                    <div class="form-group">
                                        <label>全局设置</label>
                                        <div class="col-3">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">签约合同价</span>
                                                </div>
                                                <input type="number" class="form-control" value="" id="contract-price">
                                            </div>
                                        </div>
                                        <div class="col-3 my-3">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">签约开工预付款</span>
                                                </div>
                                                <input type="number" class="form-control" value="" id="start-advance">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group input-group-sm">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">签约材料预付款</span>
                                                </div>
                                                <input type="number" class="form-control" value="" id="material-advance">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-display" role="tabpanel" >
                                    <!--操作-->
                                    <div class="d-flex justify-content-end mt-3">
                                        <span>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="edit-display">编辑</button>
                                        </span>
                                        <span style="display: none">
                                            <button type="button" class="btn btn-sm btn-outline-success" id="post-display"><i class="fa fa-check"></i> 提交</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-outline-danger" id="cancel-display"><i class="fa fa-close"></i>  取消</button>
                                        </span>
                                    </div>
                                    <legend class="mt-3">台帐列显示</legend>
                                    <div class="form-group">
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="form-group form-check">
                                                        <input type="checkbox" class="form-check-input" id="ledger-dgn-qty" checked="">
                                                        <label class="form-check-label" for="ledger-dgn-qty">设计数量</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src=/public/js/echarts/echarts.min.js></script>
<script type="text/javascript">
    //4 标段期数计量进度//
    var myChart = echarts.init(document.getElementById('chartContainer4'));
    var option = {
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        title : {
            text: '标段期进度'
        },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
        },
        dataZoom: [
            {show: true,start: 0, end: 100}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'完成度',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'本期合同计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '合同',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'本期数量变更计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '合同',
                data:[320, -20, 301, 334, 390, 330, 320]
            },
            {
                name:'截至上期累计完成',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'本期完成计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'完成度',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[10, 15, 20, 13, 11, 9, 5]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //4 标段期数计量进度//
    //3 标段月进度//
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chartContainer3'));
    var option = {
        color:["#e9af68","#57b7b6"],
        title : {
            text: '标段月进度'
        },
        tooltip : {
            trigger: 'axis',
            formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
        },
        legend: {
            data:['累计完成','本月完成']
        },
        toolbox: {
            show : true,
            feature : {
                magicType : {show: true, type: ['line', 'bar']}
            }
        },
        dataZoom : {
            show : true,
            start : 50,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : [
                    '2月','3月','4月','5月','6月','7月','8月','9月','10月'
                ]
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} %'
                },
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'累计完成',
                type:'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
            },
            {
                name:'本月完成',
                type:'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //3 标段月进度//
</script>
<script>
    let property = JSON.parse('<%- JSON.stringify(tenderInfo) %>');
</script>
<script type="text/javascript" src="/public/js/tender.js"></script>