标段概况白天模式切换

app/const/tender_info.js

@@ -113,7 +113,8 @@ const defaultInfo = {
         stage: {
             realComplete: false,
             correct: true,
-        }
+        },
+        dayMode: false,
     },
     chapter: [
         {code: '100', name: '总则'},

app/public/css/main.css

@@ -506,6 +506,17 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   border:none ;
   border-bottom:2px solid #fff;
 }
+.nav-tabs.nav-white-tabs.panel-card-tabs .nav-link{
+  color:#495057;
+}
+.nav-tabs.nav-white-tabs.panel-card-tabs .nav-link.active{
+  color:#495057;
+  border-bottom:2px solid #007bff;
+}
+.nav-tabs.nav-white-tabs.panel-card-tabs .nav-link:hover{
+  color:#007bff;
+  border-bottom:2px solid #007bff;
+}
 .panel-card-header {
   background-image: linear-gradient(to top, #586579, #2c3237 );
 }
@@ -785,6 +796,9 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   padding:1px;
   background:#fff;
 }
+.c-body-white{
+  background: none;
+}
 .right-nav{
   width:36px
 }
@@ -1048,7 +1062,11 @@ label{
   width:120px;
 }
 .panel-sidebar .scrollbar-auto{
-  padding-top:0;
+  padding-top: 0;
+  /*padding-top:35px;*/
+}
+.panel-sidebar .show-back{
+  padding-top: 35px;
 }
 .nav-list li a{
   padding-right:0px;
@@ -1528,7 +1546,7 @@ overflow-y: auto;
   line-height: 200%;
 }
 .border-bottom-grey-1{
-  border-bottom: 1px solid #464647;
+  border-bottom: 1px solid rgba(0,0,0,.125);
 }
 .height-100{
   height: 100%;
@@ -1551,7 +1569,7 @@ overflow-y: auto;
 .height-20{
   height: 19%;
 }
-#review_box, #review_box2{
+#review_box,#review_box2{
   height: 100%;
   overflow: hidden;
 }
@@ -1577,16 +1595,17 @@ overflow-y: auto;
   width:100%;
 }
 .tablebox table th,.tablebox table td {
-  padding: 5px 0;
+  padding: 5px 10px;
 }
 .tablebox table th {
   color:#fff;
+  /*background-color:#fff;*/
   background-color:#2C3034;
 }
 .tablebox table tbody tr{
   background-color:#2C3034;
   color: #fff;
-  border-bottom: 1px solid #464647;
+  border-bottom: 1px solid rgba(0,0,0,.125);
 }
 .left-small-card-content,.right-small-card-content{
   height: 12%;
@@ -1720,3 +1739,71 @@ overflow-y: auto;
   line-height: 18px;
   color: rgba(0, 0, 0, 0.6);
 }
+.card-icon{
+  display: inline-block;
+  width: 4px;
+  height: 12px;
+  background: rgba(51, 119, 255, 1);
+}
+.btn-table{
+  width: 70px;
+  text-align: center;
+}
+.bg-tsshenpi{
+  background: rgba(241, 82, 91, 0.08) !important;
+}
+.bg-tsxiuding{
+  background: rgba(250, 140, 22, 0.08) !important;
+}
+.bg-jlshenpi{
+  background: rgba(251, 182, 45, 0.08) !important;
+}
+.bg-bgshenpi{
+  background: rgba(82, 196, 26, 0.08) !important;
+}
+.bg-cltiaocha{
+  background: rgba(51, 119, 255, 0.08) !important;
+}
+.bg-yfukuan{
+  background: rgba(114, 46, 209, 0.08) !important;
+}
+.text-tsshenpi{
+  color: rgba(241, 82, 91, 1) !important;
+}
+.text-tsxiuding{
+  color: rgba(250, 140, 22, 1) !important;
+}
+.text-jlshenpi{
+  color: rgba(251, 182, 45, 1) !important;
+}
+.text-bgshenpi{
+  color: rgba(82, 196, 26, 1) !important;
+}
+.text-cltiaocha{
+  color: rgba(51, 119, 255, 1) !important;
+}
+.text-yfukuan{
+  color: rgba(114, 46, 209, 1) !important;
+}
+.text-width{
+  width: 66px;
+  text-align: center;
+}
+.table-middle td, .table-middle th{
+  padding: 0.6rem;
+}
+.table-middle .thead-light th {
+  color: #495057;
+  background-color: rgba(250, 250, 250, 1);
+  border-color: #dee2e6;
+}
+.table-middle thead th{
+  border-bottom: none;
+}
+.card-white{
+  background: rgba(255, 255, 255, 1) !important;
+  border-bottom: none;
+}
+.dark-color{
+    background-color:#2c3237 !important;
+}

app/view/tender/detail.ejs

@@ -57,7 +57,7 @@
         </div>
     </div>
     <div class="content-wrap" id="big-data">
-        <div style="height: 70px;background-color: #2c3237; display: none" id="exitfull-div">
+        <div <% if (ctx.tender.info.display.dayMode) { %>class="dark-color"<% } %> style="height: 70px;display: none" id="exitfull-div">
             <div class="title-main d-flex">
                 <div class="ml-auto">
                     <div class="dropdown d-flex float-left mt-1 mr-2">
@@ -66,7 +66,7 @@
                 </div>
             </div>
         </div>
-        <div class="c-body" style="background:#2c3237 !important">
+        <div class="c-body <% if (ctx.tender.info.display.dayMode) { %>c-body-white<% } else { %>dark-color<% } %>">
             <div class="sjs-height-0">
             <!--<div class="auto-main-height">-->
                 <div class="main-height-one">
@@ -76,7 +76,7 @@
                             <div class="col-12">
                                 <div class="row">
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.total_price) %></h5>
                                                 <p class="card-text text-muted">0号台账合同</p>
@@ -84,7 +84,7 @@
                                         </div>
                                     </div>
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.end_qc_tp) %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占合同比例"><%- tender.qc_ratio %>%</small></h5>
                                                 <p class="card-text text-muted">截止本期变更</p>
@@ -92,7 +92,7 @@
                                         </div>
                                     </div>
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.gather_tp) %></h5>
                                                 <p class="card-text text-muted">本期完成</p>
@@ -100,7 +100,7 @@
                                         </div>
                                     </div>
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.end_gather_tp) %></h5>
                                                 <p class="card-text text-muted">截止本期完成</p>
@@ -108,7 +108,7 @@
                                         </div>
                                     </div>
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.pre_gather_tp) %></h5>
                                                 <p class="card-text text-muted">截止上期完成</p>
@@ -116,7 +116,7 @@
                                         </div>
                                     </div>
                                     <div class="col-2 pl-0">
-                                        <div class="card text-center bg-dark text-white">
+                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                             <div class="card-body">
                                                 <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.yf_tp) %></h5>
                                                 <p class="card-text text-muted">本期应付</p>
@@ -148,7 +148,7 @@
                         <div class="row">
                             <div class="col-3">
                                 <!--计量完成概况-->
-                                <div class="card mb-3 bg-dark text-white">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <div class="card-header"><h6 class="mb-0">计量完成概况</h6></div>
                                     <div class="card-body">
                                         <div id="jlchart1" style="height: 100%; width: 100%;">
@@ -156,7 +156,7 @@
                                     </div>
                                 </div>
                                 <!--支付情况-->
-                                <div class="card mb-3 bg-dark text-white">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <div class="card-header"><h6 class="mb-0">支付情况</h6></div>
                                     <div class="card-body">
                                         <div id="jlchart2" style="height: 100%; width: 100%;">
@@ -166,7 +166,7 @@
                             </div>
                             <!--章节计量情况图-->
                             <div class="col-6 pl-0">
-                                <div class="card mb-3 bg-dark text-white">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <% if (hadMap) { %>
                                         <div class="card-body" id="map" style="height: 388px; width: 100%;">
                                         </div>
@@ -181,7 +181,7 @@
                             </div>
                             <div class="col-3 pl-0">
                                 <!--台账审批进度-->
-                                <div class="card mb-3 bg-dark text-white">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <div class="card-header"><h6 class="mb-0"><% if (lastStage) { %>计量审批进度<% } else { %>台账审批进度<% } %></h6></div>
                                     <div class="card-body">
                                         <div style="">
@@ -261,9 +261,9 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="card mb-3 bg-dark text-white">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <div class="card-header">
-                                        <ul class="nav nav-tabs card-header-tabs panel-card-tabs">
+                                        <ul class="nav nav-tabs card-header-tabs panel-card-tabs <% if (ctx.tender.info.display.dayMode) { %>nav-white-tabs<% } %>">
                                             <li class="nav-item">
                                                 <a class="nav-link active" data-toggle="tab" href="#taizhangshenpi" role="tab" aria-selected="true">工程变更进度</a>
                                             </li>
@@ -307,7 +307,7 @@
                                                                 <% } %>
                                                             </div>
                                                         </div>
-                                                        <table class="table table-bordered table-2sm mb-0 mt-1 table-dark">
+                                                        <table class="table table-bordered table-2sm mb-0 mt-1 <% if (!ctx.tender.info.display.dayMode) { %>table-dark<% } %>">
                                                             <% if (materialData) { %>
                                                                 <tr><th width="60%">含税(信息价/指数法)</th><td width="20%"><%= materialData.m_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.m_tp, 1+materialData.rate/100), 2) : '0' %></td><td width="20%"><%= materialData.ex_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.ex_tp, 1+materialData.rate/100), 2) : '0' %></td></tr>
                                                                 <tr><th>不含税(信息价/指数法)</th><td><%= materialData.m_tp !== null ? ctx.helper.round(materialData.m_tp, 2) : '0' %></td><td><%= materialData.ex_tp !== null ? ctx.helper.round(materialData.ex_tp, 2) : '0' %></td></tr>
@@ -325,7 +325,7 @@
                             </div>
                             <!--期进度表-->
                             <div class="col-6">
-                                <div class="card mb-3 bg-dark text-white bottom-height">
+                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %> bottom-height">
                                     <% if (hadMap) { %>
                                         <div class="card-header"><h6 class="mb-0">章节计量情况表</h6></div>
                                         <div class="card-body">
@@ -341,10 +341,10 @@
                             </div>
                             <!--月进度表-->
                             <div class="col-6 pl-0">
-                                <div class="card mb-3 bg-dark text-white bottom-height">
+                                <div class="card mb-3 bottom-height <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                     <% if (hadMap) { %>
                                         <div class="card-header">
-                                            <ul class="nav nav-tabs card-header-tabs panel-card-tabs" id="change-echarts">
+                                            <ul class="nav nav-tabs card-header-tabs panel-card-tabs <% if (ctx.tender.info.display.dayMode) { %>nav-white-tabs<% } %>" id="change-echarts">
                                                 <li class="nav-item">
                                                     <a class="nav-link active" data-toggle="tab" href="#qijindubiao" role="tab" aria-selected="true">期进度表</a>
                                                 </li>
@@ -385,10 +385,10 @@
     const tender = JSON.parse('<%- JSON.stringify(tender) %>');
     const cur_uid = parseInt('<%- ctx.session.sessionUser.accountId %>');
     //计量完成概况//
-    var myChart = echarts.init(document.getElementById('jlchart1'), 'dark');
+    var myChart = echarts.init(document.getElementById('jlchart1')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option = {
         color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         tooltip: {
             trigger: 'item'
         },
@@ -432,9 +432,9 @@
     myChart.setOption(option);
     //计量完成概况 结束//
     //计量支付概况//
-    var myChart1 = echarts.init(document.getElementById('jlchart2'), 'dark');
+    var myChart1 = echarts.init(document.getElementById('jlchart2')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option1 = {
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -497,10 +497,10 @@
     myChart1.setOption(option1);
     //计量支付概况 结束//
     //章节计量情况图//
-    var myChart2 = echarts.init(document.getElementById('jlchart3'), 'dark');
+    var myChart2 = echarts.init(document.getElementById('jlchart3')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option2 = {
         color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -586,10 +586,10 @@
     myChart2.setOption(option2);
 
     //4 标段期数计量进度//
-    var myChart3 = echarts.init(document.getElementById('chartContainer4'), 'dark');
+    var myChart3 = echarts.init(document.getElementById('chartContainer4')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option3 = {
         color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(204,73,80,0.7)','rgba(58,207,221,0.7)','rgba(255,255,225,0.7)'],
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         title : {
             text: ''
         },
@@ -753,10 +753,10 @@
     //4 标段期数计量进度//
     //3 标段月进度//
     // 基于准备好的dom，初始化echarts图表
-    var myChart4 = echarts.init(document.getElementById('chartContainer3'), 'dark');
+    var myChart4 = echarts.init(document.getElementById('chartContainer3')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option4 = {
         color:["#17a2b8","#28a745"],
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         title : {
             text: ''
         },
@@ -911,10 +911,10 @@
     //3 标段月进度//
 
     //变更审批进度//
-    var myChart5 = echarts.init(document.getElementById('bgchart'), 'dark');
+    var myChart5 = echarts.init(document.getElementById('bgchart')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
     var option5 = {
         color: ['rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(255,255,225,0.7)'],
-        backgroundColor: '#343a40 ',
+        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
         tooltip: {
             trigger: 'item'
         },
@@ -1371,7 +1371,9 @@
             // const LocationControl = new BMapGL.LocationControl();  // 添加比例尺控件
             // map.addControl(LocationControl);
             map.enableScrollWheelZoom(true);
+            <% if (!ctx.tender.info.display.dayMode) { %>
             map.setMapStyleV2({styleId: '20d4aea41cf71387395f2dc835f1c4b6'});
+            <% } %>
             if (polyLineList.length > 0) {
                 for (const pl of polyLineList) {
                     const polyline = new BMapGL.Polyline(pl.map, {strokeColor: pl.color, strokeWeight:10, strokeOpacity:1});

app/view/tender/detail_modal.ejs

@@ -710,6 +710,10 @@
                         <input type="checkbox" class="custom-control-input" checked="" id="stage-correct">
                         <label class="custom-control-label" for="stage-correct">使用数量纠正完成率</label>
                     </div>
+                    <div class="custom-control custom-checkbox mb-2">
+                        <input type="checkbox" class="custom-control-input" checked="" id="dayMode">
+                        <label class="custom-control-label" for="dayMode">标段概况-浅色模式</label>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
@@ -1481,6 +1485,7 @@
         $('#thousandth')[0].checked = property.display.thousandth;
         $('#stage-rc')[0].checked = property.display.stage.realComplete;
         $('#stage-correct')[0].checked = property.display.stage.correct;
+        $('#dayMode')[0].checked = property.display.dayMode;
     }
     $('#bd-set-5').on('show.bs.modal', function () {
         loadDisplayProperty();
@@ -1491,12 +1496,17 @@
                 ledger: { dgnQty: $('#ledger-dgn-qty')[0].checked, clQty: $('#ledger-cl-qty')[0].checked, },
                 thousandth: $('#thousandth')[0].checked,
                 stage: { realComplete: $('#stage-rc')[0].checked, correct: $('#stage-correct')[0].checked },
+                dayMode: $('#dayMode')[0].checked,
             },
         };
         const tenderId = window.location.pathname.split('/')[2];
         postData('/tender/' + tenderId + '/save', prop, function (data) {
-            property.display = data.display;
-            $('#bd-set-5').modal('hide');
+            if (data.display.dayMode !== property.display.dayMode) {
+                window.location.reload();
+            } else {
+                property.display = data.display;
+                $('#bd-set-5').modal('hide');
+            }
         });
     }