计划图表

app/controller/schedule_controller.js

@@ -29,7 +29,11 @@ module.exports = app => {
 
         async index(ctx) {
             try {
+                const scheduleInfo = await ctx.service.schedule.getDataByCondition({ tid: ctx.tender.id });
+                const scheduleMonth = await ctx.service.scheduleMonth.getAllDataByCondition({ where: { tid: ctx.tender.id }, orders: [['yearmonth', 'asc']] });
                 const renderData = {
+                    scheduleInfo,
+                    scheduleMonth,
                     tender: ctx.tender.data,
                     tenderMenu: this.menu.tenderMenu,
                     planMonth: await this._getLastPlanMonth(ctx),

app/view/schedule/index.ejs

@@ -19,10 +19,10 @@
                     <div class="col-12 mb-4">
                         <ul class="nav nav-tabs justify-content-center">
                             <li class="nav-item">
-                                <a class="nav-link px-5 py-2 active" href="#">金额模式</a>
+                                <a class="nav-link px-5 py-2 active" href="#tp" id="tp-tab" data-toggle="tab" role="tab" aria-controls="tp" aria-selected="true">金额模式</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link px-5 py-2" href="#">工程量模式</a>
+                                <a class="nav-link px-5 py-2" href="#gcl" id="gcl-tab" data-toggle="tab" role="tab" aria-controls="gcl" aria-selected="false">工程量模式</a>
                             </li>
                         </ul>
                     </div>
@@ -31,7 +31,7 @@
                         <div class="col-auto p-0">
                             <div class="card text-center">
                                 <div class="card-body">
-                                    <h5 class="card-title">163,000.00 <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占设计比例">20%</small></h5>
+                                    <h5 class="card-title"><%- scheduleInfo ? ctx.helper.formatNum(scheduleInfo.plan_tp, '#,##0.######') : '' %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占设计比例">20%</small></h5>
                                     <p class="card-text text-muted">计划完成金额</p>
                                 </div>
                             </div>
@@ -47,47 +47,55 @@
                         <div class="col-auto pr-0">
                             <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="占设计比例">15%</small></h5>
+                                    <h5 class="card-title"><%- scheduleInfo ? ctx.helper.formatNum(scheduleInfo.sj_tp, '#,##0.######') : '' %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占设计比例">15%</small></h5>
                                     <p class="card-text text-muted">实际完成金额</p>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <!--进度条-->
-                    <div class="mb-3">
-                        计划工程量进度
-                        <div class="progress">
-                            <div class="progress-bar bg-info" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成工程量：30,000.00">24%</div>
-                            <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：930,00.00">66%</div>
-                        </div>
-                        <p class="mt-2 mb-0">实际工程量进度</p>
-                        <div class="progress">
-                            <div class="progress-bar bg-info" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成工程量：40,000.00">18%</div>
-                            <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：930,00.00">72%</div>
-                        </div>
-                        <p class="mt-2 mb-0">计划金额进度（万元）</p>
-                        <div class="progress">
-                            <div class="progress-bar bg-success" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成金额：￥300.00">24%</div>
-                            <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：￥930.00">66%</div>
-                        </div>
-                        <p class="mt-2 mb-0">实际金额进度哦（万元）</p>
-                        <div class="progress">
-                            <div class="progress-bar bg-success" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成金额：￥400.00">18%</div>
-                            <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：￥930.00">72%</div>
-                        </div>
-                    </div>
-                    <!--图表-->
-                    <div class="card mb-3">
-                        <div class="card-body">
-                            <h5 class="card-title">工程量进度表</h5>
-                            <div id="chartContainer3" style="height: 300px; width: 100%;">
+                    <div class="tab-content">
+                        <div id="tp" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tp-tab">
+                            <!--进度条-->
+                            <div class="mb-3">
+                                计划金额进度（元）
+                                <div class="progress">
+                                    <div class="progress-bar bg-success" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成金额：￥300.00">24%</div>
+                                    <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：￥930.00">66%</div>
+                                </div>
+                                <p class="mt-2 mb-0">实际金额进度哦（元）</p>
+                                <div class="progress">
+                                    <div class="progress-bar bg-success" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成金额：￥400.00">18%</div>
+                                    <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：￥930.00">72%</div>
+                                </div>
+                            </div>
+                            <div class="card mb-3">
+                                <div class="card-body">
+                                    <h5 class="card-title">完成金额进度表</h5>
+                                    <div id="chartContainer4" style="height: 300px; width: 100%;">
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="card mb-3">
-                        <div class="card-body">
-                            <h5 class="card-title">完成金额进度表</h5>
-                            <div id="chartContainer4" style="height: 300px; width: 100%;">
+                        <div id="gcl" class="tab-pane fade" role="tabpanel" aria-labelledby="gcl-tab">
+                            <div class="mb-3">
+                                计划工程量进度
+                                <div class="progress">
+                                    <div class="progress-bar bg-info" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成工程量：30,000.00">24%</div>
+                                    <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：930,00.00">66%</div>
+                                </div>
+                                <p class="mt-2 mb-0">实际工程量进度</p>
+                                <div class="progress">
+                                    <div class="progress-bar bg-info" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成工程量：40,000.00">18%</div>
+                                    <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：930,00.00">72%</div>
+                                </div>
+                            </div>
+                            <!--图表-->
+                            <div class="card mb-3">
+                                <div class="card-body">
+                                    <h5 class="card-title">工程量进度表</h5>
+                                    <div id="chartContainer3" style="height: 300px; width: 100%;">
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -98,10 +106,11 @@
 </div>
 <script src="/public/js/echarts/echarts.min.js"></script>
 <script type="text/javascript">
+    var charts = new Array();
     //计划进度//
     // 基于准备好的dom，初始化echarts图表
-    var myChart = echarts.init(document.getElementById('chartContainer3'));
-    var option = {
+    var myChart2 = echarts.init(document.getElementById('chartContainer3'));
+    var option2 = {
         color: ['#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
             '#17a2b8','#28a745','#e4575a','#959eac','#6699FF',
             '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
@@ -123,7 +132,11 @@
             {
                 type : 'category',
                 splitLine : {show : true},
-                data : ['2020年1月','2020年2月','2020年3月','2020年4月','2020年5月','2020年6月','2020年7月']
+                data : [<% if (scheduleMonth.length > 0) { %>
+                    <% for (const sm of scheduleMonth) { %>
+                        '<%- sm.yearmonth.split('-')[0] %>年<%- parseInt(sm.yearmonth.split('-')[1]) %>月',
+                    <% } %>
+                <% } %>],
             }
         ],
         yAxis : [
@@ -152,26 +165,35 @@
                 type:'bar',
                 tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}"},
                 stack: '计划',
-                data:[320, 332, 301, 334, 390, 330, 320]
+                data:[<% if (scheduleMonth.length > 0) { %>
+                    <% for (const sm of scheduleMonth) { %>
+                    '<%- sm.plan_gcl  %>',
+                    <% } %>
+                    <% } %>]
             },
             {
                 name:'实际完成工程量',
                 type:'bar',
                 tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}"},
                 stack: '实际',
-                data:[310, 330, 301, 334, 390, 330, 320]
+                data:[<% if (scheduleMonth.length > 0) { %>
+                    <% for (const sm of scheduleMonth) { %>
+                    '<%- sm.sj_gcl  %>',
+                    <% } %>
+                    <% } %>]
             },
             {
                 name:'实际占设计比例',
                 type:'line',
                 tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                 yAxisIndex: 1,
-                data:[10, 15, 20, 13, 11, 9, 5]
+                data:[10, 15, 20, 13, 11,]
             },
         ]
     };
     // 为echarts对象加载数据
-    myChart.setOption(option);
+    myChart2.setOption(option2);
+    charts.push(myChart2);
     //4 完成金额进度进度//
     var myChart = echarts.init(document.getElementById('chartContainer4'));
     var option = {
@@ -196,7 +218,11 @@
             {
                 type : 'category',
                 splitLine : {show : true},
-                data : ['2020年1月','2020年2月','2020年3月','2020年4月','2020年5月','2020年6月','2020年7月']
+                data : [<% if (scheduleMonth.length > 0) { %>
+                <% for (const sm of scheduleMonth) { %>
+                    '<%- sm.yearmonth.split('-')[0] %>年<%- parseInt(sm.yearmonth.split('-')[1]) %>月',
+                <% } %>
+            <% } %>]
             }
         ],
         yAxis : [
@@ -205,7 +231,7 @@
                 name : '金额',
                 position:'left',
                 axisLabel : {
-                    formatter: '{value} 万元'
+                    formatter: '{value} 元'
                 },
                 splitArea : {show : true}
             },
@@ -223,29 +249,38 @@
             {
                 name:'计划完成金额',
                 type:'bar',
-                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}万元"},
+                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}元"},
                 stack: '计划',
-                data:[320, 332, 301, 334, 390, 330, 320]
+                data:[<% if (scheduleMonth.length > 0) { %>
+                    <% for (const sm of scheduleMonth) { %>
+                    '<%- sm.plan_tp  %>',
+                    <% } %>
+                    <% } %>]
             },
             {
                 name:'实际完成金额',
                 type:'bar',
-                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}万元"},
+                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}元"},
                 stack: '实际',
-                data:[310, 330, 301, 334, 390, 330, 320]
+                data:[<% if (scheduleMonth.length > 0) { %>
+                    <% for (const sm of scheduleMonth) { %>
+                    '<%- sm.sj_tp  %>',
+                    <% } %>
+                    <% } %>]
             },
             {
                 name:'实际占合同比例',
                 type:'line',
                 tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                 yAxisIndex: 1,
-                data:[10, 15, 20, 13, 11, 9, 5]
+                data:[10, 15, 20, 13, 11,]
             },
         ]
     };
 
     // 为echarts对象加载数据
     myChart.setOption(option);
+    charts.push(myChart);
 </script>
 <!--sjs-->
 <script>
@@ -295,6 +330,12 @@
                 精度:3,
             }
         ];
+
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+            for(var i = 0; i < charts.length; i++) {
+                charts[i].resize();
+            }
+        });
         // const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
         //     sheetCount: 1
         // });

app/view/tender/tender_sub_menu.ejs

@@ -43,14 +43,14 @@
                 <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/measure/material') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/measure/material"><i class="fa fa-line-chart"></i> <span>材料调差</span></a></li>
             </ul>
         </div>
-        <!--<div class="nav-box">-->
-            <!--<h3><i class="fa fa-bar-chart "></i> 形象进度</h3>-->
-            <!--<ul class="nav-list list-unstyled sub-list">-->
-                <!--<li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/ledger') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule"><span>进度概况</span></a></li>-->
-                <!--<li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/plan') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/plan"><span>计划进度</span></a></li>-->
-                <!--<li <% if (ctx.url.indexOf('/tender/' + ctx.tender.id + '/schedule/stage') !== -1) { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/stage"><span>计量进度</span></a></li>-->
-            <!--</ul>-->
-        <!--</div>-->
+        <div class="nav-box">
+            <h3><i class="fa fa-bar-chart "></i> 形象进度</h3>
+            <ul class="nav-list list-unstyled sub-list">
+                <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/ledger') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule"><span>进度概况</span></a></li>
+                <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/plan') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/plan"><span>计划进度</span></a></li>
+                <li <% if (ctx.url.indexOf('/tender/' + ctx.tender.id + '/schedule/stage') !== -1) { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/stage"><span>计量进度</span></a></li>
+            </ul>
+        </div>
         <div class="nav-box">
             <ul class="nav-list list-unstyled">
                 <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/report') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/report"><i class="fa fa-file-text-o"></i> <span>报表</span></a></li>

app/view/tender/tender_sub_mini_menu.ejs

@@ -41,14 +41,14 @@
                 <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/measure/material') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/measure/material"><i class="fa fa-line-chart"></i> <span>材料调差</span></a></li>
             </ul>
         </div>
-        <!--<div class="nav-box">-->
-            <!--<h3><i class="fa fa-bar-chart "></i> 形象进度</h3>-->
-            <!--<ul class="nav-list list-unstyled sub-list">-->
-                <!--<li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/ledger') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule"><span>进度概况</span></a></li>-->
-                <!--<li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/plan') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/plan"><span>计划进度</span></a></li>-->
-                <!--<li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/stage' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/stage/gcl') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/stage"><span>计量进度</span></a></li>-->
-            <!--</ul>-->
-        <!--</div>-->
+        <div class="nav-box">
+            <h3><i class="fa fa-bar-chart "></i> 形象进度</h3>
+            <ul class="nav-list list-unstyled sub-list">
+                <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/ledger') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule"><span>进度概况</span></a></li>
+                <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/plan') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/plan"><span>计划进度</span></a></li>
+                <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/schedule/stage' || ctx.url === '/tender/' + ctx.tender.id + '/schedule/stage/gcl') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/schedule/stage"><span>计量进度</span></a></li>
+            </ul>
+        </div>
         <div class="nav-box">
             <ul class="nav-list list-unstyled">
                 <li <% if (ctx.url === '/tender/' + ctx.tender.id + '/report') { %>class="active"<% } %>><a href="/tender/<%- ctx.tender.id %>/report"><i class="fa fa-file-text-o"></i> <span>报表</span></a></li>