随访计划竖版

src/css/followUpV.less

@@ -20,7 +20,68 @@
     font-size: 12px;    
     color: #3B9ED0;
     border-radius: 12px;
+    cursor: pointer;
 }
 .infoWrap{
     overflow-y: auto;
+    padding: 0 15px;
+}
+.infoBoxTitle{
+    line-height: 40px;
+    color: #1E1E1E;
+    font-size: 14px;
+    position: relative;
+    cursor: pointer;
+}
+.historyBox .infoBoxTitle{
+    color: #AAAAAA;
+}
+.historyWrap{
+    display: none;
+}
+.lisBox,.pacsBox{
+    padding-left: 68px;
+    position: relative;
+}
+.circle{
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    background: #89C5E3;
+    border-radius: 50%;
+    position: absolute;
+    left: 0;
+    top: 6px;
+}
+.lisItem,.pacsItem{
+    padding: 0 10px;
+    position: relative;
+    line-height: 20px;
+}
+.pacsBox{
+    margin-top: 10px;
+}
+.infoBox:hover{
+    background: #EEEEEE;
+}
+.itemBoxTitle{
+    position: absolute;
+    left: 0;
+    display: inline-block;
+    width: 38px;
+    height: 18px;
+    border-radius: 10px;
+    border: 1px solid #3B9ED0;
+    color: #3B9ED0;
+    text-align: center;
+    line-height: 18px;
+}
+.toggleInfo{
+    width: 10px;
+    position: absolute;
+    right: 10px;
+    top: 15px;
+}
+.childrenBox{
+    display: none;
 }

src/js/followUp.js

@@ -1,6 +1,7 @@
 var $ = require("jquery");
 var { post,config,getUrlArgObject,openNewWin,isIe8 } = require('./promise.js');
-
+let showImg = require('./../images/show2.png').replace(/^undefined/g, '')
+let collapseImg = require('./../images/collapse2.png').replace(/^undefined/g, '')
 function getFollowUp(msg){
     return post(config.followUp, msg)
 }
@@ -18,12 +19,10 @@ function renderPage(data){
     const operaItemName = operaItem.item || {}
     const operaItemDetail = operaItem.pushPlanDetails || []
     renderName(operaItemName) 
-    let dom1 = document.getElementById('operaNameWrap')
-    let dom2 = document.getElementById('btnBox')
-    console.log("dom1",dom1,"dom2",dom2)
+  
     renderBtn(operaItemDetail)
-    let arr = [].push(dom1,dom2)
-    // checkDom(arr, renderDetail(operaItemDetail))
+    renderDetail(operaItemDetail)
+    checkDom()
    
    
 }
@@ -34,44 +33,63 @@ function renderName(data){
       $(".followUpWrap").append(str)
 }
 function renderDetail(data){
-   let str = ``
+   let historyStr = ``
+   let laterStr = ``
    for(let i = 0; i < data.length; i++){
        const item = data[i]
        const lisArr = item.lis || []
        const pacsArr = item.pacs || []
        let lisStr=``
        let pacsStr=``
-       let title = `<p>${getTime(item.examineDate)}${item.description&&(item.description)}</p>`
+       let title = `<p class="infoBoxTitle">${getTime(item.examineDate)}${item.description?'('+item.description+')':''} <img class="toggleInfo" src="${showImg}"/></p>`
        for(let i = 0; i < lisArr.length; i++){
-        lisStr += `<div><span class="circle"></span>${lisArr[i]}</div>`
+        lisStr += `<div class="lisItem"><span class="circle"></span>${lisArr[i]}</div>`
        }
        for(let i = 0; i < pacsArr.length; i++){
-        pacsStr += `<div><span class="circle"></span>${pacsArr[i]}</div>`
+        pacsStr += `<div  class="lisItem"><span class="circle"></span>${pacsArr[i]}</div>`
        }
-       str += `<div class="infoBox">
+       if(item.history === 1){
+        historyStr+=`<div class="infoBox historyBox" >
+            ${title}
+            <div class="childrenBox">
+                ${lisArr.length>0?`<div class="lisBox"><span class="itemBoxTitle">检验</span>${lisStr}</div>`:""}
+                ${pacsArr.length>0?`<div class="pacsBox"><span class="itemBoxTitle">检查</span>${pacsStr}</div>`:""}
+            </div>
+        </div>`
+       }else{
+        laterStr += `<div class="infoBox">
             ${title}
-           <div class="lisBox">${lisStr}</div>
-           <div class="pacsBox">${pacsStr}</div>
-       </div>`
+            <div class="childrenBox">
+                ${lisArr.length>0?`<div class="lisBox"><span class="itemBoxTitle">检验</span>${lisStr}</div>`:""}
+                ${pacsArr.length>0?`<div class="pacsBox"><span class="itemBoxTitle">检查</span>${pacsStr}</div>`:""}
+            </div>
+        </div>`
+       }
+      
    }
-   
-    adjustHeight()
+   $(".followUpWrap").append(`<div class="infoWrap" id="infoWrap">
+        <div class="historyWrap">${historyStr}</div>
+        <div class="laterWrap">${laterStr}</div>
+    </div>`)
+    // adjustHeight()
+    bindToggleInfo()
   
 }
 function renderBtn(data){
-    const hasBtn = data[0]&&data[0].history&&data[0].history === 0
+    const hasBtn = data[0]&&data[0].history&&data[0].history === 1
     if(!hasBtn){
         return
     }
     const str = `<div class="btnBox" id="btnBox"><span class="btnName">显示历史计划</span></div>`
     $(".followUpWrap").append(str)
+    bindToggleHistory()
   
 }
 function adjustHeight() {
     var containerHt = $(".contentWrapper").height()
     var ht1 = $(".operaNameWrap").height()
     var ht2 = $(".btnBox").height()
-    $(".followUpWrap  .infoWrap").height(containerHt -ht1- ht2 + "px");
+    $(".followUpWrap  .infoWrap").height(containerHt -ht1- ht2-30 + "px");
     $(".infoWrap").preventScroll();  
 }
 function getTime(date){
@@ -87,26 +105,46 @@ function getTime(date){
 //  声明定时器
 var cheakDomTimer = null
 //  检查dom是否执行完成
-function checkDom(domList,callBack) {
-    console.log("domListdomList",domList)
-    let hasExit = true
-    for(let i = 0; i < domList.length; i++){
-        if(!domList[i]){
-            hasExit = false
-        }
-    }
-    if(hasExit) {
+function checkDom() {
+    let dom1Hei = $("#operaNameWrap").height()
+    let dom2 = document.getElementById('btnBox')
+    let dom3 = document.getElementById('infoWrap')
+    let dom2Hei = $("#btnBox").height()
+    if(dom1Hei!==0&&(dom2&&dom2Hei!=0 || !dom2)&&dom3) {
          //  执行dom加载完成后的操作
-         callBack();
+    
+         adjustHeight()
         //  清除定时器
         if(!cheakDomTimer) {
             clearTimeout(cheakDomTimer)
         }
     } else {
         //  自我调用
-        cheakDomTimer = setTimeout(checkDom, 0)
+        cheakDomTimer = setTimeout(checkDom, 200)
     }
 }
+function bindToggleHistory(){
+    $(document).on("click",".btnName",function(){
+        const btnText = $(".btnName").text()
+        if(btnText==="显示历史计划"){
+            $(".btnName").text("隐藏历史计划")
+        }else{
+            $(".btnName").text("显示历史计划")
+        }
+        $(".historyWrap").slideToggle()
+    })
+}
+function bindToggleInfo(){
+    $(document).on("click",".infoBoxTitle",function(){
+        const img =  $(this).parents(".infoBox").find(".toggleInfo").attr("src")
+        if(img === showImg){
+            $(this).parents(".infoBox").find(".toggleInfo").attr("src",collapseImg)
+        }else{
+            $(this).parents(".infoBox").find(".toggleInfo").attr("src",showImg)
+        }
+        $(this).parents(".infoBox").find(".childrenBox").slideToggle()
+    })
+}
 
 $(window).on('resize', function(){
     adjustHeight()