浏览代码

地图改版及部分提交

laiguoran 3 年之前
父节点
当前提交
fdcdf8848d

+ 1 - 1
app/controller/tender_controller.js

@@ -532,7 +532,7 @@ module.exports = app => {
                 ];
                 // 地图
                 const tenderALLInfo = await ctx.service.tender.getDataById(tender.id);
-                const hadMap = tenderALLInfo.had_map === 1 ? 0 : 1;
+                const hadMap = tenderALLInfo.had_map === 0 ? 1 : tenderALLInfo.had_map;// 0为初始值,因为默认可能会变化,所以暂时把0都默认为1。共三种模式坐标模式1,图片模式2,无图模式3。
                 const tenderMapList = await ctx.service.tenderMap.getAllDataByCondition({ where: { tid: tender.id } });
                 // 默认坐标,否则则取办事处坐标
                 const projectData = await ctx.service.project.getDataById(ctx.session.sessionProject.id);

+ 52 - 19
app/public/css/main.css

@@ -87,7 +87,7 @@ font-size: .875rem;
 }
 .custom-control-warning-input:checked ~ .custom-control-warning-label::before{
   border-color:#da9500 ;
-  background-color:#da9500
+  background-color:#da9500 
 }
 .custom-control-warning-label{
   color:#da9500;
@@ -195,23 +195,23 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 /*滚动条*/
 /* 滚动条 */
 /*水平滚动条的样式*/
-/*::-webkit-scrollbar-thumb:horizontal {
+/*::-webkit-scrollbar-thumb:horizontal { 
 	width: 5px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
 }*/
 /*滚动条的背景颜色,滚动条的圆角宽度*/
 /*::-webkit-scrollbar-track-piece {
-	background-color: #efefef;
-	-webkit-border-radius: 0;
+	background-color: #efefef; 
+	-webkit-border-radius: 0; 
 }*/
 /*滚动条的宽度,滚动条的高度*/
 /*::-webkit-scrollbar {
-	width: 14px;
-	height: 14px;
+	width: 14px; 
+	height: 14px; 
 }*/
 /*垂直滚动条的样式*/
-/*::-webkit-scrollbar-thumb:vertical {
+/*::-webkit-scrollbar-thumb:vertical { 
 	height: 50px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
@@ -220,7 +220,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 	border: 1px solid #ced4da;
 }*/
 /*滚动条的hover样式*/
-/*::-webkit-scrollbar-thumb:hover {
+/*::-webkit-scrollbar-thumb:hover { 
 	height: 50px;
 	background-color: #ced4da;
 	-webkit-border-radius: 0;
@@ -830,6 +830,10 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   height:450px;
   overflow: hidden
 }
+.modal-height-400{
+  height:400px;
+  overflow: hidden
+}
 .modal-height-300{
   height:300px;
   overflow:auto
@@ -870,7 +874,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   font-size: 14px
 }
 .bd-toc {
-
+  
     position: sticky;
     top:3rem;
     height: calc(100vh - 10rem);
@@ -1028,7 +1032,7 @@ body{
   line-height: 30px;
 }
 .panel-title > .title-main .btn.pull-right {
-    margin: 5px 0 0 0
+    margin: 5px 0 0 0 
 }
 .panel-content{
   padding-top:35px;
@@ -1055,8 +1059,7 @@ label{
   font-size:100%;
 }
 .modal-header{
-  padding:.5rem 1rem;
-  cursor: move;
+  padding:.5rem 1rem
 }
 .modal-title{
   font-size:16px;
@@ -1247,7 +1250,7 @@ a.maintain-icon .fa{
     }
 }
 
-a.maintain-icon:hover .fa{
+a.maintain-icon:hover .fa{ 
     animation-iteration-count:0
 }
 /*审批列表*/
@@ -1370,10 +1373,10 @@ overflow-y: auto;
   position: relative;
 }
 .circle{
-  width: 62px;
+  width: 62px; 
   height: 62px;
   border-radius: 50%;
-  background: none;
+  background: none; 
   border: 4px solid #D7B014;
 }
 .circle-num{
@@ -1914,8 +1917,8 @@ overflow-y: auto;
   font-size: 36px;
 }
 .list-text-vertical{
-  overflow:hidden;
-  text-overflow:ellipsis;
+  overflow:hidden; 
+  text-overflow:ellipsis; 
   white-space:nowrap;
 }
 .about-text i{
@@ -1939,12 +1942,12 @@ overflow-y: auto;
 }
 /*@media (min-width: 768px){
   .weixin-erweima img{
-    width:90%;
+    width:90%; 
     height:auto;
   }
 }*/
 .weixin-erweima img{
-  width:75%;
+  width:75%; 
   height:auto;
 }
 .weixin-erweima span{
@@ -1984,3 +1987,33 @@ animation:shake 1s .2s ease both;}
 .margin-inputbox .height-inputbox{
   height: 30px !important;
 }
+.card-gk-width{
+  width: 352px;
+  border: none;
+  cursor: pointer;
+}
+.card-gk-width:hover{
+  background: #f7f7f7;
+}
+.modal-body .card-gk-title{
+  font-size: 16px;
+}
+.card-gk-active{
+  border: 1px solid #3377FF;
+}
+.sel-width{
+  width: 20px;
+  height: 20px;
+}
+.sel-blue{
+  background: url(sel_blue.png);
+}
+.card-gk-width:hover .sel-gary{
+  background: url(sel_gary.png);
+}
+.card-gk-bottom{
+  display:none ;
+}
+.card-gk-active .card-gk-bottom{
+  display: inline-block;
+}

二进制
app/public/css/sel_blue.png


二进制
app/public/css/sel_gary.png


二进制
app/public/images/dongtai.png


二进制
app/public/images/jingtai.png


二进制
app/public/images/tubiaoban.png


+ 5 - 5
app/view/tender/detail.ejs

@@ -183,7 +183,7 @@
                             <!--章节计量情况图-->
                             <div class="col-6 pl-0">
                                 <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
-                                    <% if (hadMap) { %>
+                                    <% if (hadMap === 1) { %>
                                         <div class="card-body" id="map" style="height: 388px; width: 100%;">
                                         </div>
                                     <% } else  { %>
@@ -342,7 +342,7 @@
                             <!--期进度表-->
                             <div class="col-6">
                                 <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %> bottom-height">
-                                    <% if (hadMap) { %>
+                                    <% if (hadMap === 1) { %>
                                         <div class="card-header"><h6 class="mb-0">章节计量情况表</h6></div>
                                         <div class="card-body">
                                             <div id="jlchart3" style="height: 300px; width: 100%;"></div>
@@ -358,7 +358,7 @@
                             <!--月进度表-->
                             <div class="col-6 pl-0">
                                 <div class="card mb-3 bottom-height <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
-                                    <% if (hadMap) { %>
+                                    <% if (hadMap === 1) { %>
                                         <div class="card-header">
                                             <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">
@@ -1341,14 +1341,14 @@
         };
     })
 </script>
-<% if (hadMap || ctx.session.sessionUser.is_admin) { %>
+<% if (hadMap === 1 || ctx.session.sessionUser.is_admin) { %>
     <script src="/public/js/map/turf.min.js"></script>
     <script src="/public/js/map/gcoord.js"></script>
     <script>
         const tenderMapList = JSON.parse(unescape('<%- escape(JSON.stringify(tenderMapList)) %>'));
     </script>
 <% } %>
-<% if (hadMap) { %>
+<% if (hadMap === 1) { %>
     <!--<script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>-->
     <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=C3hLZAjuWTaCdwnwoYY83APrwlPEj4v7"></script>
     <script type="text/javascript">

+ 96 - 42
app/view/tender/detail_modal.ejs

@@ -2039,43 +2039,61 @@
 </script>
 <!--概况设置-->
 <div class="modal fade" id="bd-set-11" data-backdrop="static">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">概况设置</h5>
             </div>
-            <div class="modal-body">
-                <div class="row">
-                    <div class="col-6">
-                        <div class="card <% if (!hadMap) { %>border-dark<% } %>">
-                            <div class="card-body">
-                                <h5 class="card-title"><i class="fa fa-bookmark"></i> 无地图版</h5>
-                                <p class="card-text">概况中间展示图表</p>
-                                <% if (hadMap) { %>
-                                <a href="javascript:void(0);" data-value="1" class="btn select-map btn-primary btn-sm">选择</a>
-                                <% } else { %>
-                                <a href="javascript:void(0);" data-value="1" class="btn btn-primary btn-sm disabled">当前</a>
-                                <% } %>
+            <div class="modal-body modal-height-400">
+                <div class="container-fluid">
+                    <div class="d-flex justify-content-between">
+                        <div class="map-set">
+                            <div class="card card-gk-width p-3 select-map <% if (hadMap === 3) { %>card-gk-active<% } %>" data-value="3">
+                                <div class="card-body p-0">
+                                    <h5 class="card-title card-gk-title">
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div>图表版</div>
+                                            <div class="sel-width <% if (hadMap === 3) { %>sel-blue<% } else { %>sel-gary<% } %>"></div>
+                                        </div>
+                                    </h5>
+                                    <div class="card-text">
+                                        <div class="my-4"><img src="/public/images/tubiaoban.png"></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="col-6">
-                        <div class="card <% if (hadMap) { %>border-dark<% } %>">
-                            <div class="card-body">
-                                <h5 class="card-title"><i class="fa fa-bookmark"></i> 地图版</h5>
-                                <p class="card-text">概况中间展示地图</p>
-                                <% if (!hadMap) { %>
-                                    <a href="javascript:void(0);" data-value="0" class="btn select-map btn-primary btn-sm">选择</a>
-                                <% } else { %>
-                                    <a href="javascript:void(0);" data-value="0" class="btn btn-primary btn-sm disabled">当前</a>
-                                <% } %>
-                                <a href="#bd-set-11-1" data-toggle="modal" data-target="#bd-set-11-1" data-dismiss="modal">编辑地图</a>
+                        <div class="map-set">
+                            <div class="card card-gk-width p-3 select-map <% if (hadMap === 1 || hadMap === 2) { %>card-gk-active<% } %>" data-value="<%- hadMap === 3 ? 1 : hadMap %>">
+                                <div class="card-body p-0">
+                                    <h5 class="card-title card-gk-title">
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div>地图版</div>
+                                            <div class="sel-width <% if (hadMap === 1 || hadMap === 2) { %>sel-blue<% } else { %>sel-gary<% } %>"></div>
+                                        </div>
+                                    </h5>
+                                    <div class="card-text">
+                                        <div class="my-4"><img src="<% if (hadMap === 1 || hadMap === 3) { %>/public/images/dongtai.png<% } else { %>/public/images/jingtai.png<% } %>"></div>
+                                    </div>
+                                </div>
+                                <div class="card-gk-bottom">
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
+                                            <button type="button" data-value="1" class="btn change-map btn-secondary">动态坐标</button>
+                                            <button type="button" data-value="2" class="btn change-map btn-outline-primary">静态图片</button>
+                                        </div>
+                                        <div>
+                                            <a href="#bd-set-11-1" class="show-map-edit" data-toggle="modal" data-target="#bd-set-11-1" data-dismiss="modal">编辑坐标</a>
+                                            <a href="javascript:void(0);" class="show-map-edit" style="display:none;">上传图片</a>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="modal-footer">
+                <input type="hidden" id="map-value" value="<%- hadMap %>">
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
                 <button type="button" class="btn btn-sm btn-primary" id="save-select-map" >确认修改</button>
             </div>
@@ -2104,7 +2122,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
-                <% if (hadMap) { %>
+                <% if (hadMap === 1) { %>
                 <button type="button" class="btn btn-sm btn-success" onclick="window.location.reload()" >刷新显示</button>
                 <% } %>
             </div>
@@ -2176,30 +2194,66 @@
     const hadMap = parseInt(<%- hadMap %>);
     $(function () {
         $('#bd-set-11').on('show.bs.modal', function () {
-            if (parseInt(hadMap) == 0) {
-                $('#bd-set-11').find('.card').eq(0).addClass('border-dark');
-                $('#bd-set-11').find('.card').eq(0).find('.btn').removeClass('select-map').addClass('disabled').text('当前');
-                $('#bd-set-11').find('.card').eq(1).removeClass('border-dark');
-                $('#bd-set-11').find('.card').eq(1).find('.btn').removeClass('disabled').addClass('select-map').text('选择');
-            } else {
-                $('#bd-set-11').find('.card').eq(1).addClass('border-dark');
-                $('#bd-set-11').find('.card').eq(1).find('.btn').removeClass('select-map').addClass('disabled').text('当前');
-                $('#bd-set-11').find('.card').eq(0).removeClass('border-dark');
-                $('#bd-set-11').find('.card').eq(0).find('.btn').removeClass('disabled').addClass('select-map').text('选择');
+            if (hadMap === 1 || hadMap === 2) {
+                $('#bd-set-11').find('.card').eq(1).addClass('card-gk-active');
+                $('#bd-set-11').find('.card').eq(1).find('.sel-width').removeClass('sel-gary').addClass('sel-blue');
+                $('#bd-set-11').find('.card').eq(0).removeClass('card-gk-active');
+                $('#bd-set-11').find('.card').eq(0).find('.sel-width').removeClass('sel-blue').addClass('sel-gary');
+                $('#bd-set-11').find('.card').eq(1).attr('data-value', hadMap);
+                if (hadMap === 1) {
+                    $('.change-map').eq(0).removeClass('btn-outline-primary').addClass('btn-secondary');
+                    $('.change-map').eq(1).removeClass('btn-secondary').addClass('btn-outline-primary');
+                    $('.show-map-edit').eq(0).show();
+                    $('.show-map-edit').eq(1).hide();
+                    $('#bd-set-11').find('.card').eq(1).find('img').attr('src', '/public/images/dongtai.png');
+                } else {
+                    $('.change-map').eq(1).removeClass('btn-outline-primary').addClass('btn-secondary');
+                    $('.change-map').eq(0).removeClass('btn-secondary').addClass('btn-outline-primary');
+                    $('.show-map-edit').eq(1).show();
+                    $('.show-map-edit').eq(0).hide();
+                    $('#bd-set-11').find('.card').eq(1).find('img').attr('src', '/public/images/jingtai.png');
+                }
+            } else if (hadMap === 3) {
+                $('#bd-set-11').find('.card').eq(0).addClass('card-gk-active');
+                $('#bd-set-11').find('.card').eq(0).find('.sel-width').removeClass('sel-gary').addClass('sel-blue');
+                $('#bd-set-11').find('.card').eq(1).removeClass('card-gk-active');
+                $('#bd-set-11').find('.card').eq(1).find('.sel-width').removeClass('sel-blue').addClass('sel-gary');
             }
+            $('#map-value').val(hadMap);
         })
         $('body').on('click', '#bd-set-11 .select-map', function () {
             // const val = parseInt($(this).data('value'));
-            $(this).parents('.card').addClass('border-dark');
-            $(this).removeClass('select-map').addClass('disabled').text('当前');
-            $(this).parents('.col-6').siblings('.col-6').children('.card').removeClass('border-dark');
-            $(this).parents('.col-6').siblings('.col-6').find('.btn').removeClass('disabled').addClass('select-map').text('选择');
+            $(this).addClass('card-gk-active');
+            $(this).find('.sel-width').removeClass('sel-gary').addClass('sel-blue');
+            $(this).parents('.map-set').siblings('.map-set').children('.card').removeClass('card-gk-active');
+            $(this).parents('.map-set').siblings('.map-set').find('.sel-width').removeClass('sel-blue').addClass('sel-gary');
+            $('#map-value').val($(this).attr('data-value'));
+        });
+        // 切换坐标和图片选择
+        $('.change-map').on('click', function (e) {
+            e.preventDefault();
+            event.stopPropagation();
+            if ($(this).hasClass('btn-outline-primary')) {
+                $(this).addClass('btn-secondary').removeClass('btn-outline-primary');
+                $(this).siblings('button').removeClass('btn-secondary').addClass('btn-outline-primary');
+                const value = $(this).attr('data-value');
+                $('#map-value').val(value);
+                if (parseInt(value) === 2) {
+                    $(this).parents('.card').find('img').attr('src', '/public/images/jingtai.png');
+                    $('.show-map-edit').eq(0).hide();
+                    $('.show-map-edit').eq(1).show();
+                } else {
+                    $(this).parents('.card').find('img').attr('src', '/public/images/dongtai.png');
+                    $('.show-map-edit').eq(1).hide();
+                    $('.show-map-edit').eq(0).show();
+                }
+            }
         });
 
         $('#save-select-map').click(function () {
             $(this).attr('disabled', true);
-            const val = parseInt($('#bd-set-11').find('.disabled').data('value'));
-            if (hadMap === val) {
+            const val = parseInt($('#map-value').val());
+            if (hadMap !== val) {
                 postData('/tender/' + tenderId + '/map/save', { type: 'select-map', value: val }, function () {
                     toastr.success('修改成功,重新加载中...');
                     setTimeout(function () {

+ 2 - 0
sql/update.sql

@@ -1,3 +1,5 @@
 ALTER TABLE `zh_ledger_history`
 ADD COLUMN `bills_count`  int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT '清单条数' AFTER `valid`,
 ADD COLUMN `pos_count`  int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT '计量单元数量' AFTER `bills_count`;
+
+UPDATE `zh_tender` SET `had_map`=3 WHERE `had_map`=1;