Merge branch 'test' into dev_zxc

src/css/console.less

@@ -1,15 +1,18 @@
 .echarts {
   width: 100%;
-  height: 500px;
+  height: 400px;
+  padding: 0 15px;
 }
 .barChartPay {
   width: 100%;
-  height: 500px;
+  height: 400px;
+  padding: 0 15px;
 }
 .emptyCircle {
-  width: 50%;
-  height: 300px;
+  width: 45%;
+  height: 200px;
   float: left;
+  margin-top: 95px;
 }
 .partWrap {
   overflow: auto;
@@ -70,6 +73,12 @@
   background-color: #f5f5f5;
 }
 .partTitle {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  z-index: 20;
   height: 44px;
   line-height: 44px;
   padding-left: 10px;
@@ -77,7 +86,40 @@
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;
-  box-sizing: border-box;
+  p {
+    display: inline-block;
+  }
+  .monthYear {
+    float: right;
+    margin-right: 20px;
+    border: 1px solid #5A8EEE;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    margin-top: 6px;
+    span {
+      width: 48px;
+      height: 28px;
+      line-height: 28px;
+      display: inline-block;
+      text-align: center;
+      font-weight: normal;
+    }
+    .mon {
+      background-color: #5A8EEE;
+      color: #fff;
+    }
+    .year {
+      color: #5A8EEE;
+    }
+  }
+}
+.partTitles {
+  height: 44px;
+  line-height: 44px;
+  padding-left: 10px;
 }
 .pubEchart {
   width: 50%;
@@ -97,24 +139,46 @@
   border-bottom: 10px solid #f5f5f5;
   border-right: 5px solid #f5f5f5;
   box-sizing: border-box;
-  width: 40%;
+  width: 45%;
   display: inline-block;
   height: 455px;
   overflow: hidden;
   .list {
-    padding: 20px 30px;
+    padding: 15px 30px;
     width: 100%;
     box-sizing: border-box;
     overflow: auto;
+    height: 405px;
+  }
+  .thead {
+    td {
+      color: #51649C;
+    }
   }
   .qtable {
     width: 100%;
+    overflow: auto;
   }
   td {
-    padding: 8px 15px;
+    padding: 7px 10px;
+    i {
+      width: 17px;
+      height: 17px;
+      line-height: 17px;
+      border-radius: 8px;
+      background-color: #999;
+      color: #fff;
+      display: inline-block;
+      text-align: center;
+      font-size: 12px;
+    }
+  }
+  tr {
+    border-bottom: 1px solid #f5f5f5;
+    box-sizing: border-box;
   }
   .td01 {
-    width: 40px;
+    width: 30px;
   }
   .td02 {
     
@@ -128,14 +192,61 @@
 }
 .circle {
   height: 455px;
-  width: 60%;
+  width: 55%;
   display: inline-block;
   border-bottom: 10px solid #f5f5f5;
   border-left: 5px solid #f5f5f5;
   box-sizing: border-box;
   margin-bottom: 60px;
+  position: relative;
 }
 .btmWrap {
   width: 100%;
   overflow: hidden;
+}
+.explainPan {
+  width: 50%;
+  float: right;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  padding-right: 30px;
+  box-sizing: border-box;
+  table {
+    width: 100%;
+  }
+  .explainLi {
+    height: 30px;
+    line-height: 30px;
+    span {
+      display: inline-block;
+    }
+    .tip {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: red;
+      margin-right: 10px;
+    }
+    .deptName {
+      width: 115px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #777;
+    }
+    .deptNum {
+      color: #333;
+      font-size: 16px;
+      font-weight: bold;
+      padding-right: 10px;
+      width: 40px;
+      text-align: right;
+    }
+    .percent {
+      color: #777;
+      width: 40px;
+    }
+  }
 }

src/css/index.less

@@ -1,11 +1,5 @@
 @import './reset.less';
 
-@headerHt:50px;
-@menuLiHt:40px;
-@menuWt:300px;
-@activeColor:#5A8EEE;
-@activeBg:#EEF4FF;
-
 .container{
   height: 100%;
 }
@@ -83,11 +77,13 @@
 }
 .main-body{
   height: 100%;
-  margin-top:@headerHt+20px;
+  margin-top:@headerHt;
 }
 .menu{
   width: @menuWt;
   height: 100%;
+  overflow-y: auto;
+  padding-top: 15px;
   .active{
     color: @activeColor;
     background: @activeBg;
@@ -124,10 +120,21 @@
     text-indent: 15px;
     cursor: pointer;
   }
+  .copy-right{
+    position: fixed;
+    bottom: 0px;
+    width: @menuWt+(-18px);
+    text-align: center;
+    font-size:12px;
+    color: #aaa;
+    background: #fff;
+    padding: 10px 0 20px;
+  }
 }
 .main{
   margin-left:@menuWt;
   height: 100%;
+  border: 10px solid #f5f5f5;
   iframe{
     width: 100%;
     height: 100%;

src/css/qcScore.less

@@ -0,0 +1,184 @@
+@import './reset.less';
+.main-part{
+  height: 100%;
+}
+.patient-info{
+  height: 50px;
+  line-height: 50px;
+  margin-top: 10px;
+  text-align: center;
+  span{
+    margin-right: 40px;
+  }
+}
+.sub-menu{
+  position: relative;
+  width: @menuWt;
+  height: 100%;
+  float: left;
+  overflow-y: auto;
+  border-right: 1px @frameBdColor solid;
+  .active{
+    color: @activeColor;
+    background: @activeBg;
+    border-right: 3px @activeColor solid;
+  }
+  .slide-up{
+    color: @activeColor;
+  }
+  .list-1{
+    position: relative;
+    &:after{
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      left: 270px;
+      top:18px;
+      width: 10px;
+      height: 6px;
+      background: url("../images/icon_down.png") no-repeat;
+    }
+    &.slide-up:after{
+      transform: rotate(180deg);
+      -webkit-transform: rotate(180deg);
+    }
+    ul{
+      display: none;
+      li.page{
+        text-indent: 30px;
+      }
+    }
+  }
+  li{
+    line-height: @menuLiHt;
+    text-indent: 15px;
+    cursor: pointer;
+  }
+  .copy-right{
+    position: fixed;
+    bottom: 0px;
+    width: @menuWt+(-18px);
+    text-align: center;
+    font-size:12px;
+    color: #aaa;
+    background: #fff;
+    padding: 10px 0 20px;
+  }
+}
+.tab-container{
+  margin-left: 310px;
+  height: 100%;
+  .content-box{
+    width:70%;
+    height: 100%;
+    position: relative;
+  }
+  .content-item{
+    display: none;
+    height: 100%;
+    .title{
+      position: absolute;
+      top: 0;
+      width: 100%;
+      color: #333333;
+      font-size: 16px;
+      text-align: center;
+      font-weight: bold;
+      height: 44px;
+      line-height: 44px;
+      border-bottom:1px #E2E5EF solid;
+      text-indent: 20px;
+    }
+    .container{
+      margin-top: 45px;
+      padding: 20px 30px 0;
+      height: 100%;
+      overflow-y: auto;
+    }
+    .cont{
+      display: inline-block;
+      min-width: 33%;
+      margin-bottom: 15px;
+      span{
+        line-height: 20px;
+        vertical-align: middle;
+      }
+      .label{
+        display: inline-block;
+        min-width: 70px;
+        font-weight: bold;
+        overflow-x: hidden;
+      }
+    }
+  }
+  .operation{
+    width:28%;
+    height: 100%;
+    margin-right: 10px;
+    position: relative;
+    .flaw-title{
+      position: absolute;
+      top:0;
+      width: 100%;
+      height: 44px;
+      color: #333333;
+      font-weight: bold;
+      line-height: 44px;
+      border-bottom:1px #E2E5EF solid;
+      /*margin-bottom: 20px;*/
+      span{
+        font-size: 16px;
+        margin-left: 20px;
+      }
+      a{
+        float: right;
+        width: 66px;
+        height: 28px;
+        margin: 10px 20px 0 0;
+        line-height: 28px;
+        text-align: center;
+        border-radius:4px;
+        color: @activeColor;
+        font-weight: normal;
+        border:1px @activeColor solid;
+      }
+    }
+    .flaw-box{
+      margin-top: 45px;
+      padding-top: 20px;
+      height: 100%;
+      overflow-y: auto;
+    }
+    .flaw-item{
+      display: none;
+      margin: 0 20px 10px 30px ;
+      border-bottom:1px #E2E5EF solid;
+      padding-bottom: 10px;
+      .title{
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .oper{
+    text-align: right;
+  }
+}
+.edit-box{
+  p{
+    margin-bottom: 10px;
+  }
+  input{
+    border:1px @borderColor solid;
+    width: 300px;
+    height: 38px;
+    text-indent: 10px;
+    line-height: 38px;
+    border-radius:2px;
+  }
+  span{
+    display: inline-block;
+    width: 70px;
+    margin-right: 20px;
+    text-align: right;
+  }
+}

src/css/reset.less

@@ -90,6 +90,86 @@ textarea {
   float: right;
 }
 
+
+@headerHt:50px;   /*logo栏高度*/
+@menuLiHt:40px;   /*菜单项高度*/
+@menuWt:300px;   /*菜单宽度*/
+@activeColor:#5A8EEE;   /*菜单项选中颜色*/
+@activeBg:#EEF4FF;   /*菜单项选中背景*/
+@borderColor:#E2E5EF; /**边框颜色**/
+@frameBdColor:#F0F0F0;/***框架边框颜色**/
+@warnColor:#FF4D4F;  /**重点红色**/
+
+/****弹窗样式*****/
+.modal{
+  position: fixed;
+  top:0;
+  left: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  .cover{
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .5;
+  }
+  .modal-box{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    /*width: 400px;
+    height: 255px;*/
+    padding-bottom: 30px;
+    margin-top:-180px;
+    margin-left: -200px;
+    background: #fff;
+    border-radius:4px;
+  }
+  .modal-header{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+    border-bottom: 1px #E2E5EF solid;
+    a{
+      float: right;
+      font-size: 18px;
+      color: #8C8C8C;
+    }
+  }
+  .modal-body{
+    padding: 30px 65px 40px;
+  }
+  .modal-footer{
+    /*position: absolute;
+    bottom: 20px;
+    width: 100%;*/
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    a{
+      width:80px;
+      height:36px;
+      color: #fff;
+      background:@activeColor;
+      border-radius:4px;
+      padding:7px 26px;
+      &.cancel{
+        background: #fff;
+        border:1px @activeColor solid;
+        color:@activeColor;
+        margin-left: 20px;
+      }
+  }
+  }
+}
+
+.red{
+  color: @warnColor;
+}
+.blue{
+  color:@activeColor;
+}
 .alertModal {
   .modalBg {
     position: fixed;

src/html/console.html

@@ -3,12 +3,19 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./resource/swiper.css">
+  <!-- <link rel="stylesheet" href="./resource/swiper.css"> -->
   <title>Document</title>
 </head>
 <body >
   <div class="partWrap clearfix">
-    <p class="partTitle">住院病案首页数据质量管理与控制指标</p>
+    <div class="partTitles"></div>
+    <div class="partTitle">
+      <p>住院病案首页数据质量管理与控制指标</p>
+      <div class="monthYear">
+        <span class="mon">本月</span>
+        <span class="year">本年</span>
+      </div> 
+    </div>
     <ul class="clearfix partAll">
 
     </ul>
@@ -24,11 +31,11 @@
     </div> -->
     <div class="grayLine"></div>
     <div class="pubEchart paymoney">
-      <p class="title">死亡疑难危重症占比</p>
+      <p class="title">医院运行指标</p>
       <div id="barChartPay" class="barChartPay"></div>
     </div>
     <div class="pubEchart dept">
-      <p class="title">死亡疑难危重症占比</p>
+      <p class="title">医院运行指标</p>
       <div id="barChart" class="echarts"></div>
     </div>
     
@@ -37,70 +44,22 @@
         <p class="title">缺陷排行列表</p>
         <div class="list">
           <table class="qtable">
-            <tr class="thead">
-              <td class="td01">排名</td>
-              <td class="td02">缺陷名称</td>
-              <td class="td03">数量</td>
-              <td class="td04">占比</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>主诉超过20个字</td>
-              <td>56</td>
-              <td>40%</td>
-            </tr>
+
           </table>
         </div>
       </div>
-      <div class="circle">
+      <div class="circle clearfix">
         <p class="title">各科室缺陷占比</p>
         <div id="emptyCircle" class="emptyCircle"></div>
+        <div class="explainPan">
+          <table>
+            
+          </table>
+        </div>
       </div>
     </div>
     <br><br><br>
   </div>
-  <script src="./resource/swiper.min.js"></script>
+  <!-- <script src="./resource/swiper.min.js"></script> -->
 </body>
 </html>

src/html/index.html

@@ -7,19 +7,17 @@
   <title>AI病例质控-首页</title>
 </head>
 <script type="text/html" id="menuTmpl">
-    <ul>
-        {{if subMenuList.length}}
-            <li class="list-1">${name}
-        {{else}}
-            <li class="page" code="${code}">${name}
-        {{/if}}
-            <ul>
-                {{each subMenuList}}
-                <li class="page" code="${code}">${name}</li>
-                {{/each}}
-            </ul>
-        </li>
-    </ul>
+    {{if subMenuList.length}}
+        <li class="list-1">${name}
+    {{else}}
+        <li class="page" code="${code}">${name}
+    {{/if}}
+        <ul>
+            {{each subMenuList}}
+            <li class="page" code="${code}">${name}</li>
+            {{/each}}
+        </ul>
+    </li>
 </script>
 <body>
   <div class="container">
@@ -37,8 +35,10 @@
           </div>
       </div>
       <div class="main-body clearfix">
-          <div class="menu fl"></div>
-          <div class="main" id="mainBox">
+          <div class="menu fl">
+              <ul></ul>
+              <div class="copy-right">©杭州朗通信息技术有限公司</div></div>
+          <div class="main">
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
           </div>
       </div>

src/html/login.html

@@ -21,7 +21,7 @@
           <p>用户名</p>
           <div class="iptWrap">
             <img src="../images/yonghu.png" alt="">
-            <input type="text" placeholder="请输入用户名称" id="username" value="luolei">
+            <input type="text" placeholder="请输入用户名称" id="username" value="">
           </div>
         </div>
         <br>
@@ -29,7 +29,7 @@
           <p>密码</p>
           <div class="iptWrap">
             <img src="../images/mima.png" alt="">
-            <input type="text" placeholder="请输入密码" id="password" value="a123456">
+            <input type="text" placeholder="请输入密码" id="password" value="">
           </div>
         </div>
         <p class="waring"></p>

src/html/qcScore.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>质控评分</title>
+    <script type="text/html" id="subMenuTmpl">
+        {{if sonMode.length}}
+        <li class="list-1">${name}
+            {{else}}
+        <li class="page" code="${name}">${name}
+            {{/if}}
+            <ul>
+                {{each sonMode}}
+                <li class="page" code="${name}">${name}</li>
+                {{/each}}
+            </ul>
+        </li>
+    </script>
+    <script type="text/html" id="infoTmpl">
+        <span>住院号：${fileCode}</span>
+        <span>姓名：${name}</span>
+        <span>性别：${sex}</span>
+        <span>出生日期：${birthday.substr(0,10)}</span>
+        <span>科室：${behDeptName}</span>
+        <span>评级：${level}</span>
+        <span>评分：${scoreRes}</span>
+    </script>
+    <script type="text/html" id="contentTmpl">
+        <div class="content-item" code="${title}">
+            <h2 class="title">${title}</h2>
+            <div class="container content-ht">
+                {{each(i,val) info}}
+                {{each(k,text) val}}
+                <div class="cont">
+                    <span class="label">${k}:</span>
+                    <span>${text}</span>
+                </div>
+                {{/each}}
+                {{/each}}
+            </div>
+        </div>
+    </script>
+    <script type="text/html" id="flawTmpl">
+        <div class="flaw-item" code="${modelName}">
+            <div class="title">${msg}</div>
+            <div class="opers">
+                {{if score===0}}
+                <p>评分：<span class="red">warn</span></p>
+                {{else}}
+                <p>评分：<span class="red">-${score}</span></p>
+                {{/if}}
+                <div class="oper">
+                    <a class="edit-flaw blue" code="${id}" href="javascript:void(0);">修改</a>
+                    <a class="del-flaw red" code="${id}" href="javascript:void(0);">删除</a>
+                </div>
+            </div>
+        </div>
+    </script>
+    <script type="text/html" id="editTmpl">
+        <div class="edit-box">
+            <p><span>质控条目: </span><input disabled type="text" value="${msg}" /></p>
+            <!--<p><span>模块名称: </span><input type="text" value="${modelName}" /></p>-->
+            <p><span>提示信息: </span><input id="qcMsg" type="text" value="${msg}" /></p>
+            <p><span>质控分数: </span> <input id="qcScore" type="text" value="${score}" /></p>
+        </div>
+    </script>
+</head>
+<body>
+    <div class="patient-info" id="patientInfo"></div>
+    <div class="main-part clearfix">
+        <div class="sub-menu">
+            <ul id="subMenu"></ul>
+            <div class="copy-right">©杭州朗通信息技术有限公司</div>
+        </div>
+        <div class="tab-container clearfix">
+            <div class="content-box fl" id="contentInfo"></div>
+            <div class="operation fr" id="flaws">
+                <div class="flaw-title">
+                    <span>缺陷详情</span>
+                    <!--<a href="javascript:void(0);">+ 新增</a>-->
+                </div>
+                <div class="flaw-box content-ht"></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="delModal">
+        <div class="cover"></div>
+        <div class="modal-box">
+            <div class="modal-header clearfix">
+                <span class="title">提示</span>
+                <a class="close" href="javascript:void(0);">×</a>
+            </div>
+            <div class="modal-body">
+                <!--<p>确定要删除该评分记录吗？</p>-->
+            </div>
+            <div class="modal-footer">
+                <a class="confirm" href="javascript:void(0);">确定</a>
+                <a class="close cancel" href="javascript:void(0);">取消</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

src/js/console.js

@@ -8,18 +8,40 @@ const echarts = require('echarts');
 const {post,setCookie,delCookie} = require('../js/utils.js');
 
 $(function(){
-  var mySwiper = new Swiper('.swiper-container',{
-    // autoplay : 500,//可选选项，自动滑动
-    loop : true,//可选选项，开启循环
-    slidesPerView : 3,
-  })
-  initConsole()
-  barChart()
-  barChartPay()
-  emptyCircle()
+//   var mySwiper = new Swiper('.swiper-container',{
+//     // autoplay : 500,//可选选项，自动滑动
+//     loop : true,//可选选项，开启循环
+//     slidesPerView : 3,
+//   })
+  initConsole()//质控列表
+  getBarData()//图标数据获取
+  dateChange()
 })
+//所有数据切换日期筛选
+function dateChange(){
+    $(".monthYear .mon").click(function(){
+        $(this).css({
+            backgroundColor:'#5A8EEE',
+            color:'#fff'
+        }).siblings().css({
+            color:'#5A8EEE',
+            backgroundColor:'#fff'
+        })
+        getBarData(1)
+    })
+    $(".monthYear .year").click(function(){
+        $(this).css({
+            backgroundColor:'#5A8EEE',
+            color:'#fff'
+        }).siblings().css({
+            color:'#5A8EEE',
+            backgroundColor:'#fff'
+        })
+        getBarData(2)
+    })
+}
 //控制台数
-function initConsole(){
+function initConsole(result){
     let url = {
         '本月病历数':require("../images/icon6.png"),
         '本月不合格病历-机器':require("../images/icon7.png"),
@@ -27,45 +49,84 @@ function initConsole(){
         '本月甲级病历-机器':require("../images/icon8.png"),
         '本月乙级病历-机器':require("../images/icon9.png")
     }
+    let dom = ''
+    for(let i in result){
+        if(i.indexOf("人工")==-1){
+            dom += `
+                <li class="partLi">
+                    <div class="partIn">
+                        <p class="top">${i.split("-")[0]}</p>
+                        <p class="btm clearfix">
+                        <img src="${url[i]}" alt="">
+                        <span>${result[i]}</span>
+                        </p>
+                    </div>
+                </li>
+            `
+        }
+    }
+    $(".partAll").html(dom)
+}
+//获取图表数据
+function getBarData(type){
     post('/console/mrStatistics',{
-        // "endDate": "string",
-        // "hospitalId": "string",
-        // "limitCount": 0,
-        // "startDate": "string",
-        "type": 1//1月2年
+        "type": type||1//1月2年
+    }).then((res)=>{
+        let data = res.data;
+        if(data.code == 0){
+            let result = data.data
+            initConsole(result)
+        }
+    })
+    post('/console/averageStatistics',{//柱状数据
+        type:type||1
+    }).then((res)=>{
+        let data = res.data;
+        if(data.code == 0){
+            let result1 = data.data['平均住院费用']
+            let result2 = data.data['平均住院日']
+            let dataX1=[],dataY1=[],dataX2=[],dataY2=[];
+            for(let i = 0;i < result1.length;i++){
+                dataX1.push(result1[i].deptName)
+                dataY1.push(result1[i].averageValue)
+            }
+            for(let i = 0;i < result2.length;i++){
+                dataX2.push(result2[i].deptName)
+                dataY2.push(result2[i].averageValue)
+            }
+            barChartPay(dataX1,dataY1)
+            barChart(dataX2,dataY2)
+        }
+    })
+    post('/console/resultStatistics',{//饼图数据
+        type:type||1
     }).then((res)=>{
         let data = res.data;
         if(data.code == 0){
-          let result = data.data
-          for(let i in result){
-            let dom = ''
-            if(i.indexOf("人工")==-1){
-                dom = `
-                    <li class="partLi">
-                        <div class="partIn">
-                            <p class="top">${i.split("-")[0]}</p>
-                            <p class="btm clearfix">
-                            <img src="${url[i]}" alt="">
-                            <span>${result[i]}</span>
-                            </p>
-                        </div>
-                    </li>
-                `
+            let result1 = data.data['缺陷排行列表']
+            let result2 = data.data['各科室缺陷占比']
+            for(let i = 0;i < result2.length;i++){
+                result2[i].value = result2[i].num
             }
-            $(".partAll").append(dom)
-          }
+            queList(result1)
+            emptyCircle(result2)
+            panDetail(result2)
         }
     })
+
 }
-//柱状图
-function barChart(){
-    var myChart = echarts.init(document.getElementById('barChart'));
+//柱状图住院费用
+function barChartPay(dataX,dataY){
+    var myCharts = echarts.init(document.getElementById('barChartPay'));
+    $(window).resize(function(){
+        myCharts.resize()
+    });
     option = {
         color: ['#3398DB'],
         tooltip: {
             trigger: 'axis',
             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
             }
         },
         grid: {
@@ -77,18 +138,18 @@ function barChart(){
         xAxis: [
             {
                 type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                data: dataX,
                 axisTick: {
                     alignWithLabel: true
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: 'blue'
+                        color: '#333'
                     }
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'red'
+                        color:'#AAAAAA'
                     }
                 }
             }
@@ -104,21 +165,21 @@ function barChart(){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: 'red'
+                        color: '#333333'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'red'
+                        color:'#EFF3FC'
                     }
                 }
             }
             
         ],
         title:[{
-            text: '医院运行指标',
-            top: 20,
-            left: 20,
+            text: '平均住院费用',
+            top: 15,
+            left: 10,
             textStyle: {
                 fontSize: 14,
                 color:'#666666',
@@ -127,25 +188,27 @@ function barChart(){
         }],
         series: [
             {
-                name: '直接访问',
+                name: '平均住院费用',
                 type: 'bar',
-                barWidth: '30%',
-                data: [10, 52, 200, 334, 390, 330, 220]
+                barWidth: '6%',
+                data: dataY
             }
         ]
     };
-    myChart.setOption(option);
-    
+    myCharts.setOption(option);
 }
-//柱状图
-function barChartPay(){
-    var myChart = echarts.init(document.getElementById('barChartPay'));
+//柱状图住院日期
+function barChart(dataX,dataY){
+    var myChart = echarts.init(document.getElementById('barChart'));
+    $(window).resize(function(){
+        myChart.resize()
+    });
     option = {
         color: ['#3398DB'],
         tooltip: {
             trigger: 'axis',
             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
             }
         },
         grid: {
@@ -157,18 +220,18 @@ function barChartPay(){
         xAxis: [
             {
                 type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                data: dataX,
                 axisTick: {
                     alignWithLabel: true
                 },
                 axisLabel: {//x轴刻度
                     textStyle: {
-                        color: 'blue'
+                        color: '#333'
                     }
                 },
                 axisLine: {//x轴
                     lineStyle:{
-                        color:'red'
+                        color:'#AAAAAA'
                     }
                 }
             }
@@ -184,21 +247,21 @@ function barChartPay(){
                 },
                 axisLabel: {//y轴刻度
                     textStyle: {
-                        color: 'red'
+                        color: '#333333'
                     }
                 },
                 splitLine:{//分割线
                     lineStyle:{
-                        color:'red'
+                        color:'#EFF3FC'
                     }
                 }
             }
             
         ],
         title:[{
-            text: '医院运行指标',
-            top: 20,
-            left: 20,
+            text: '平均住院日',
+            top: 15,
+            left: 10,
             textStyle: {
                 fontSize: 14,
                 color:'#666666',
@@ -207,10 +270,10 @@ function barChartPay(){
         }],
         series: [
             {
-                name: '直接访问',
+                name: '平均住院日',
                 type: 'bar',
-                barWidth: '30%',
-                data: [10, 52, 200, 334, 390, 330, 220]
+                barWidth: '6%',
+                data: dataY
             }
         ]
     };
@@ -218,70 +281,129 @@ function barChartPay(){
     
 }
 //空心饼图
-function emptyCircle(){
+function emptyCircle(data){
+    if(!data||data.length == 0)return
     var myChart = echarts.init(document.getElementById('emptyCircle'));
+    let bgColor = '#fff';
+    let title = '总量';
+    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
+    let echartData = data;
+    let total = 0;
+    for(let i = 0;i < echartData.length;i++){
+        total += echartData[i].num
+    }
     option = {
-        color:['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'],
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b}: {c} ({d}%)'
-        },
-        // legend: {
-        //     orient: 'vertical',
-        //     left: 10,
-        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
-        // },    
+        backgroundColor: bgColor,
+        color: color,
         title: [{
-            text: '总病\n例数',
-            subtext:"1000",
+            text: '{val|' + total + '}\n{name|' + title + '}',
             top: 'center',
             left: 'center',
             textStyle: {
-                
-            },
-            subtextStyle:{
-                color:'red',
-                fontSize:'14px'
+                rich: {
+                    val: {
+                        fontSize: 24,
+                        color: '#333',
+                        fontWeight: 'bold',
+                        padding: [10, 0]
+                    },
+                    name: {
+                        fontSize: 12,
+                        fontWeight: 'normal',
+                        color: '#777',
+                    }
+                }
             }
         }],
-        series: [
-            {
-                name: '访问来源',
-                type: 'pie',
-                radius: ['50%', '70%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                itemStyle: {
-                    normal: {
-                        borderColor: '#fff',
-                        borderWidth: 2
+
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b} : {c}  ({d}%)'
+        },
+        series: [{
+            name: '',
+            type: 'pie',
+            radius: ['70%', '90%'],
+            data: echartData,
+            hoverAnimation: false,
+            itemStyle: {
+                normal: {
+                    borderColor: bgColor,
+                    borderWidth: 2
+                }
+            },
+            labelLine: {
+                normal: {
+                    length: 20,
+                    length2: 120,
+                    lineStyle: {
+                        color: '#e6e6e6'
                     }
-                },
-                labelLine:{
-                    show:false
-                },
-                emphasis: {//圆盘中心
-                    label: {
-                        show: false,
-                        fontSize: '30',
-                        fontWeight: 'bold'
+                }
+            },
+            label: {
+                normal: {
+                    show:false,
+                    formatter: params => {
+                        return params.name == 'A类'?params.name:''
                     },
-                },
-                labelLine: {
-                    show: true
-                },
-                data: [
-                    {value: 335, name: '直接访问'},
-                    {value: 310, name: '邮件营销'},
-                    {value: 234, name: '联盟广告'},
-                    {value: 135, name: '视频广告'},
-                    {value: 1548, name: '搜索引擎'}
-                ]
-            }
-        ]
-    };
+                    padding: [0 , -100, 25, -100],
+                    rich: {
+                        icon: {
+                            fontSize: 16
+                        },
+                        name: {
+                            fontSize: 14,
+                            padding: [0, 10, 0, 4],
+                            color: '#666666'
+                        },
+                        value: {
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                            color: '#333333'
+                        }
+                    }
+                }
+            },
+        }]
+    };      
     myChart.setOption(option);
 }
+//缺陷列表渲染
+function queList(data){
+    let strAll = '',tmp = `
+    <tr class="thead">
+      <td class="td01">排名</td>
+      <td class="td02">缺陷名称</td>
+      <td class="td03">数量</td>
+      <td class="td04">占比</td>
+    </tr>`
+    for(let i = 0;i < data.length;i++){
+        strAll += `
+            <tr>
+                <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
+                <td>${data[i].name}</td>
+                <td>${data[i].num}</td>
+                <td>${data[i].percentStr}</td>
+            </tr>
+        `
+    }
+    $(".qtable").html(tmp+strAll)
+}
+//饼图列表注释渲染
+function panDetail(data){
+    let strAll = '';
+    for(let i = 0;i < data.length;i++){
+        strAll += `
+            <tr class="explainLi">
+                <td class="deptName"><i class="tip"></i>${data[i].name}</td>
+                <td class="deptNum">${data[i].num}</td>
+                <td class="percent">(${data[i].percentStr})</td>
+            </tr>
+        `
+    }
+    $(".explainPan table").html(strAll)
+    $(".explainPan").css({
+        marginTop:-($(".explainPan").height()/2-20)+'px'
+    })
+}

src/js/index.js

@@ -13,7 +13,7 @@ $(function(){
 
 function initMenu(data,userInfo){
   //菜单数据填充
-  $("#menuTmpl").tmpl(data).appendTo(".menu");
+  $("#menuTmpl").tmpl(data).appendTo(".menu ul");
   //用户数据填充
   $("#userName").text(userInfo.linkman);
   //菜单收起展开

src/js/qcScore.js

@@ -1,107 +1,165 @@
+require("../css/qcScore.less");
 const $ = require('jquery');
-require("../css/qcList.less");
-// require("./../resource/My97DatePicker/WdatePicker.js")
-// require("./../resource/My97DatePicker/skin/WdatePicker.css")
-const {api} = require('./api.js')
-const {post} = require('./utils.js')
+require('jquery-templates');
+const {api,post,getUrlArgObject} = require('./utils.js');
+//本页全局变量
+let global_flawData = {};    //缺陷数据
+const global_id=getUrlArgObject("id");
+let global_activeTab=$(".sub-menu .page.active").attr("code");  //当前激活菜单项
 
-let tabList
+$(function(){
+  //getSubMenu();
+  //initScoreItem();
+  getRecordDetail();
 
-function getTabData(){
-    const param = {
-        fileCode: "",
-        name: "", //条目名
-        behosDateStart: "", //1-单项否决 0-非
-        leaveHosDateEnd: "" //0-未启用 1-启用
-    }
-    post(api.qcList,param).then(res =>{
-        console.log('ress', res)
-        if(res.data.code == '0'){
-            tabList = res.data.data.records
-            renderTab(tabList)
-        }else{}
-    }).catch((e) =>{
-    
-    })
+function initMenu(data){
+  //菜单数据填充
+  $("#subMenuTmpl").tmpl(data).appendTo("#subMenu");
+  //菜单收起展开
+  $(".list-1").on("click",function(){
+    $(".list-1 .slide-up").removeClass('slide-up');
+    $(this).toggleClass('slide-up');
+    $(this).find("ul").slideToggle();
+  });
+  $(".list-1 li").on("click",function(e){
+    e.stopPropagation();
+  });
+  //右侧内容切换
+  $(".page").on("click",function(){
+    //选中样式
+    $(".sub-menu .active").removeClass('active');
+    $(this).addClass("active");
+    //显示对应内容
+    const code=$(this).attr("code");
+    global_activeTab=code;
+    $(".content-item,.flaw-item").hide();
+    $(".content-item[code="+code+"],.flaw-item[code="+code+"]").show();
+  });
 }
 
-getTabData()
-function renderTab(data){
-    let str = ``
-    let hasSelectAll = true
-    for(let i = 0; i < data.length; i++){
-        const item = data[i]
-        if(!item.hasSelect){
-            hasSelectAll = false
-        }
-        str += `
-            <tr  data-index=${i}>
-                <td class="scoreOperaItem">${item.hasSelect ? '选择':'未选择'}</td>
-                <td>${item.behospitalCode}</td>
-                <td>${item.fileCode}</td>
-                <td>${item.name}</td>
-                <td>${item.sex}</td>
-                <td>${item.age}</td>
-                <td>${item.bedCode}</td>
-                <td>${item.behospitalDate}</td>
-                <td>${item.leaveHospitalDate}</td>
-                <td>${item.doctorName}</td>
-                <td>${item.behDeptName}</td>
-                <td>${item.level}</td>
-                <td>${item.scoreRes}</td>
-                <td>${item.gradeTime}</td>
-            </tr>
-        `
+/*function getSubMenu(){
+  post(api.getSubMenu).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+      initMenu(data);
+      $(".sub-menu li:first-child.page").addClass("active");
     }
-    if(hasSelectAll){
-        $('.scoreOpera').html("选择")
-        $('.scoreOpera').attr("data-selectall",true)
-    }else{
-        $('.scoreOpera').html("未选择")
-        $('.scoreOpera').attr("data-selectall",false)
+  });
+};*/
+
+//获取病例明细
+function getRecordDetail(){
+  post(api.getRecordDetail,{'behospitalCode':global_id}).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+      const {beHospital,result,msg} = data;
+      const info=Object.assign(beHospital,result);
+      initMenu(JSON.parse(result.menuData));
+      $(".sub-menu li:first-child.page").addClass("active");
+     global_activeTab=$(".sub-menu .page.active").attr("code");
+      initPatientInfo(info);
+      initContent(result.pageData);
+      initScoreItem(msg);
+      global_flawData=msg;
     }
-    $('tbody').html(str)
-    bindScoreOperaItem()
-}
-//全选绑定
-bindOperaAll()
-function bindScoreOperaItem(){
-    $(".scoreOperaItem").on("click",  function(e){
-        const index = $(this).parent().attr("data-index")
-        console.log(index)
-        tabList[index].hasSelect = tabList[index].hasSelect ? false:true
-        renderTab(tabList)
-    })
+  });
 }
 
-function bindOperaAll(){
-    $('.scoreOpera').on("click", function(e){
-        const hasSelectAll = $('.scoreOpera').attr("data-selectall")
-        console.log('hasSelectAll',hasSelectAll)
-        if(hasSelectAll == 'true'){
-
-            for(let i = 0; i < tabList.length; i++){
-                tabList[i].hasSelect = false
-            }
-        }else{
-            for(let i = 0; i < tabList.length; i++){
-                tabList[i].hasSelect = true
-            }
-        }
-        renderTab(tabList)
-    })
+//填充患者信息
+function initPatientInfo(data){
+  $("#infoTmpl").tmpl(data).appendTo("#patientInfo");
+}
+//显示病例模块明细
+function initContent(data){
+  const obj = JSON.parse(data);
+  for(let k in obj){
+    $("#contentTmpl").tmpl({title:k,info:obj[k]}).appendTo("#contentInfo");
+  }
+  $(".content-item[code="+global_activeTab+"]").show();
+  console.log(obj)
 }
 
-function recordScore(behospitalCode){
-    const param = {
-        behospitalCode: behospitalCode
+//评分项数据填充
+function initScoreItem(data){
+  $("#flaws .flaw-box").html("");
+  for(let k in data){
+    $("#flawTmpl").tmpl(data[k]).appendTo("#flaws .flaw-box");
+  }
+  $(".flaw-item[code="+global_activeTab+"]").show();
+  $(".flaw-item .oper a").click(function () {
+    //const activeTab=$(".sub-menu .page.active").attr("code");
+    const i = $(".flaw-item[code="+global_activeTab+"]").index($(this).parents(".flaw-item"));
+    const code=$(this).attr("code");
+    const isEdit = $(this).is(".edit-flaw");
+    showModal(isEdit?'0':'1',code,i);
+  })
+}
+//删除评分项
+function delScore(id){
+  const param={
+    'behospitalCode':global_id,
+    'optResultAlgVO':{
+      'id':id
     }
-    post(api.recordScore,param).then(res =>{
-        if(res.data.code == '0'){
-      
-        }else{}
-    }).catch((e) =>{
-    
-    })
+  };
+  post(api.delScore,param).then(function(res){
+    if(res.data.code==='0'){
+      $("#delModal").hide();
+      updateFlaws();
+      alert('删除成功');
+    }
+  });
 }
-
+//修改评分项
+function editScore(info){
+  const param={
+    "behospitalCode": global_id,
+    "optResultAlgVO": info
+};
+  post(api.editScore,param).then(function(res){
+    if(res.data.code==='0'){
+      $("#delModal").hide();
+      updateFlaws();
+      alert("修改成功");
+    }
+  });
+}
+//显示删除/修改弹窗
+function showModal(flag,code,i){
+  $("#delModal .modal-body").html("");
+  $("#delModal").show();
+  $("#delModal .confirm").off("click");
+  const info = global_flawData[global_activeTab][i];
+  if(flag==='0'){   //修改
+    $("#delModal .title").text("修改评分");
+    $("#editTmpl").tmpl(info).appendTo("#delModal .modal-body");
+    $("#delModal .confirm").click(function(){
+      const obj = Object.assign({},info,{msg:$("#delModal #qcMsg").val(),score:$("#delModal #qcScore").val()});
+      editScore(obj);
+    });
+  }else{
+    $("#delModal .title").text("删除评分");
+    $("#delModal .modal-body").html('<p>确定要删除该评分记录吗？</p>');
+    $("#delModal .confirm").click(function(){
+      delScore(code,info);
+    });
+  }
+}
+//更新缺陷列表
+  function updateFlaws(){
+  const param = {
+    'behospitalCode':global_id,
+    'paramStr':[
+      "msg"
+    ]
+  };
+    post(api.getRecordDetail,param).then(function(res){
+      if(res.data.code==='0'){
+        const data = res.data.data;
+        const {msg} = data;
+        initScoreItem(msg);
+        global_flawData=msg;
+      }
+    });
+  }
+});

src/js/utils.js

@@ -7,13 +7,20 @@ const pageMap={
   'YH-KZT':'console.html',
   'YH-JCSJWH-MKSJWH':'moduleManager.html',
   'YH-JCSJWH-TMSJWH':'itemManager.html',
-  'YH-BLZK-ZKPFXQ':'qcList.html',
-  'YH-BLZK-ZKPF':'qcScore.html',
+  'YH-BLZK-ZKPF':'qcList.html',
   'YH-TJFX':'statistics.html',
+};
+const contentMap={
+
 };
 const api={
   getMenu:'/sys/user/getUserOrgMenu',     //获取菜单
-  midifyPassword:'/sys/user/midifyPassword',     //获取菜单
+  midifyPassword:'/sys/user/midifyPassword',     //修改密码
+  getSubMenu:'/qc/mode/getMenu',   //获取质控评分菜单
+  delScore:'/qc/behospitalInfo/delCase' ,//删除评分项
+  editScore:'/qc/behospitalInfo/updCase' ,//修改评分
+  addScore:'/qc/behospitalInfo/addCase' ,//添加评分项
+  getRecordDetail:'/qc/behospitalInfo/getByBehospitalCode', //获取病例明细
 };
 
 //重写assign方法
@@ -118,7 +125,23 @@ const delCookie = function(name){
   let cval=getCookie(name);
   if(cval!=null)
       document.cookie= name + "="+cval+";expires="+exp.toGMTString();
+};
+
+//弹窗关闭事件
+$(".modal .close").click(function(){
+  $(".modal").hide();
+});
+//计算容器高度
+function setBoxHeight(){
+  const ht=window.innerHeight;
+  $(".main-part").height((ht-60)+'px');
+  $(".content-ht").height((ht-126)+"px");
 }
+setBoxHeight();
+$(window).resize(function(){
+  setBoxHeight();
+});
+
 module.exports = {
   pageMap,
   api,

webpack.config.js

@@ -110,7 +110,7 @@ module.exports = {
       title: 'qcScore.html',
       template: path.resolve(__dirname, 'src/html', 'qcScore.html'),
       filename: 'qcScore.html',
-      chunks: ['index', 'vendor', 'common','qcScore'],
+      chunks: [ 'qcScore','vendor', 'common'],
       hash: true, //防止缓存
       inject: true,
       minify: {