原版保留

src/css/index.less

@@ -1,55 +1,12 @@
 @import './reset.less';
-.red{
-  color: #FF4D4F;
-}
-.blue{
-  color: #5B8FEE;
-}
 .container{
-  min-width: 360px;
+  padding: 10px;
+  // min-width: 360px;
+  overflow-y: hidden;
 }
 .content{
-  background: #E2E5EF;
-  margin: 6px 10px;
   border: 1px solid #E2E5EF;
 }
-.flawSumup{
-  /*padding-bottom: 10px;*/
-  .label-name{
-    font-weight: bold;
-  }
-  i{
-    display: inline-block;
-    width: 16px;
-    height: 18px;
-    vertical-align: middle;
-    margin-right: 2px;
-  }
-  .iselect{
-    background: url("../images/iselect.png") no-repeat;
-  }
-  .home{
-    background: url("../images/home.png") no-repeat;
-  }
-  .select{
-     background: url("../images/select.png") no-repeat;
-   }
-  .detail{
-    background: url("../images/detail.png") no-repeat;
-  }
-  table{
-    width: 360px;
-    margin:6px 15px 8px;
-  };
-  td{
-    height: 40px;
-    line-height: 40px;
-    white-space: nowrap;
-  }
-}
-.box{
-  background: #fff;
-}
 .title{
   height: 44px;
   line-height: 44px;
@@ -68,33 +25,19 @@
     font-weight:bold;
     color: #333;
   }
-}
-.sum-box{
-  display: none;
+  .numBox{
+    font-size: 14px;
+    color: #AAA;
+  }
 }
 .flawList{
-  padding: 0 15px 60px;
+  padding: 0 15px 20px;
+  overflow-y: auto;
   table{
     width: 100%;
-    margin-top: 9px;
-    thead th{
-      background: #5B8FEE;
-      color: #fff;
-      height: 49px;
-      border: 1px #E2E5EF solid;
-      font-size: 16px;
-      white-space: nowrap;
-      &:last-child{
-        border-right: none;
-      }
-    }
     td{
-      white-space: nowrap;
-      padding:10px 5px;
-      border: 1px #E2E5EF solid;
-      &:nth-child(2){
-        white-space: unset;
-      }
+      padding:10px 0;
+      border-bottom: 1px solid #E2E5EF;
       img{
         vertical-align: middle;
         margin-right: 5px;
@@ -102,14 +45,34 @@
     }
   }
 }
+/*.flawItem{
+  border-bottom: 1px solid #E2E5EF;
+  line-height: 20px;
+  padding: 10px 100px 10px 20px;
+  position: relative;
+}
+.flawItemIconBox{
+  position: absolute;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 13px;
+}*/
 .flawItemIcon{
   width: 16px;
-  
+
 }
 .flawItemMsgBox{
+  /*display: inline-block;
+  width: 100%;*/
+  border-right: 1px solid #E2E5EF;
   box-sizing: border-box;
 }
 .flawItemScore{
+  /*position: absolute;
+  top: 50%;*/
+  width: 100px;
   text-align: right;
   height: 20px;
   line-height: 20px;
@@ -117,9 +80,9 @@
 }
 .flawItemNum{
   display: inline-block;
+  width: 30px;
   text-align: left;
   color: #FF4D4F;
-  margin-right: 5px;
 }
 .empty{
   text-align: center;
@@ -127,20 +90,7 @@
 }
 .emptyTxt{
   margin-top: 15px;
-    font-size: 12px;
-    text-indent: 10px;
-    color: #aaa;
-}
-.copy-right{
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-  color: #000;
-  opacity: 0.85;
-  height: 50px;
-  line-height: 50px;
-  background: #fff;
-  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
+  font-size: 12px;
+  text-indent: 10px;
+  color: #aaa;
 }

src/css/total.less

@@ -0,0 +1,146 @@
+@import './reset.less';
+.red{
+  color: #FF4D4F;
+}
+.blue{
+  color: #5B8FEE;
+}
+.container{
+  min-width: 360px;
+}
+.content{
+  background: #E2E5EF;
+  margin: 6px 10px;
+  border: 1px solid #E2E5EF;
+}
+.flawSumup{
+  /*padding-bottom: 10px;*/
+  .label-name{
+    font-weight: bold;
+  }
+  i{
+    display: inline-block;
+    width: 16px;
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 2px;
+  }
+  .iselect{
+    background: url("../images/iselect.png") no-repeat;
+  }
+  .home{
+    background: url("../images/home.png") no-repeat;
+  }
+  .select{
+    background: url("../images/select.png") no-repeat;
+  }
+  .detail{
+    background: url("../images/detail.png") no-repeat;
+  }
+  table{
+    width: 360px;
+    margin:6px 15px 8px;
+  };
+  td{
+    height: 40px;
+    line-height: 40px;
+    white-space: nowrap;
+  }
+}
+.box{
+  background: #fff;
+}
+.title{
+  height: 44px;
+  line-height: 44px;
+  padding: 0 15px;
+  border-bottom: 1px solid #E2E5EF;
+  .line{
+    display: inline-block;
+    width: 4px;
+    height: 18px;
+    background: #5799CC;
+    position: relative;
+    top: 4px;
+  }
+  .titleTxt{
+    font-size:16px;
+    font-weight:bold;
+    color: #333;
+  }
+}
+.sum-box{
+  display: none;
+}
+.flawList{
+  padding: 0 15px 60px;
+  table{
+    width: 100%;
+    margin-top: 9px;
+    thead th{
+      background: #5B8FEE;
+      color: #fff;
+      height: 49px;
+      border: 1px #E2E5EF solid;
+      font-size: 16px;
+      white-space: nowrap;
+      &:last-child{
+        border-right: none;
+      }
+    }
+    td{
+      white-space: nowrap;
+      padding:10px 5px;
+      border: 1px #E2E5EF solid;
+      &:nth-child(2){
+        white-space: unset;
+      }
+      img{
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+.flawItemIcon{
+  width: 16px;
+
+}
+.flawItemMsgBox{
+  box-sizing: border-box;
+}
+.flawItemScore{
+  text-align: right;
+  height: 20px;
+  line-height: 20px;
+  margin-top: -10px;
+}
+.flawItemNum{
+  display: inline-block;
+  text-align: left;
+  color: #FF4D4F;
+  margin-right: 5px;
+}
+.empty{
+  text-align: center;
+  margin-top: 100px;
+}
+.emptyTxt{
+  margin-top: 15px;
+  font-size: 12px;
+  text-indent: 10px;
+  color: #aaa;
+}
+.copy-right{
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  color: #000;
+  opacity: 0.85;
+  height: 50px;
+  line-height: 50px;
+  background: #fff;
+  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
+}

src/index.js

@@ -2,90 +2,64 @@ require('./css/index.less');
 const $ = require("jquery");
 const {post,getUrlArgObject } = require('./js/util.js');
 const {api} = require('./js/api.js');
-const emptyImg = require("./images/empty1.png");
-const nullImg = require("./images/null.png");
+const iconWarn = require("./images/icon_warn.png");
+const emptyImg = require("./images/empty.png");
 
 let behospitalCode = getUrlArgObject("behospitalCode") ||''
 let hospitalId = getUrlArgObject("hospitalId") ||''
 let modeId = getUrlArgObject("modeId") || ''
 
-/*function setListHei(){
-    $(".flawList").css({
-        height:$(window).height()-90+'px'
-    })
+function setListHei(){
+  $(".flawList").css({
+    height:$(window).height()-90+'px'
+  })
 }
-setListHei()*/
+setListHei()
 
-function errorShow(){
-  const str = `
-            <div class="empty">
-                <img class="emptyImg" src="${emptyImg}" />
-                <div class="emptyTxt">抱歉，缺陷找不到了</div>
-            </div>
-        `;
-  $('.flawList').html(str);
-}
 
 function getFLawList(){
-    post(api.analyzeRun,{behospitalCode:behospitalCode,hospitalId:hospitalId}).then(function(res){
-      if(res.data.code==='0'){
-        const data = res.data.data;
-        renderFlawList(data||{})
-      }else{
-        errorShow();
-      }
+  post(api.analyzeRun,{behospitalCode:behospitalCode,hospitalId:hospitalId, modeId:modeId}).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data&&res.data.data.msgDTOList;
+      renderFlawList(data)
+
+    }else{
+
+    }
+
+  }).catch(e =>{
 
-    }).catch(e =>{
-            
-    });
+  });
 };
 getFLawList()
 
-function renderFlawList(data){
-    let str = `<table>
-          <thead>
-            <tr>
-              <th>来源</th>
-              <th>缺陷详情</th>
-              <th width="105">扣分</th>
-            </tr>
-          </thead>
-          <tbody>`;
-    const flawList = (data&&data.msgDTOList)||[];
-    const {level,num,numScore, scoreRes}=data;
-    for(let i = 0; i < flawList.length; i++){
-        /*let flawItem = `<div class="flawItem">
-            <span class="flawItemIconBox"><img class="flawItemIcon" src="${iconWarn}" /></span>
-            <span class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</span>
-            <span class="flawItemScore fr">评分: <span class="flawItemNum">-${flawList[i].score}</span></span>
-        </div>`*/
-      let flawItem = `<tr class="flawItem">
-                        <td>${flawList[i].modelName}</td>
-                        <td><div class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</div></td>
-                        <td class="flawItemScore"><span class="flawItemNum">${flawList[i].score}</span></td>
+function renderFlawList(flawList){
+  let str = `<table>`;
+  for(let i = 0; i < flawList.length; i++){
+    /*let flawItem = `<div class="flawItem">
+        <span class="flawItemIconBox"><img class="flawItemIcon" src="${iconWarn}" /></span>
+        <span class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</span>
+        <span class="flawItemScore fr">评分: <span class="flawItemNum">-${flawList[i].score}</span></span>
+    </div>`*/
+    let flawItem = `<tr class="flawItem">
+                        <td><div class="flawItemMsgBox"><img class="flawItemIcon" src="${iconWarn}" />${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</div></td>
+                        <td class="flawItemScore">评分: <span class="flawItemNum">-${flawList[i].score}</span></td>
                        </tr>`;
-        str += flawItem;
-        
-    }
-    str+="</tbody></table>";
-    if(flawList===null||flawList.length === 0){
-        str = `
+    str += flawItem;
+
+  }
+  str+="</table>";
+  if(flawList.length === 0){
+    str = `
             <div class="empty">
-                <img class="emptyImg" src="${nullImg}" />
-                <div class="emptyTxt">恭喜您，病历未发现缺陷</div>
+                <img class="emptyImg" src="${emptyImg}" />
+                <div class="emptyTxt">暂无缺陷~</div>
             </div>
         `;
-      /*$('.flawList').html(str);
-      return;*/
-    }
-    $("#level").text(level);
-    $("#score").text(scoreRes);
-    $("#num").text(num);
-    $("#flawMark").text(numScore);
-    $(".sum-box").show();
-
-    $('.flawList').html(str);
-    replaceSrc();
+  }
+  $('.flawList').html(str);
+  replaceSrc();
+  $('.flawNum').html(flawList.length)
 }
 function replaceSrc(){
   var browser=navigator.appName;
@@ -101,3 +75,7 @@ function replaceSrc(){
     }
   }
 }
+
+$(window).on("resize", function(){
+  setListHei()
+})

src/js/api.js

@@ -1,5 +1,6 @@
 const api = {
   analyzeRun:'/qc/behospitalInfo/analyze_run',
+  analyzeApi:'/qc/behospitalInfo/analyze_api',
 }
 module.exports = {
     api

src/js/total.js

@@ -0,0 +1,103 @@
+require('../css/total.less');
+const $ = require("jquery");
+const {post,getUrlArgObject } = require('../js/util.js');
+const {api} = require('../js/api.js');
+const emptyImg = require("../images/empty1.png");
+const nullImg = require("../images/null.png");
+
+let behospitalCode = getUrlArgObject("behospitalCode") ||''
+let hospitalId = getUrlArgObject("hospitalId") ||''
+let modeId = getUrlArgObject("modeId") || ''
+
+/*function setListHei(){
+    $(".flawList").css({
+        height:$(window).height()-90+'px'
+    })
+}
+setListHei()*/
+
+function errorShow(){
+  const str = `
+            <div class="empty">
+                <img class="emptyImg" src="${emptyImg}" />
+                <div class="emptyTxt">抱歉，缺陷找不到了</div>
+            </div>
+        `;
+  $('.flawList').html(str);
+}
+
+function getFLawList(){
+  post(api.analyzeApi,{behospitalCode:behospitalCode,hospitalId:hospitalId}).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+      renderFlawList(data||{})
+    }else{
+      errorShow();
+    }
+
+  }).catch(e =>{
+
+  });
+};
+getFLawList()
+
+function renderFlawList(data){
+  let str = `<table>
+          <thead>
+            <tr>
+              <th>来源</th>
+              <th>缺陷详情</th>
+              <th width="105">扣分</th>
+            </tr>
+          </thead>
+          <tbody>`;
+  const flawList = (data&&data.msgDTOList)||[];
+  const {level,num,numScore, scoreRes}=data;
+  for(let i = 0; i < flawList.length; i++){
+    /*let flawItem = `<div class="flawItem">
+        <span class="flawItemIconBox"><img class="flawItemIcon" src="${iconWarn}" /></span>
+        <span class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</span>
+        <span class="flawItemScore fr">评分: <span class="flawItemNum">-${flawList[i].score}</span></span>
+    </div>`*/
+    let flawItem = `<tr class="flawItem">
+                        <td>${flawList[i].modelName}</td>
+                        <td><div class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</div></td>
+                        <td class="flawItemScore"><span class="flawItemNum">${flawList[i].score}</span></td>
+                       </tr>`;
+    str += flawItem;
+
+  }
+  str+="</tbody></table>";
+  if(flawList===null||flawList.length === 0){
+    str = `
+            <div class="empty">
+                <img class="emptyImg" src="${nullImg}" />
+                <div class="emptyTxt">恭喜您，病历未发现缺陷</div>
+            </div>
+        `;
+    /*$('.flawList').html(str);
+    return;*/
+  }
+  $("#level").text(level);
+  $("#score").text(scoreRes);
+  $("#num").text(num);
+  $("#flawMark").text(numScore);
+  $(".sum-box").show();
+
+  $('.flawList').html(str);
+  replaceSrc();
+}
+function replaceSrc(){
+  var browser=navigator.appName;
+  var b_version=navigator.appVersion;
+  var version=b_version.split(";");
+  var trim_Version=version[1].replace(/[ ]/g,"");
+  if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0"){
+    const imgs = $(".flawList img");
+    let src = '';
+    for(let i=0;i<imgs.length;i++){
+      src = $(imgs[i]).attr("src").replace("undefined","");
+      imgs.attr("src",src);
+    }
+  }
+}

webpack.config.js

@@ -4,10 +4,11 @@ const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清空打包目
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const webpack = require('webpack');
-const proxyHost = "http://192.168.2.236:5858";
+const proxyHost = "http://192.168.2.241:5858";
 module.exports = {
   entry: {
     index: path.resolve(__dirname, 'src', 'index.js'),
+    total: path.resolve(__dirname, 'src/js', 'total.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
   },
   output: {
@@ -33,6 +34,19 @@ module.exports = {
         collapseWhitespace: true //删除空白符与换行符
       }
     }),
+    new HtmlWebpackPlugin({
+      title: 'total',
+      template: path.resolve(__dirname, 'src', 'total.html'),
+      filename: 'total.html',
+      chunks: ['total', 'vendor', 'common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: '[id].css'