修改成绩ui

src/main/webapp/WEB-INF/views/cmpt/score_review.jsp

@@ -101,7 +101,7 @@
                     </div>
                 </div>
 
-                <div class="flex-vt select-section">
+                <div class="flex-vt select-section" style="width: 399px;margin: 0px;">
                     <span class="icon-search"></span>
                     <input v-model="searchWord" class="search-ipt" type="text">
                     <span v-on:click="searchKd"  class="search-btn-text">搜索</span>
@@ -114,11 +114,21 @@
                     <span :class="['review-status',reviewStatus==1?'active':'']" v-on:click="changeStatus(1)">已通过（<span v-text="reviewCount.pass"></span>）</span>
                     <span :class="['review-status',reviewStatus==2?'active':'']" v-on:click="changeStatus(2)">未通过（<span v-text="reviewCount.nopass"></span>）</span>
                 </div>
-                <div>
-                    <span v-on:click="review(1)" v-show="reviewStatus==0 || reviewStatus==2" class="pass">通过</span>
-                    <span v-on:click="review(-1)"v-show="reviewStatus==0  || reviewStatus== 1"class="no-pass">不通过</span>
+                <div style="display: flex;align-items: center;">
+                    <span v-on:click="review(1)" v-show="reviewStatus==0 || reviewStatus==2" class="icon-sec">
+                        <span class="pass-icon"></span>
+                        <span style="color: #ce3939">通过</span>
+                    </span>
+                    <span v-on:click="review(-1)"v-show="reviewStatus==0  || reviewStatus== 1" class="icon-sec">
+                        <span class="forbidden-icon"></span>
+                        <span style="color: #333333">不通过</span>
+                    </span>
+                    <span v-on:click="deleteScores"  class="icon-sec">
+                        <span class="del-icon"></span>
+                        <span style="color: #999999">删除</span>
+                    </span>
                 </div>
-                <span v-on:click="deleteScores" class="del">删除</span>
+
             </div>
             <div class="data-cloumn">
                 <span class="check-all"><input v-on:click="checkAll" :checked="checked?'true':'' " type="checkbox"></span>
@@ -162,9 +172,9 @@
                                      onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                      :value="score.subsectionTime | substrDate(10)"></span>
                         <span><input v-on:click.stop="" class="score-input miles" type="text"
-                                     :value="Number(score.subsectionMileage/1000).toFixed(3)"></span>
-                        <span><input v-on:click.stop="" class="score-input duration" type="text"
-                                     onclick="WdatePicker({skin:'whyGreen',dateFmt:'HH:mm:ss'})"
+                                     :value="Number(score.subsectionMileage/1000).toFixed(3)" @input="calculateMile($event,score)"></span>
+                        <span><input :scoreId="score.cmptScoreRuleScoreinfoId" v-on:click.stop="" class="score-input duration" type="text"
+                                     onclick="WdatePicker({skin:'whyGreen',dateFmt:'HH:mm:ss',onpicked: calculateDuration})"
                                      :value="score.subsectionscore | date_format"></span>
                         <span>{{score.cmptPace | pace(Number(score.subsectionMileage/1000).toFixed(3),score.subsectionscore) }}</span>
                         <span style="cursor: pointer;"
@@ -204,7 +214,7 @@
                     </div>
                 </template>
                 <template v-else>
-                    <div v-on:click.stop=""  class="flex score-detail" v-show="score.scoreDetails.length>0" >
+                    <div v-on:click.stop=""  class="flex score-detail" v-show="score.scoreDetails.length>0" :scoreId="score.cmptScoreRuleScoreinfoId">
                         <table>
                             <thead>
                             <tr>
@@ -218,7 +228,7 @@
                                 <td>{{item.checkPointName}}</td>
                                 <td><input  v-on:click.stop=""  type="text" class="score-input-bigger"
                                            v-bind:value="item.checkpointTime | substrYear"
-                                           onclick="WdatePicker({skin:'whyGreen',dateFmt:'MM-dd HH:mm:ss'})" ></td>
+                                           onclick="WdatePicker({skin:'whyGreen',dateFmt:'MM-dd HH:mm:ss',onpicked:calculateScore})"></td>
                             </tr>
                             </tbody>
                         </table>

src/main/webapp/static/cmpt/score_review.css

@@ -343,17 +343,68 @@ input.score-input-bigger{
 }
 .search-ipt{
     border: 0px;
-    width: 140px;
+    width: 340px;
     height: 46px;
 }
 .export-btn{
-    width: 110px;
-    height: 50px;
+    width:145px;
+    height:40px;
     background: rgba(206,57,57,1);
     border-radius: 4px;
     font-size: 16px;
     color: white;
-    line-height: 50px;
+    line-height: 40px;
     text-align: center;
     cursor: pointer;
 }
+.pass-icon{
+    background: url("/static/images/manage/score_pass.png") center no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
+.forbidden-icon{
+    background: url("/static/images/manage/score_forbidden.png") center no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
+.del-icon{
+    background: url("/static/images/manage/score_del.png") center no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
+.icon-sec{
+    width: 125px;
+    height: 60px;
+    line-height: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+}
+.icon-sec::after{
+    content: '';
+    width:1px;
+    height:31px;
+    background:rgba(216,216,216,1);
+    position: absolute;
+    right: 0px;
+}
+.icon-sec:last-child::after{
+    content: '';
+    display: none;
+}
+.icon-sec span:nth-child(2n){
+    width: 60px;
+    text-align: center;
+}
\ No newline at end of file

src/main/webapp/static/js/score_review.js

-var baseURL = 'http://localhost:8081/'
 var score = new Vue({
     el : '#score',
     data : {
@@ -65,10 +64,15 @@ var score = new Vue({
             if(!duration || !distance || distance == 0 || duration == 0){return ""}
             var mins = parseFloat(duration/60)/distance;
             var res = Math.floor((mins - parseInt(mins)) * 60);
+            if(res<10) res = "0"+res;
             return parseInt(mins)+"'"+ res +"''";
         }
     },
     methods:{
+        calculateMile:function(event,score){
+           let miles = $(event.target).val() * 1000;
+           score.subsectionMileage = miles;
+        },
         changeScoreStatus:function(score){
             score.save = !score.save;
         },
@@ -155,7 +159,7 @@ var score = new Vue({
                 param.details = [];
                 $.each(trs,function (i,e) {
                     let detail = {};
-                    let checkPointId= $(e).attr('checkpointid');
+                    let checkPointId= $(e).attr('check-point-id');
                     let checkpointTimeId = $(e).attr('checkpointtimeid');
                     let time = $(e).find('input').val();
                     detail.checkPointId = checkPointId;
@@ -380,3 +384,37 @@ $(document).ready(function () {
     })
     reviewPage.getRoads();
 });
+function calculateScore(){
+    var scoreId = $($dp.el).parents('.score-detail').attr('scoreId')
+    var scoreObj = score.getScoreById(scoreId);
+    var inputs = $($dp.el).parents('tbody').find('input');
+    var index = $(inputs).index($($dp.el));
+    var inputArr = [];
+    $.each(inputs,function (i,e) {
+        if($(e).val()){
+            inputArr.push(new Date().getFullYear()+"-"+$(e).val())
+        }
+    });
+
+    console.log(inputArr);
+
+    if(inputArr.length>2){
+        var duration = (Date.parse(inputArr[inputArr.length-1]) -Date.parse(inputArr[0]))/1000;
+        if(duration <=0){
+            layer.msg('输入时间不合法！');
+            return ;
+        }
+        scoreObj.subsectionscore = duration;
+    }
+    scoreObj.scoreDetails[index].checkpointTime = Date.parse(new Date().getFullYear()+"-"+$($dp.el).val());
+
+}
+function calculateDuration() {
+    let duration = $($dp.el).val();
+    var scoreId = $($dp.el).attr('scoreId');
+    var scoreObj = score.getScoreById(scoreId);
+    var hour = duration.split(':')[0]*3600;
+    var min = duration.split(':')[1]*60;
+    var sec = duration.split(':')[2];
+    scoreObj.subsectionscore = Number(hour)+Number(min)+Number(sec);
+}
\ No newline at end of file