Merge branch 'byll' into dev_zxc

src/css/console.less

@@ -1,28 +1,141 @@
 .echarts {
-  width: 400px;
+  width: 100%;
   height: 500px;
 }
+.barChartPay {
+  width: 100%;
+  height: 500px;
+}
+.emptyCircle {
+  width: 50%;
+  height: 300px;
+  float: left;
+}
 .partWrap {
-  margin-top: 30px;
+  overflow: auto;
+  height: 100%;
+  ul {
+    padding: 0 40px;
+  }
   .partLi {
     float: left;
-    border: 1px solid #ccc;
-    padding: 20px;
-    border-radius: 5px;
-    margin: 15px;
+    margin: 30px 0;
+    width: 20%;
+    height: 114px;
+    overflow: hidden;
+    .partIn {
+      height: 114px;
+      box-sizing: border-box;
+      border-radius: 3px;
+      padding: 10px 15px;
+      border: 1px solid #E2E5EF;
+      margin: 0 6px;
+    }
     p {
-      padding: 10px 0;
-      font-size: 16px;
+      padding-bottom: 10px;
+      color: #51649C;
+    }
+    .top {
+      margin-bottom: 20px;
     }
     .btm {
+      padding-bottom: 4px;
       img {
         float: left;
+        width: 40px;
       }
       span {
         float: right;
         font-size: 28px;
-        color: blue;
+        color: #51649C;
       }
     }
   }
+  
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #E2E5EF;
+    height: 44px;
+    line-height: 44px;
+    padding-left: 15px;
+  }
+}
+.swiperWrap {
+  width: 300px;
+  border: 1px solid #ccc;
+}
+.grayLine {
+  height: 10px;
+  background-color: #f5f5f5;
+}
+.partTitle {
+  height: 44px;
+  line-height: 44px;
+  padding-left: 10px;
+  border-bottom: 1px solid #E2E5EF;
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  box-sizing: border-box;
+}
+.pubEchart {
+  width: 50%;
+  display: inline-block;
+  border-bottom: 10px solid #f5f5f5;
+
+}
+.paymoney {
+  border-right: 5px solid #f5f5f5;
+  box-sizing: border-box;
+}
+.dept {
+  border-left: 5px solid #f5f5f5;
+  box-sizing: border-box;
+}
+.defect {
+  border-bottom: 10px solid #f5f5f5;
+  border-right: 5px solid #f5f5f5;
+  box-sizing: border-box;
+  width: 40%;
+  display: inline-block;
+  height: 455px;
+  overflow: hidden;
+  .list {
+    padding: 20px 30px;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+  .qtable {
+    width: 100%;
+  }
+  td {
+    padding: 8px 15px;
+  }
+  .td01 {
+    width: 40px;
+  }
+  .td02 {
+    
+  }
+  .td03 {
+    width: 40px;
+  }
+  .td04 {
+    width: 40px;
+  }
+}
+.circle {
+  height: 455px;
+  width: 60%;
+  display: inline-block;
+  border-bottom: 10px solid #f5f5f5;
+  border-left: 5px solid #f5f5f5;
+  box-sizing: border-box;
+  margin-bottom: 60px;
+}
+.btmWrap {
+  width: 100%;
+  overflow: hidden;
 }

src/css/index.less

@@ -126,7 +126,7 @@
   }
 }
 .main{
-  margin-left:215px;
+  margin-left:@menuWt;
   height: 100%;
   iframe{
     width: 100%;
@@ -135,18 +135,27 @@
 }
 //修改密码
 .modalAction {
-  position: fixed;
-  width: 200px;
-  height: 200px;
-  left: 50%;
-  top: 50%;
-  margin-left: -100px;
-  margin-top: -100px;
-  padding: 20px;
-  background-color: #ccc;
-  display: none;
+  // padding: 20px;
+  input {
+    border: 1px solid #E2E5EF;
+    width: 300px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 3px;
+    margin-bottom: 15px;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+  p span {
+    width: 90px;
+    display: inline-block;
+    text-align: right;
+  }
   .waring {
-    color: red;
-    display: none;
+    text-align: left;
+    i {
+      margin-left: 15px;
+      color: #FF4D4F;
+    }
   }
 }

src/css/login.less

@@ -1,10 +1,191 @@
-input {
-  border: 1px solid #ccc;
+body {
+  background-color: #f5f5f5;
 }
 .login {
-  margin: 100px;
   .waring {
-    color: red;
-    display: none;
+    color: #FF4D4F;
+    margin-top: 18px;
+    height: 18px;
+  }
+  .logoTop {
+    height:50px;
+    line-height:50px;
+    padding-left: 20px;
+    background:linear-gradient(123deg,rgba(90,142,238,1) 0%,rgba(126,171,255,1) 100%);
+    img {
+      vertical-align: middle;
+    }
+    span {
+      width: 1px;
+      height: 15px;
+      display: inline-block;
+      background-color: #fff;
+      position: relative;
+      top: 3px;
+      left: -1px;
+      margin: 0 3px;
+    }
+    i {
+      color: #fff;
+      position: relative;
+      top: 1px;
+    }
+  }
+  .sureLogin {
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #5A8EEE;
+    color: #fff;
+    border-radius:4px;
+    margin: 20px auto 0;
+  }
+}
+.loginForm {
+  width: 800px;
+  height: 520px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -400px;
+  margin-top: -260px;
+  border-radius:20px;
+  background-color: #fff;
+  .loginBg {
+    float: left;
+  }
+  .message {
+    float: left;
+    width: 50%;
+    padding:96px 50px;
+    box-sizing: border-box;
+    .welcome {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 50px;
+    }
+  }
+  .perPub {
+    p {
+      font-size: 12px;
+      padding-bottom: 8px;
+    }
+    img {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
+  .iptWrap {
+    padding-left: 10px;
+    box-sizing: border-box;
+    border: 1px solid #E2E5EF;
+    width: 300px;
+    height: 40px;
+    line-height: 38px;
+  }
+}
+
+.alertModal {
+  .modalBg {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0, 0, 0, .3);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+  }
+  .modalMain {
+    width: 300px;
+    // height: 200px;
+    background-color: #fff;
+    position: fixed;
+    left: 50%;
+    top: 30%;
+    margin-left: -150px;
+    // margin-top: -100px;
+    padding-bottom: 10px;
+  }
+  .title {
+    border-bottom: 1px solid #eee;
+    background-color: #F8F8F8;
+    line-height: 40px;
+    height: 40px;
+    position: relative;
+    padding-left: 15px;
+    font-size: 16px;
+    img {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    padding: 25px 15px;
+    font-size: 14px;
+    text-align: center;
+  }
+  .btns {
+    height: 45px;
+    text-align: center;
+    span {
+      border-radius: 5px;
+      float: right;
+      cursor: pointer;
+      border: 1px solid #dedede;
+      background-color: #fff;
+      height: 28px;
+      line-height: 28px;
+      margin: 5px 5px 0;
+      padding: 0 15px;
+      color: #333;
+      border-radius: 2px;
+      font-weight: 400;
+      text-decoration: none;
+    }
+    .sure {
+      background-color: #1E9FFF;
+      border-color: #1E9FFF;
+      color: #fff;
+    }
+    .quite {
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+  }
+}
+.divModal {
+  position: fixed;
+}
+.modaltip {
+  position: fixed;
+  top: 40%;
+  left: 50%;
+  padding: 10px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(0, 0, 0, .6);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+}
+.loading {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+  img {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    margin-left: -20px;
+    margin-top: -20px;
   }
 }

src/css/reset.less

@@ -89,3 +89,107 @@ textarea {
 .fr{
   float: right;
 }
+
+.alertModal {
+  .modalBg {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0, 0, 0, .3);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+  }
+  .modalMain {
+    width: 300px;
+    // height: 200px;
+    background-color: #fff;
+    position: fixed;
+    left: 50%;
+    top: 30%;
+    margin-left: -200px;
+    // margin-top: -100px;
+    padding-bottom: 20px;
+  }
+  .title {
+    border-bottom: 1px solid #eee;
+    background-color: #F8F8F8;
+    line-height: 40px;
+    height: 40px;
+    position: relative;
+    padding-left: 15px;
+    font-size: 16px;
+    img {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    padding: 25px 15px;
+    font-size: 14px;
+    text-align: center;
+  }
+  .btns {
+    height: 45px;
+    text-align: center;
+    span {
+      border-radius: 5px;
+      display: inline-block;
+      // float: right;
+      cursor: pointer;
+      border: 1px solid #dedede;
+      height: 40px;
+      line-height: 40px;
+      width: 120px;
+      margin: 5px 5px 0;
+      padding: 0 15px;
+      color: #333;
+      border-radius: 3px;
+      font-weight: 400;
+      text-decoration: none;
+    }
+    .sure {
+      background-color: #5A8EEE;
+      border-color: #1E9FFF;
+      color: #fff;
+    }
+    .quite {
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+  }
+}
+.divModal {
+  position: fixed;
+}
+.modaltip {
+  position: fixed;
+  top: 40%;
+  left: 50%;
+  padding: 10px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(0, 0, 0, .6);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+}
+.loading {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
+  img {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    margin-left: -20px;
+    margin-top: -20px;
+  }
+}

src/html/console.html

@@ -3,27 +3,104 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./resource/swiper.css">
   <title>Document</title>
 </head>
-<body>
-  <div class="partWrap">
-    <ul class="clearfix">
-      <li class="partLi">
-        <div>
-          <p class="top">本月病例数</p>
-          <p class="btm clearfix">
-            <img src="../images/jianb.png" alt="">
-            <span>33</span>
-          </p>
-        </div>
-      </li>
-      <li>sds</li>
-      <li>sds</li>
+<body >
+  <div class="partWrap clearfix">
+    <p class="partTitle">住院病案首页数据质量管理与控制指标</p>
+    <ul class="clearfix partAll">
+
     </ul>
-  </div>
-  <div id="main" class="echarts">
+    <!-- <div class="swiperWrap swiper-container">
+      <div class="swiper-wrapper">
+          <div class="swiper-slide"> Slide1</div>
+          <div class="swiper-slide"> Slide2</div>
+          <div class="swiper-slide"> Slide3</div>
+          <div class="swiper-slide"> Slide4</div>
+          <div class="swiper-slide"> Slide5</div>
+          <div class="swiper-slide"> Slide6</div>
+      </div>
+    </div> -->
+    <div class="grayLine"></div>
+    <div class="pubEchart paymoney">
+      <p class="title">死亡疑难危重症占比</p>
+      <div id="barChartPay" class="barChartPay"></div>
+    </div>
+    <div class="pubEchart dept">
+      <p class="title">死亡疑难危重症占比</p>
+      <div id="barChart" class="echarts"></div>
+    </div>
     
+    <div class="btmWrap">
+      <div class="defect fl">
+        <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">
+        <p class="title">各科室缺陷占比</p>
+        <div id="emptyCircle" class="emptyCircle"></div>
+      </div>
+    </div>
+    <br><br><br>
   </div>
-  
+  <script src="./resource/swiper.min.js"></script>
 </body>
 </html>

src/html/index.html

@@ -42,14 +42,7 @@
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
           </div>
       </div>
-      <div class="modalAction">
-          <p><span>原始密码：</span><input type="text" class="oldword"></p>
-          <p><span>新密码：</span><input type="text" class="newword"></p>
-          <p><span>确认密码：</span><input type="text" class="sureword"></p>
-          <p class="waring"></p>
-          <span class="sureChange">确认修改</span>
-      </div>
-  </div>
+    </div>
 </body>
 
 </html>

src/html/login.html

@@ -8,17 +8,33 @@
 </head>
 <body>
   <div class="login">
-    <div class="loginForm">
-      <div class="name">
-        <span>用户名：</span>
-        <input type="text" placeholder="请输入用户名称" id="username" value="h1">
-      </div>
-      <div class="word">
-        <span>密码：</span>
-        <input type="text" placeholder="请输入密码" id="password" value="a123456">
+    <div class="logoTop">
+      <img src="../images/lantone.png" alt="">
+      <span></span>
+      <i>AI病历质控平台</i>
+    </div>
+    <div class="loginForm clearfix">
+      <img src="../images/loginBg.png" class="loginBg" alt="">
+      <div class="message">
+        <p class="welcome">欢迎使用！</p>
+        <div class="perPub">
+          <p>用户名</p>
+          <div class="iptWrap">
+            <img src="../images/yonghu.png" alt="">
+            <input type="text" placeholder="请输入用户名称" id="username" value="luolei">
+          </div>
+        </div>
+        <br>
+        <div class="perPub">
+          <p>密码</p>
+          <div class="iptWrap">
+            <img src="../images/mima.png" alt="">
+            <input type="text" placeholder="请输入密码" id="password" value="a123456">
+          </div>
+        </div>
+        <p class="waring"></p>
+        <div class="sureLogin">登录</div>
       </div>
-      <p class="waring">*****错误 </p>
-      <div class="sureLogin">登录</div>
     </div>
   </div>
 </body>

src/js/console.js

@@ -2,76 +2,286 @@ const $ = require('jquery');
 require("../css/reset.less")
 require("../css/console.less")
 require("../images/logo.png")
+
 // import 'zrender/lib/svg/svg';
 const echarts = require('echarts');
-console.log(echarts)
-$(function(){
-  // var myChart = echarts.init(document.getElementById('echarts'));
-  var myChart = echarts.init(document.getElementById('main'));
-  // 绘制图表
-  let app = {}
-  let option = {
-    title: {
-        text: '饼图程序调用高亮示例',
-        left: 'center'
-    },
-    tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
-    },
-    legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
-    },
-    series: [
-          {
-              name: '访问来源',
-              type: 'pie',
-              radius: '55%',
-              center: ['50%', '60%'],
-              data: [
-                  {value: 335, name: '直接访问'},
-                  {value: 310, name: '邮件营销'},
-                  {value: 234, name: '联盟广告'},
-                  {value: 135, name: '视频广告'},
-                  {value: 1548, name: '搜索引擎'}
-              ],
-              emphasis: {
-                  itemStyle: {
-                      shadowBlur: 10,
-                      shadowOffsetX: 0,
-                      shadowColor: 'rgba(0, 0, 0, 0.5)'
-                  }
-              }
-          }
-      ]
-  };
-
-  app.currentIndex = -1;
+const {post,setCookie,delCookie} = require('../js/utils.js');
 
-  setInterval(function () {
-      var dataLen = option.series[0].data.length;
-      // 取消之前高亮的图形
-      myChart.dispatchAction({
-          type: 'downplay',
-          seriesIndex: 0,
-          dataIndex: app.currentIndex
-      });
-      app.currentIndex = (app.currentIndex + 1) % dataLen;
-      // 高亮当前图形
-      myChart.dispatchAction({
-          type: 'highlight',
-          seriesIndex: 0,
-          dataIndex: app.currentIndex
-      });
-      // 显示 tooltip
-      myChart.dispatchAction({
-          type: 'showTip',
-          seriesIndex: 0,
-          dataIndex: app.currentIndex
-      });
-  }, 1000);
-  myChart.setOption(option);
+$(function(){
+  var mySwiper = new Swiper('.swiper-container',{
+    // autoplay : 500,//可选选项，自动滑动
+    loop : true,//可选选项，开启循环
+    slidesPerView : 3,
+  })
+  initConsole()
+  barChart()
+  barChartPay()
+  emptyCircle()
 })
-
+//控制台数
+function initConsole(){
+    let url = {
+        '本月病历数':require("../images/icon6.png"),
+        '本月不合格病历-机器':require("../images/icon7.png"),
+        '本月质控数-机器':require("../images/icon10.png"),
+        '本月甲级病历-机器':require("../images/icon8.png"),
+        '本月乙级病历-机器':require("../images/icon9.png")
+    }
+    post('/console/mrStatistics',{
+        // "endDate": "string",
+        // "hospitalId": "string",
+        // "limitCount": 0,
+        // "startDate": "string",
+        "type": 1//1月2年
+    }).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>
+                `
+            }
+            $(".partAll").append(dom)
+          }
+        }
+    })
+}
+//柱状图
+function barChart(){
+    var myChart = echarts.init(document.getElementById('barChart'));
+    option = {
+        color: ['#3398DB'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                axisTick: {
+                    alignWithLabel: true
+                },
+                axisLabel: {//x轴刻度
+                    textStyle: {
+                        color: 'blue'
+                    }
+                },
+                axisLine: {//x轴
+                    lineStyle:{
+                        color:'red'
+                    }
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {//y轴
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {//y轴刻度
+                    textStyle: {
+                        color: 'red'
+                    }
+                },
+                splitLine:{//分割线
+                    lineStyle:{
+                        color:'red'
+                    }
+                }
+            }
+            
+        ],
+        title:[{
+            text: '医院运行指标',
+            top: 20,
+            left: 20,
+            textStyle: {
+                fontSize: 14,
+                color:'#666666',
+                fontWeight: 400
+            }
+        }],
+        series: [
+            {
+                name: '直接访问',
+                type: 'bar',
+                barWidth: '30%',
+                data: [10, 52, 200, 334, 390, 330, 220]
+            }
+        ]
+    };
+    myChart.setOption(option);
+    
+}
+//柱状图
+function barChartPay(){
+    var myChart = echarts.init(document.getElementById('barChartPay'));
+    option = {
+        color: ['#3398DB'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                axisTick: {
+                    alignWithLabel: true
+                },
+                axisLabel: {//x轴刻度
+                    textStyle: {
+                        color: 'blue'
+                    }
+                },
+                axisLine: {//x轴
+                    lineStyle:{
+                        color:'red'
+                    }
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: {//y轴
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {//y轴刻度
+                    textStyle: {
+                        color: 'red'
+                    }
+                },
+                splitLine:{//分割线
+                    lineStyle:{
+                        color:'red'
+                    }
+                }
+            }
+            
+        ],
+        title:[{
+            text: '医院运行指标',
+            top: 20,
+            left: 20,
+            textStyle: {
+                fontSize: 14,
+                color:'#666666',
+                fontWeight: 400
+            }
+        }],
+        series: [
+            {
+                name: '直接访问',
+                type: 'bar',
+                barWidth: '30%',
+                data: [10, 52, 200, 334, 390, 330, 220]
+            }
+        ]
+    };
+    myChart.setOption(option);
+    
+}
+//空心饼图
+function emptyCircle(){
+    var myChart = echarts.init(document.getElementById('emptyCircle'));
+    option = {
+        color:['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'],
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        // legend: {
+        //     orient: 'vertical',
+        //     left: 10,
+        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+        // },    
+        title: [{
+            text: '总病\n例数',
+            subtext:"1000",
+            top: 'center',
+            left: 'center',
+            textStyle: {
+                
+            },
+            subtextStyle:{
+                color:'red',
+                fontSize:'14px'
+            }
+        }],
+        series: [
+            {
+                name: '访问来源',
+                type: 'pie',
+                radius: ['50%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                itemStyle: {
+                    normal: {
+                        borderColor: '#fff',
+                        borderWidth: 2
+                    }
+                },
+                labelLine:{
+                    show:false
+                },
+                emphasis: {//圆盘中心
+                    label: {
+                        show: false,
+                        fontSize: '30',
+                        fontWeight: 'bold'
+                    },
+                },
+                labelLine: {
+                    show: true
+                },
+                data: [
+                    {value: 335, name: '直接访问'},
+                    {value: 310, name: '邮件营销'},
+                    {value: 234, name: '联盟广告'},
+                    {value: 135, name: '视频广告'},
+                    {value: 1548, name: '搜索引擎'}
+                ]
+            }
+        ]
+    };
+    myChart.setOption(option);
+}

src/js/index.js

@@ -2,7 +2,8 @@ require("../css/index.less");
 const $ = require('jquery');
 require('jquery-templates');
 const md5 = require('js-md5');
-const {api,post,pageMap} = require('./utils.js');
+require("./modal.js")
+const {api,post,pageMap,delCookie} = require('./utils.js');
 
 $(function(){
   getMenu();
@@ -44,12 +45,22 @@ function getMenu(){
 };
 
 function sureChangeWord(){
-  $('.container').on('click','.sureChange',function(){
-    let oldword = $(".oldword").val()
-    let newword = $(".newword").val()
-    let sureword = $(".sureword").val()
+  $(document).on('click','.sureChange',function(){
+    let oldword = $(".oldword").val().trim()
+    let newword = $(".newword").val().trim()
+    let sureword = $(".sureword").val().trim()
+    if(!oldword){
+      $(".modalAction .waring").css('display','block').find("i").html('请输入原始密码')
+      return
+    }else if(!newword){
+      $(".modalAction .waring").css('display','block').find("i").html('请输入新密码')
+      return
+    }else if(!sureword){
+      $(".modalAction .waring").css('display','block').find("i").html('请再次输入新密码')
+      return
+    }
     if(newword != sureword){
-      $(".modalAction .waring").css('display','block').html('两次密码不一致')
+      $(".modalAction .waring").css('display','block').find("i").html('两次密码不一致')
       return
     }
     changeWord(oldword,newword)
@@ -62,10 +73,9 @@ function changeWord(oldword,newword){
   }).then(function(res){
     const data = res.data;
     if(data.code==='0'){
-      console.log(data)
       window.location.href = './login.html'
     }else{
-      $(".modalAction .waring").css('display','block').html(data.msg)
+      $(".modalAction .waring").css('display','block').find("i").html(data.msg)
       return
     }
   });
@@ -77,6 +87,23 @@ $(".setting").click(function(){
 //点击修改密码
 $(".container").on('click','#changeWord',function(){
   const status = $(".modalAction").css("display")
+  $.alerModal({
+    title:"修改密码",
+    type:"modal",
+    width:'450',
+    time:'1000',
+    sureText:'保存',
+    message:`
+    <div class="modalAction">
+      <p><span>原密码：</span><input type="text" placeholder="请输入原密码" class="oldword"></p>
+      <p><span>新密码：</span><input type="text" placeholder="请输入新密码" class="newword"></p>
+      <p><span>确认新密码：</span><input type="text" placeholder="请输入新密码" class="sureword"></p>
+      <p class="waring"><span></span><i></i></p>
+    </div>
+  `});
   $(".userAction").hide();
-  $(".modalAction").css('display',status=='block'?'none':'block')
 })
+//推出登录
+$(".login-out").click(function(){
+  delCookie('accessToken')
+})

src/js/login.js

@@ -1,13 +1,16 @@
 const $ = require('jquery');
 require("../css/reset.less")
 require("../css/login.less")
-const {post,setCookie} = require('../js/utils.js');
+require("./modal.js")
+const {post,setCookie,delCookie} = require('../js/utils.js');
 const url = '/sys/user/getJwt';
 const md5 = require('js-md5');
 $(function(){
+  delCookie('accessToken')
   $(".sureLogin").click(()=>{
     let username = $("#username").val();
     let password = md5($("#password").val());
+    $.alerModal({type:"loading"});
     post(url,{
       username:username,
       password:password
@@ -15,11 +18,17 @@ $(function(){
       const data = res.data;
       if(data.code == 0){
         setCookie('accessToken',data.data.accessToken)
-        alert('登录成功')
-        window.location.href = '/index.html'
+        $(".divModal").remove()
+        $.alerModal({"message":"登录成功",type:"tip",time:'1000'});
+        setTimeout(() => {
+          window.location.href = '/index.html'
+        }, 1000);
       }else{
+        $(".divModal").remove()
         $(".login .waring").css('display','block').html(data.msg)
       }
+    }).catch(()=>{
+      $(".divModal").remove()
     })
   })
 });

src/js/modal.js

@@ -0,0 +1,59 @@
+const jQuery = require('jquery');
+
+(function ($) {
+    let close = require("../images/wordClose.png")
+    let loadingImg = require("../images/loading.gif")
+    $.alerModal = function (options) {
+        var dft = {
+            sureBtn:true,
+            quiteBtn:false,
+            width:"400",
+            title:"标题",
+            sureText:"确定",
+            message: '<p class="tip">内容</p>',
+            time: 1500,
+            type:'modal',//tip,loading
+            callback:function(){
+                alert(99)
+            }
+        };
+        var ops = $.extend(dft, options || {});
+        var html = `
+            <div class="alertModal">
+                <div class="modalBg"></div>
+                <div class="modalMain" style="width:${ops.width}px;margin-left:-${ops.width/2}px">
+                <p class="title">${ops.title} <img src="${close}" alt=""></p>
+                <div class="content">
+                    ${ops.message}
+                </div>
+                <div class="btns clearfix">
+                    <span class="quite" style="display:${ops.quiteBtn?'inlineBlock':'none'}">取消</span>
+                    <span class="sure sureChange" style="display:${ops.sureBtn?'inlineBlock':'none'}">${ops.sureText}</span>
+                </div>
+                </div>
+            </div>
+        `
+        var tip = `
+            <div class="modaltip">${ops.message}</div>
+        `
+        var loading = `
+            <div class="loading"><img src="${loadingImg}" alt=""></div>
+        `
+        var box = $("<div/>",{
+            "class":"divModal",
+            "html":ops.type == 'tip'?tip:ops.type == 'loading'?loading:html
+        }).css({
+            left:$(".modaltip").width()/2+'px',
+            top:$(".modaltip").height()/2+'px'
+        })
+        $("body").append(box)
+        if(ops.type == 'tip'){
+            setTimeout(function(){
+                box.remove();
+            }, ops.time);
+        }
+        $(document).on('click',".alertModal .title img, .modalBg",function(){
+            box.remove();
+        })
+    }
+})(jQuery);

src/resource/swiper.css

@@ -0,0 +1,125 @@
+/*
+ * Swiper 2.7.6
+ * Mobile touch slider and framework with hardware accelerated transitions
+ *
+ * http://www.idangero.us/sliders/swiper/
+ *
+ * Copyright 2010-2015, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under GPL & MIT
+ *
+ * Released on: February 11, 2015
+*/
+/* ===============================================================
+Basic Swiper Styles 
+================================================================*/
+.swiper-container {
+	margin:0 auto;
+	position:relative;
+	overflow:hidden;
+	direction:ltr;
+	-webkit-backface-visibility:hidden;
+	-moz-backface-visibility:hidden;
+	-ms-backface-visibility:hidden;
+	-o-backface-visibility:hidden;
+	backface-visibility:hidden;
+	/* Fix of Webkit flickering */
+	z-index:1;
+}
+.swiper-wrapper {
+	position:relative;
+	width:100%;
+	-webkit-transition-property:-webkit-transform, left, top;
+	-webkit-transition-duration:0s;
+	-webkit-transform:translate3d(0px,0,0);
+	-webkit-transition-timing-function:ease;
+	
+	-moz-transition-property:-moz-transform, left, top;
+	-moz-transition-duration:0s;
+	-moz-transform:translate3d(0px,0,0);
+	-moz-transition-timing-function:ease;
+	
+	-o-transition-property:-o-transform, left, top;
+	-o-transition-duration:0s;
+	-o-transform:translate3d(0px,0,0);
+	-o-transition-timing-function:ease;
+	-o-transform:translate(0px,0px);
+	
+	-ms-transition-property:-ms-transform, left, top;
+	-ms-transition-duration:0s;
+	-ms-transform:translate3d(0px,0,0);
+	-ms-transition-timing-function:ease;
+	
+	transition-property:transform, left, top;
+	transition-duration:0s;
+	transform:translate3d(0px,0,0);
+	transition-timing-function:ease;
+
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+.swiper-free-mode > .swiper-wrapper {
+	-webkit-transition-timing-function: ease-out;
+	-moz-transition-timing-function: ease-out;
+	-ms-transition-timing-function: ease-out;
+	-o-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+	margin: 0 auto;
+}
+.swiper-slide {
+	float: left;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/* IE10 Windows Phone 8 Fixes */
+.swiper-wp8-horizontal {
+	-ms-touch-action: pan-y;
+}
+.swiper-wp8-vertical {
+	-ms-touch-action: pan-x;
+}
+
+/* ===============================================================
+Your custom styles, here you need to specify container's and slide's
+sizes, pagination, etc.
+================================================================*/
+.swiper-container {
+	/* Specify Swiper's Size: */
+
+	/*width:200px;
+	height: 100px;*/
+}
+.swiper-slide {
+	/* Specify Slides's Size: */
+	
+	/*width: 100%;
+	height: 100%;*/
+}
+.swiper-slide-active {
+	/* Specific active slide styling: */
+	
+}
+.swiper-slide-visible {
+	/* Specific visible slide styling: */	
+
+}
+/* ===============================================================
+Pagination Styles
+================================================================*/
+.swiper-pagination-switch {
+	/* Stylize pagination button: */	
+	
+}
+.swiper-active-switch {
+	/* Specific active button style: */	
+	
+}
+.swiper-visible-switch {
+	/* Specific visible button style: */	
+	
+}