Преглед на файлове

滚动条修改,未完成

zhangxc преди 5 години
родител
ревизия
072ab95cb8
променени са 7 файла, в които са добавени 412 реда и са изтрити 159 реда
  1. 1 1
      src/css/console.less
  2. 1 1
      src/css/index.less
  3. 58 0
      src/css/roll.css
  4. 172 153
      src/html/console.html
  5. 11 2
      src/js/console.js
  6. 167 0
      src/js/scrollBar.js
  7. 2 2
      webpack.config.js

+ 1 - 1
src/css/console.less

@@ -1,5 +1,5 @@
 @import './reset.less';
-
+@import './roll.css';
 body.console {
   overflow: auto;
   overflow-y: hidden;

+ 1 - 1
src/css/index.less

@@ -1,5 +1,5 @@
 @import './reset.less';
-
+@import './roll.css';
 .container{
   height: 100%;
 }

+ 58 - 0
src/css/roll.css

@@ -0,0 +1,58 @@
+body { margin: 0; padding: 0; font:14px/22px 'Microsoft Yahei'; color: #444; background-color:#eee;}
+div,p {margin: 0; padding: 0;}
+
+/* 滚动内容样式 */
+.scroll_main {
+	/* width: 550px;
+	display: block;
+	margin: 40px auto;
+	background-color:#fff;
+	border:1px solid #9a9a9a; */
+}
+
+/* 滚动内容区样式 */
+.scroll_wrap {
+	/* width: 100%;
+	height: 350px; */
+	position: relative;
+}
+/* 滚动内容样式 */
+.scroll_wrap .scroll_cont {
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+}
+.scroll_wrap .scroll_cont p {
+	/* padding:15px; */
+}
+/* 滚动条 */
+.scroll_wrap .scroll_bar {
+	position: absolute;
+	top:0;
+	right:0;
+	width: 5px;
+	height: 100%;
+	background-color: #e4e4e4;
+	z-index: 99;
+}
+/* 滚动块 */
+.scroll_wrap .scroll_slider {
+	position: absolute;
+	top: 0;
+	left: 0px;
+	width: 5px;
+	height: 48px;
+	background-color: #525252;
+	border-radius:5px;
+	opacity: .5
+}
+.scroll_wrap .scroll_slider:hover{
+	opacity: 1
+}
+
+.console_scroll_wrap{
+	min-width: 1185px;
+}
+.explainPan_scroll_wrap{
+	height: 180px;
+}

+ 172 - 153
src/html/console.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
+  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 </head>
 <body class="console">
   <div class="partTitle">
@@ -25,169 +26,187 @@
   </div>
   <div class="partTitleT"></div>
   <!--<div class="grayLine"></div>-->
-  <div class="partWrap clearfix">
-      <div class="part01 fl">
-        <p class="partTitlePub clearfix" style="cursor: default;">
-          <span class="name">出院人数统计</span>
-          <span class="personNum">总人数:</span>
-        </p>
-        <div class="chuyuan">
-          <ul class="clearfix" style="cursor: default;">
-            <li>
-              <p class="numShow died"></p>
-              <p class="explainNum">死亡人数</p>
-            </li>
-            <li class="li02">
-              <p class="numShow newborn"></p>
-              <p class="explainNum">新生儿患者</p>
-            </li>
-            <li class="li03">
-              <p class="numShow patientNum"></p>
-              <p class="explainNum">手术病人数</p>
-            </li>
-          </ul>
-        </div>
-        <div class="chuyuanEmpty"></div>
-        <div class="defect">
-          <p class="partTitlePub">各模块缺陷占比排名 <img class="detailGo" src="../images/details.png" alt=""></p>
-          <div class="list">
-            <table class="qtable">
-  
-            </table>
-            <div class="qtableEmpty">
-
+  <div class="scroll_main  console_scroll_main">
+    <div class="scroll_wrap console_scroll_wrap">
+      <div class="scroll_bar  console_scroll_bar">
+        <div class="scroll_slider console_scroll_slider"></div>
+      </div>
+      <div class="partWrap clearfix scroll_cont console_scroll_cont">
+        
+          <div class="part01 fl">
+            <p class="partTitlePub clearfix" style="cursor: default;">
+              <span class="name">出院人数统计</span>
+              <span class="personNum">总人数:</span>
+            </p>
+            <div class="chuyuan">
+              <ul class="clearfix" style="cursor: default;">
+                <li>
+                  <p class="numShow died"></p>
+                  <p class="explainNum">死亡人数</p>
+                </li>
+                <li class="li02">
+                  <p class="numShow newborn"></p>
+                  <p class="explainNum">新生儿患者</p>
+                </li>
+                <li class="li03">
+                  <p class="numShow patientNum"></p>
+                  <p class="explainNum">手术病人数</p>
+                </li>
+              </ul>
+            </div>
+            <div class="chuyuanEmpty"></div>
+            <div class="defect">
+              <p class="partTitlePub">各模块缺陷占比排名 <img class="detailGo" src="../images/details.png" alt=""></p>
+              <div class="list">
+                <table class="qtable">
+      
+                </table>
+                <div class="qtableEmpty">
+    
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="part02 fl">
-        <div class="bldjs">
-          <ul class="bingli clearfix">
-            <li class="fst">
-       -       <p class="numShow"></p>
-              <p class="explainNum">累计质控病历数</p>
-            </li>
-            <li>
-              <p class="numShow"></p>
-              <p class="explainNum">甲级病历</p>
-            </li>
-            <li>
-              <p class="numShow"></p>
-              <p class="explainNum">乙级病历</p>
-            </li>
-            <li>
-              <p class="numShow"></p>
-              <p class="explainNum">丙级病历</p>
-            </li>
-          </ul>
-          <div class="bingliLis clearfix">
-            <p>病历评分等级占比 <img class="detailGo" src="../images/details.png" alt=""></p>
-            <div class="panPartPub panPart02">
-              <div class="fen" id="fen01"></div>
-              <p>甲级占比</p>
+          <div class="part02 fl">
+            <div class="bldjs">
+              <ul class="bingli clearfix">
+                <li class="fst">
+          -       <p class="numShow"></p>
+                  <p class="explainNum">累计质控病历数</p>
+                </li>
+                <li>
+                  <p class="numShow"></p>
+                  <p class="explainNum">甲级病历</p>
+                </li>
+                <li>
+                  <p class="numShow"></p>
+                  <p class="explainNum">乙级病历</p>
+                </li>
+                <li>
+                  <p class="numShow"></p>
+                  <p class="explainNum">丙级病历</p>
+                </li>
+              </ul>
+              <div class="bingliLis clearfix">
+                <p>病历评分等级占比 <img class="detailGo" src="../images/details.png" alt=""></p>
+                <div class="panPartPub panPart02">
+                  <div class="fen" id="fen01"></div>
+                  <p>甲级占比</p>
+                </div>
+                <div class="panPartPub panPart01">
+                  <div class="fen" id="fen02"></div>
+                  <p>乙级占比</p>
+                </div>
+                <div class="panPartPub panPart03">
+                  <div class="fen" id="fen03"></div>
+                  <p>丙级占比</p>
+                </div>
+              </div>
             </div>
-            <div class="panPartPub panPart01">
-              <div class="fen" id="fen02"></div>
-              <p>乙级占比</p>
+            <div class="pingfendengji">
+              <p class="title">病历评分数据</p>
+              <div class="pingfendengjiEmpty">
+    
+              </div>
             </div>
-            <div class="panPartPub panPart03">
-              <div class="fen" id="fen03"></div>
-              <p>丙级占比</p>
+            <div class="pubEchart paymoney">
+              <p class="title"><span>各科室病历评分占比</span> <img src="../images/details.png" alt=""></p>
+              <div class="toggleSlide">
+                <p><span>甲级</span><img src="../images/arrow_down1.png" alt=""> </p>
+                <ul>
+                  <li class="toggleAverge toggleSlide1" data-str="甲级" data-level="甲" data-type="1">甲级</li>
+                  <li class="toggleAverge toggleSlide2" data-str="乙级" data-level="乙" data-type="2">乙级</li>
+                  <li class="toggleAverge toggleSlide2" data-str="丙级" data-level="丙" data-type="6">丙级</li>
+                </ul>
+              </div>
+              <div id="barChart" class="barChartPay"></div>
+              <div class="barChartPayEmpty"></div>
             </div>
+            <!-- <div class="pubEchart paymoney">
+              <p class="title"><span>科室平均住院天数柱状图</span> <img src="../images/details.png" alt=""></p>
+              <div class="toggleSlide">
+                <p><span>平均住院天数</span><img src="../images/arrow_down1.png" alt=""> </p>
+                <ul>
+                  <li class="toggleAverge toggleSlide1" data-str="平均住院天数" data-type="1">平均住院天数</li>
+                  <li class="toggleAverge toggleSlide2" data-str="平均住院花费" data-type="2">平均住院花费</li>
+                </ul>
+              </div>
+              <div id="barChart" class="barChartPay"></div>
+              <div class="barChartPayEmpty"></div>
+            </div> -->
           </div>
-        </div>
-        <div class="pingfendengji">
-          <p class="title">病历评分数据</p>
-          <div class="pingfendengjiEmpty">
-
-          </div>
-        </div>
-        <div class="pubEchart paymoney">
-          <p class="title"><span>各科室病历评分占比</span> <img src="../images/details.png" alt=""></p>
-          <div class="toggleSlide">
-            <p><span>甲级</span><img src="../images/arrow_down1.png" alt=""> </p>
-            <ul>
-              <li class="toggleAverge toggleSlide1" data-str="甲级" data-level="甲" data-type="1">甲级</li>
-              <li class="toggleAverge toggleSlide2" data-str="乙级" data-level="乙" data-type="2">乙级</li>
-              <li class="toggleAverge toggleSlide2" data-str="丙级" data-level="丙" data-type="6">丙级</li>
-            </ul>
-          </div>
-          <div id="barChart" class="barChartPay"></div>
-          <div class="barChartPayEmpty"></div>
-        </div>
-        <!-- <div class="pubEchart paymoney">
-          <p class="title"><span>科室平均住院天数柱状图</span> <img src="../images/details.png" alt=""></p>
-          <div class="toggleSlide">
-            <p><span>平均住院天数</span><img src="../images/arrow_down1.png" alt=""> </p>
-            <ul>
-              <li class="toggleAverge toggleSlide1" data-str="平均住院天数" data-type="1">平均住院天数</li>
-              <li class="toggleAverge toggleSlide2" data-str="平均住院花费" data-type="2">平均住院花费</li>
-            </ul>
-          </div>
-          <div id="barChart" class="barChartPay"></div>
-          <div class="barChartPayEmpty"></div>
-        </div> -->
-      </div>
-      <div class="part03 fl">
-        <p class="partTitlePub clearfix">
-          <span class="name">病案首页合格率占比</span> <img class="detailGo" src="../images/details.png" alt="">
-        </p>
-        <div class="toggleSlide">
-          <p><span>合格率</span><img src="../images/arrow_down1.png" alt=""> </p>
-          <ul>
-            <li class="toggleAverge toggleSlide1" data-str="合格率" data-level="合格率" data-type="7">合格率</li>
-            <li class="toggleAverge toggleSlide2" data-str="完整率" data-level="完整率" data-type="8">完整率</li>
-            <li class="toggleAverge toggleSlide2" data-str="完善率" data-level="完善率" data-type="9">完善率</li>
-          </ul>
-        </div>
-        <div class="barChartLineBox">
-          <div id="lineChart" class="barChartLine"></div>
-          <div class="barChartLineEmpty"></div>
-        </div>
-        <div class="circle clearfix">
-          <p class="title">单项否决占比 <img class="detailGo" src="../images/details.png" alt=""></p>
-          <div class="emptyCircleWrap">
-            <div id="emptyCircle" class="emptyCircle"></div>
-            <div class="explainPan explainPanT">
-              <table>
-                
-              </table>
+          <div class="part03 fl">
+            <p class="partTitlePub clearfix">
+              <span class="name">病案首页合格率占比</span> <img class="detailGo" src="../images/details.png" alt="">
+            </p>
+            <div class="toggleSlide">
+              <p><span>合格率</span><img src="../images/arrow_down1.png" alt=""> </p>
+              <ul>
+                <li class="toggleAverge toggleSlide1" data-str="合格率" data-level="合格率" data-type="7">合格率</li>
+                <li class="toggleAverge toggleSlide2" data-str="完整率" data-level="完整率" data-type="8">完整率</li>
+                <li class="toggleAverge toggleSlide2" data-str="完善率" data-level="完善率" data-type="9">完善率</li>
+              </ul>
             </div>
-          </div>
-          <div id="emptyCircleWrapEmpty">
-
-          </div>
-        </div>
-      </div>
-      <p class="clearfix"></p>
-      <div class="part04 clearfix">
-        <div class="circleB clearfix">
-          <p class="title">条目缺陷占比 <img src="../images/details.png" alt=""></p>
-          <div class="emptyCircleBData">
-            <div id="emptyCircleB" class="emptyCircle"></div>
-            <div class="explainPan explainPanB">
-              <table>
-                
-              </table>
+            <div class="barChartLineBox">
+              <div id="lineChart" class="barChartLine"></div>
+              <div class="barChartLineEmpty"></div>
+            </div>
+            <div class="circle clearfix">
+              <p class="title">单项否决占比 <img class="detailGo" src="../images/details.png" alt=""></p>
+              <div class="emptyCircleWrap">
+                <div id="emptyCircle" class="emptyCircle"></div>
+                <div class="explainPan explainPanT">
+                  <table>
+                    
+                  </table>
+                </div>
+              </div>
+              <div id="emptyCircleWrapEmpty">
+    
+              </div>
             </div>
           </div>
-          <div class="emptyCircleBWrap">
-
-          </div>
-        </div>
-        <div class="pubEchartB paymoney">
-          <p class="title">各科室质控平均分柱状图 <img src="../images/details.png" alt=""></p>
-          <div class="toggleSlide innerOuter">
-            <p data-str="内科" data-type="3"><span>内科系统</span><img src="../images/arrow_down1.png" alt=""> </p>
-            <ul>
-              <li class="toggleAverge toggleSlide1" data-str="内科" data-type="3">内科系统</li>
-              <li class="toggleAverge toggleSlide2" data-str="外科" data-type="4">外科系统</li>
-            </ul>
+          <p class="clearfix"></p>
+          <div class="part04 clearfix">
+            <div class="circleB clearfix">
+              <p class="title">条目缺陷占比 <img src="../images/details.png" alt=""></p>
+              <div class="emptyCircleBData">
+                <div id="emptyCircleB" class="emptyCircle"></div>
+                <div class="scroll_main explainPan_scroll_main">
+                  <div class="scroll_wrap explainPan_scroll_wrap">
+                    <div class="scroll_bar explainPan_scroll_bar">
+                      <div class="scroll_slider explainPan_scroll_slider"></div>
+                    </div>
+                    <div class="explainPan explainPanB scroll_cont explainPan_scroll_cont">
+                      <table>
+                        
+                      </table>
+                    </div>
+                  </div>
+                </div>
+               
+              </div>
+              <div class="emptyCircleBWrap">
+    
+              </div>
+            </div>
+            <div class="pubEchartB paymoney">
+              <p class="title">各科室质控平均分柱状图 <img src="../images/details.png" alt=""></p>
+              <div class="toggleSlide innerOuter">
+                <p data-str="内科" data-type="3"><span>内科系统</span><img src="../images/arrow_down1.png" alt=""> </p>
+                <ul>
+                  <li class="toggleAverge toggleSlide1" data-str="内科" data-type="3">内科系统</li>
+                  <li class="toggleAverge toggleSlide2" data-str="外科" data-type="4">外科系统</li>
+                </ul>
+              </div>
+              <div id="barChartPay" class="barChartPay" style="height: 217px;"></div>
+              <div class="barChartPayEmptys" style="height: 217px;"></div>
+            </div>
           </div>
-          <div id="barChartPay" class="barChartPay" style="height: 217px;"></div>
-          <div class="barChartPayEmptys" style="height: 217px;"></div>
-        </div>
-      </div>
+         
+      </div>                      
+    </div>
   </div>
+  
 </body>
 </html>

+ 11 - 2
src/js/console.js

@@ -5,6 +5,7 @@ require("../css/console.less")
 require("../images/logo.png")
 require("../images/arrow_down.png")
 require('./modal.js');
+require('./scrollBar.js')
 
 // import 'zrender/lib/svg/svg';
 const {api} = require('./api.js')
@@ -412,7 +413,6 @@ function getBarData(type){
     //         }
     //     })
     // }
-    console.log(behosDateStart,45455555555555)
     if(hasData('FUNC000049')){
         post(api.leaveHosCount,{//出院人数统计
             "type": type||1,//1月2年
@@ -1791,7 +1791,6 @@ function getStaticDate(flg){
     getHomeData('firstLevelPercent')
     getAverageScoreLis()
     getEveryDeptLevel()
-    console.log(behosDateStart,behosDateEnd,898989898)
     return true
 }
 $(function() {
@@ -1840,4 +1839,14 @@ $(function() {
     $('.iconCalen').on("click", function(e){
         $(this).parent().find("input").focus()
     })
+    new CusScrollBar({
+        contentSelector: '.console_scroll_cont', //滚动内容区
+        barSelector: '.console_scroll_bar', //滚动条
+        sliderSelector: '.console_scroll_slider' //滚动滑块
+    });
+    new CusScrollBar({
+        contentSelector: '.explainPan_scroll_cont' , //滚动内容区
+        barSelector: '.explainPan_scroll_bar', //滚动条
+        sliderSelector: '.explainPan_scroll_slider' //滚动滑块
+    });
 });

+ 167 - 0
src/js/scrollBar.js

@@ -0,0 +1,167 @@
+/*
+用途项目:自定义滚动条实现
+*/
+(function(win, doc, $){
+  // 定义的滚动条的构造函数
+  function CusScrollBar(options) {
+    // 函数的调用
+    this._init(options);
+  }
+  // 对象的合并
+  $.extend(CusScrollBar.prototype, {
+    _init: function(options){
+      // 闭包
+      var self = this;
+      // 初始化参数
+      self.options = {
+        scrollDir: 'Y',       //滚动的方向
+        contentSelector: '',  //滚动内容区选择器
+        barSelector: '',      //滚动条选择器
+        sliderSelector: '',   //滚动滑块选择器
+        wheelStep: 100,        //滚动步长(鼠标移动一下,内容滚动的幅度)
+      }
+      // 覆盖参数
+      $.extend(true, self.options, options||{});
+      self._initDomEvent();
+      return self;
+    },
+
+    /**
+     * 初始化DOM引用
+     * @method _initDomEvent
+     * @return {CusScrollBar}
+     */
+     _initDomEvent: function() {
+      var opts = this.options;
+      // 滚动内容区对象,必填项
+      this.$cont = $(opts.contentSelector);
+      // 滚动条滑块对象,必须项
+      this.$slider = $(opts.sliderSelector);
+      // 滚动条对象
+      this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
+      // 获取文档对象
+      this.$doc = $(doc);
+      // 获取初始化滑块拖动功能
+      this._initSliderDragEvent();
+      // 获取同步滑块的位置
+      this._bindContentScroll();
+      // 获取鼠标滚轮事件
+      this._bindMousewheel();
+      // 获取内容来定义滑块的高度
+      this._initSliderHeight();
+
+     },
+     // 根据内容来定义滑块的高度
+     _initSliderHeight: function() {
+       console.log(this.$cont.height(),this.$cont)
+      var rate = this.$cont.height() /this.$cont[0].scrollHeight;
+      var sliderHeight = rate*this.$bar.height();
+      console.log("rate",rate)
+      if(rate === 1){
+        this.$bar.css('display','none');
+      }
+      this.$slider.css('height',sliderHeight);
+     },
+     
+
+     /**
+      * 初始化滑块拖动功能
+      * @return {[Object]} [this]
+      */
+    _initSliderDragEvent: function() {
+      var self = this;
+      // 滑块元素
+      var slider = this.$slider,
+          sliderEl = slider[0];
+      // 如果元素存在
+      if (sliderEl) {
+        var doc = this.$doc,
+            dragStartPagePostion,
+            dragStartScrollPostion,
+            dragContBarRate;
+        function mousemoveHandler(e) {
+          e.preventDefault();
+          if (dragStartPagePostion == null) {
+            return;
+          }
+          //内容开始卷曲的高度+rate*(鼠标释放的位置-开始的位置) == 就是内容滑动的位置
+          self.scrollTo(dragStartScrollPostion + (e.pageY - dragStartPagePostion)*dragContBarRate);
+        }
+        slider.on('mousedown', function(e){
+          e.preventDefault();
+          // 获取鼠标的点击的开始位置
+          dragStartPagePostion = e.pageY;
+          // 获取内容区域的向上卷区的高度
+          dragStartScrollPostion = self.$cont[0].scrollTop;
+          dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition();
+          // 监听的document对象
+          doc.on('mousemove.scroll', mousemoveHandler).on('mouseup.scroll',function(){
+            doc.off('.scroll');
+          });
+        });
+        return self;
+      }
+    },
+    
+    // 计算滑块的当前位置
+    getSliderPosition: function() {
+      var self = this,
+      // 滑块可以移动的距离
+          maxSliderPosition = self.getMaxSliderPosition();
+          // 滑块移动的距离
+      return Math.min(maxSliderPosition, maxSliderPosition*self.$cont[0].scrollTop/self.getMaxScrollPosition());
+    },
+
+    // 内容可滚动的高度
+    getMaxScrollPosition: function() {
+      var self = this;
+      return Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
+    
+    },
+
+    //滑块可移动的距离
+    getMaxSliderPosition: function(){
+      var self = this;
+      const paddingTop = parseInt(self.$cont.css("paddingTop"))
+      const paddingBottom = parseInt(self.$cont.css("paddingBottom"))
+      return self.$bar.height()+paddingTop*2+paddingBottom*2 + - self.$slider.height();
+    },
+
+    // 监听内容的滚动,同步滑块的位置
+    _bindContentScroll: function() {
+      var self = this;
+      self.$cont.on('scroll', function(){
+        var sliderEl = self.$slider && self.$slider[0];
+        if (sliderEl) {
+          // 设置滑块的位置
+          sliderEl.style.top = self.getSliderPosition() + 'px';
+        }
+      });
+      return self;
+    },
+
+    // 鼠标滚轮事件
+    _bindMousewheel: function() {
+      var self = this;
+      // on监听事件,多个事件利用空格分开
+      self.$cont.on('mousewheel DOMMouseScroll',function(e){
+        e.preventDefault();
+        // 判断原生事件对象的属性
+        var oEv = e.originalEvent,
+        //原生事件对象,(其他浏览器负数向下,firefox正数向下,所以在wheelDelta前面有负数)
+        // 想要达到的效果,鼠标向下滚动,内容向下走
+            wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;
+            // 调用scrollTo方法。
+            self.scrollTo(self.$cont[0].scrollTop + wheelRange*self.options.wheelStep)
+      });
+    },
+
+    // 内容的滑动
+    scrollTo: function(positonVal) {
+      var self = this;
+      self.$cont.scrollTop(positonVal);
+    }
+  });
+
+  win.CusScrollBar = CusScrollBar;
+})(window,document,jQuery)

+ 2 - 2
webpack.config.js

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