2020-11-25床头卡共用类逻辑（私用）

2020-11-25 10:28

床头卡不会自己显示，由安卓调用一个新的webview，加载显示页面，调用前端方法getData，传递响应参数，查询显示数据。

主要功能点：

• 1、暴露 getData 方法供安卓调用(在各自页面暴露，并且初始化回调方法)
• 2、优先处理床位号（在各自页面处理）
• 3、从安卓端获取病人信息（主要使用病人id）
• 如果有病人id，根据病人id查询病人数据
• 如果没有，使用床位+护理单元查询病人数据
• 查出数据后保存给安卓
• 4、获取系统配置信息（用户患者姓名保护、二维码显示等）
• 5、查询护理标签、患者标签并处理显示，当前患者标签主要是调整过敏、饮食的字体颜色和背景色
• 6、清空数据

使用关键代码：

1、引入：

<script src="bedSideCardAssets/lib/jquery-3.3.1.min.js"></script>
<script src="bedSideCardAssets/js/DealCard.js"></script>

　　

2、初始化实例（在各自页面写）：

// 初始化床头卡处理实例
var cardDealFun =  new DealCard()
cardDealFun.dealInfoDataCallback = (data)=>renderData(data) // 初始化页面显示回调函数
cardDealFun.showLabelCallback = ()=>renderLabel() // 护理标签显示回调函数
cardDealFun.clearPageCallback = ()=>clearInfo() // 清除页面显示回调函数
cardDealFun.renderQrCodeCallback = (text)=>renderQrCode(text) // 初始化二维码
cardDealFun.GuoandYinshiCallback = (data)=>GuoandYinshi(data) // 病患标签(过敏、饮食)处理回调函数

3、暴露getData方法

//暴漏给安卓调用
window.getData = function (bedno, ucode, etnType, optype, jsonData) {
    // 处理床位号的方法
    renderBedName(bedno)
    cardDealFun.init(bedno, ucode, etnType, optype, jsonData)
}

4、处理类完整代码：

/**
 *床头卡请求数据、处理数据统一类：
 * 请求病人信息、处理病人信息、请求标签、处理标签的方法统一
 * 再有床头卡，直接引入使用
 *
 * 床头卡处理逻辑：
 * 1、暴露 getData 方法供安卓调用(在各自页面暴露，并且初始化回调方法)
 * 2、优先处理床位号（在各自页面处理）
 * 3、从安卓端获取病人信息（主要使用病人id）
 *    如果有病人id，根据病人id查询病人数据
 *    如果没有，使用床位+护理单元查询病人数据
 *    查出数据后保存给安卓
 * 4、获取系统配置信息（用户患者姓名保护、二维码显示等）
 * 5、清空数据
 *
 *
 * 使用方式（在各自页面书写）：
 *  // 初始化床头卡处理实例
   var cardDealFun =  new DealCard()
   cardDealFun.dealInfoDataCallback = (data)=>renderData(data) // 初始化页面显示回调函数（renderData是自己页面定义的初始化页面的方法）
   cardDealFun.showLabelCallback = ()=>renderLabel() // 护理标签显示回调函数（renderLabel是自己页面定义的显示标签的方法）
   cardDealFun.clearPageCallback = ()=>clearInfo() // 清除页面显示回调函数（clearInfo是自己页面定义的清除页面显示内容的方法）
   cardDealFun.showRoomInfoCallback = (data)=>showRoomInfo(data) // 处理显示科主任、护士长、护理组长、医疗组长回调函数（showRoomInfo是各自页面定义的显示“科主任、护士长、护理组长、医疗组长”的方法）

 //暴漏给安卓调用
  window.getData = function (bedno, ucode, etnType, optype, jsonData) {
        // 处理床位号的回调方法
        renderBedName(bedno)
        cardDealFun.init(bedno, ucode, etnType, optype, jsonData)
    }
 *
 */
class DealCard {
  public patientId:string = ''; //病人id
  public bedname:string = ''; //床位名
  public deptId:string = ''; //科室id
  public orgId:string = ''; //orgId
  public patientInfo:any = {
    patientIn: {},
    nurseLevelConfig: {}
  } // 病人信息
  public isFilterName:boolean = false; //是否床头卡患者姓名保护
  public labelInfo:any = []; //所有标签数据
  public cardPatientlabel:any = []; //患者标签接口查出来的数据
  public patientLabel:any = []; //该病人的标签
  public API_patidntid:string =  '/bnms/app-bn/patient-in-list/by-patient-in-and-info'; //根据病患id查询的接口
  public API_deptbedname:string =  '/bnms/app-bn/patient-in-list/by-dept-id-bed-name-one-new'; //根据床位号和护理单元查询的接口
  public API_NursingLabelInfo:string =  '/bnms/app-bn/patient-in-view-list/card-nursing-label'; // 获取护理标签数据
  public API_CardPatientLabelInfo:string =  '/bnms/app-bn/patient-in-view-list/card-patient-label'; // 获取患者标签数据
  public API_roomInfo:string =  '/hsms/app-hs/nursing-group/roomInfo'; // 获取房间科主任、护士长、护理组长、医疗组长数据
  public dealInfoDataCallback:any =  null; // 处理显示页面数据回调函数
  public showLabelCallback:any =  null; // 处理显示标签回调函数
  public showRoomInfoCallback:any =  null; // 处理显示科主任、护士长、护理组长、医疗组长回调函数
  public clearPageCallback:any =  null; // 清除页面显示回调函数
  public renderQrCodeCallback:any =  null; // 初始化二维码回调函数
  public showPatLabelCallback:any =  null; // 病患标签处理回调函数
  public GuoandYinshiCallback:any =  null; // 病患标签(过敏、饮食)处理回调函数

  public init(bedno:string, ucode:string, etnType:string, optype:string, jsonData:any){
    console.log(bedno, ucode, etnType, optype, jsonData)
    const _this:any = this

    this.bedname = bedno
    this.patientId = ''
    if (ucode)this.deptId = ucode

    let patientInfo:any = null
    try {
      //从安卓获取用户信息
      // @ts-ignore
      if (window.android && window.android.getPatientInfo) patientInfo = window.android.getPatientInfo()

      //只是判断是否有用户信息
      if (patientInfo !== null && patientInfo !== '') patientInfo = JSON.parse(patientInfo)

      // 获取系统配置
      let Sys = ""
      // @ts-ignore
      if (window.android && window.android.getSystemConfig) Sys = window.android.getSystemConfig()

      //系统配置仅为了获取是否姓名脱敏
      // 中心医院定制需要显示二维码
      if (Sys !== '' && Sys !== null) {
        var J = JSON.parse(Sys);
        console.log('床头卡sys', J);
        this.isFilterName = J.isFilterNameBedHead
        // 是否初始化二维码
        if (J.QRCodeBedSide &&
          J.QRCodeBedSide.state &&
          J.QRCodeBedSide.text !== '' &&
          J.QRCodeBedSide.text !== null &&
          _this.renderQrCodeCallback &&
          _this.renderQrCodeCallback!=='' &&
          _this.renderQrCodeCallback !== null
        ) _this.renderQrCodeCallback(J.QRCodeBedHead.text)

      }
    } catch (e) {
      console.log("调用安卓方法，获取病患信息并解析。解析系统配置数据。有错误日志！！！！！！");
    }

    //记录病人id
    if (patientInfo && patientInfo !== null)  this.patientId = patientInfo.patientId
//数据拉取
    if (Number(optype) === 1) {
      // 页面重载：根据病人id(登陆了) 或者 护理单元+床位名(没登录) 查询
      this.getpatientInfoAPI()
    } else if (Number(optype) === 2) {
      //处理缓存数据
      console.log('渲染：缓存数据');
      this.dealInfoData(JSON.parse(jsonData))
    }
  }
  // 查询接口
  private getpatientInfoAPI(){
    const _this:any = this
    if (_this.patientId && _this.patientId !== null && _this.patientId !== '') {
      // 如果有病患信息，根据病患id查
      // @ts-ignore
      $.ajax({
        type: "GET",
        url: _this.API_patidntid, //MngUser/GetCardInfo
        data: {
          patientId: _this.patientId
        },
        async: false,
        success: function (data:any) {
          _this.dealInfoData(data)
        },
        error: function () {
        }
      })
    } else {
      // 如果没有病患id，根据 护理单元+床位名 查
      // @ts-ignore
      $.ajax({
        type: "GET",
        url: _this.API_deptbedname, //MngUser/GetCardInfo
        data: {
          deptId: _this.deptId,
          bedName: _this.bedname
        },
        async: false,
        success: function (data:any) {
          _this.dealInfoData(data)
        },
        error: function () {
        }
      })
    }
  }
  /**
   * 处理数据显示在页面上，处理方法在各自页面定义
   * @param data
   */
  private dealInfoData(data:any) {
    const _this:any = this
    if(data.data === null){
      _this.clearPageCallback()
      return
    }
    //回写给安卓数据,需要JSON字符串形式
    // @ts-ignore
    if (window.android && window.android.getAndroidData) {
      if (data.data && data.data !== null) data.data.databy = 'patientId';
      // @ts-ignore
      window.android.getAndroidData(JSON.stringify(data));
    }
    if (data.data) {
      _this.orgId = data.data.patientSelectDtos[0].patientIn.orgId
      _this.patientInfo = data.data.patientSelectDtos[0]
    }

    // 回调显示页面
    if (_this.dealInfoDataCallback !== null && _this.dealInfoDataCallback)_this.dealInfoDataCallback(data)
  }
  // 获取护理标签数据
  public getBedCardLabel() {
    const _this:any = this
    // @ts-ignore
    $.ajax({
      type: "GET",
      url: _this.API_NursingLabelInfo, //MngUser/GetCardInfo
      data: {
        deptId: _this.deptId,
        orgId: _this.orgId
      },
      async: false,
      success: function (data:any) {
        _this.labelInfo = data.data;
        _this.dealLabelNurs()
      },
      error: function () {
      }
    })
  }

  /**
   * 获取患者标签
   */
  public getCartPatientLabel(){
    const _this:any = this
    // @ts-ignore
    $.ajax({
      type: "GET",
      url: _this.API_CardPatientLabelInfo,
      data: {
        deptId: _this.deptId
      },
      async: false,
      success: function (data:any) {
        _this.cardPatientlabel = data.data;
        if(_this.showPatLabelCallback && _this.showPatLabelCallback !==null)_this.showPatLabelCallback()

        // 处理过敏和饮食的字体颜色和背景色
        if(_this.GuoandYinshiCallback && _this.GuoandYinshiCallback !==null){
          let config:any = {
            allergy:null, // 过敏
            diet:null, // 饮食
          }
          for(let i = 0 ; i < _this.cardPatientlabel.length ; i++){
            let v = _this.cardPatientlabel[i]
            if(!v || v.labelShowInfo === '' || v.labelShowInfo === null)continue
            if(v.labelSql === 'diet' || v.labelSql === 'allergy'){
              let labelShowInfo = JSON.parse(v.labelShowInfo)
              if(labelShowInfo.item.length > 0 && labelShowInfo.item[0] && labelShowInfo.item[0]['config'])
              config[v.labelSql] = labelShowInfo.item[0]['config']
            }
          }
          _this.GuoandYinshiCallback(config)
        }
      },
      error: function () {
      }
    })
  }
  /**
   * 获取房间科主任、护士长、护理组长、医疗组长数据
   */
  public getRoomInfo(){
    const _this:any = this
    try{
      // @ts-ignore
      let roomId:string|null = JSON.parse(localStorage.getItem("deviceInfo")).ROOM_ID
      // @ts-ignore
      $.ajax({
        type: "GET",
        url: _this.API_roomInfo,
        data: {
          deptId: _this.deptId,
          roomId: roomId
        },
        async: false,
        success: function (data:any) {
          if(_this.showRoomInfoCallback && _this.showRoomInfoCallback!==null)_this.showRoomInfoCallback(data)
        },
        error: function () {
        }
      })
    }catch (e) {
      console.log('获取房间科主任、护士长、护理组长、医疗组长数据中报错了', e)
    }
  }
  /**
   * 处理护理标签数据
   * 根据患者信息返回的患者标签数据 (patientInfo.patientInfoDtos = patientInListData) 和 查询的护理标签数据（labelInfo）进行匹配病患标签
   * 匹配规则：
   * 1、labelInfo[i]['labelShowInfo'] !==null ,非空
   * 2、labelInfo[i]['dataSources'] === 3
   需要用labelInfo[i]['labelSql']去比对患者基本信息接口中的 patientInListData[i]['labelSql'] 数据,匹配到之后，
   再匹配patientInListData[i]['infoValue']不为空 AND patientInListData[i]['labelType'] === 201
   * 3、labelInfo[i]['dataSources'] === 1 || labelInfo[i]['dataSources'] === 2 || labelInfo[i]['dataSources'] === 4
   需要匹配 labelInfo[i]['labelValue'] 是否包含这个病患的床位（bedName）
   *
   * */
  private dealLabelNurs() {
    const _this:any = this

    _this.patientLabel = []

    for(let i = 0 ; i < _this.labelInfo.length ;i++){
      const v = _this.labelInfo[i]
      if (v.labelShowInfo !== null && v.labelShowInfo !== "") {
        if (Number(v.dataSources) === 3) {
          for(let ii = 0 ; ii < _this.patientInfo.patientInfoDtos.length ; ii++){
            let v2 = _this.patientInfo.patientInfoDtos[ii]
            if (v2.labelSql === v.labelSql && v2.infoValue !== '' && v2.labelType === "201") {
              // 过滤掉可能重复的数据
              const j = {
                labelId: v.labelId,
                labelName: v.labelName,
                type: v.labelShowType,
                img: (!v.labelShowInfo || v.labelShowInfo === '' || v.labelShowInfo === null || v.labelShowInfo.indexOf('|') > -1) ? './bedSideCardAssets/car2.png' : v.labelShowInfo,
                labelShowInfo: v.labelShowInfo
              };
              _this.patientLabel.push(j);
            }
          }
        } else if (
          Number(v.dataSources) === 1 ||
          Number(v.dataSources) === 2 ||
          Number(v.dataSources) === 4
        ) {
          if (v.labelValue.indexOf(_this.bedName) > -1) {
            const j = {
              labelId: v.labelId,
              labelName: v.labelName,
              type: v.labelShowType,
              img: (!v.labelShowInfo || v.labelShowInfo === '' || v.labelShowInfo === null || v.labelShowInfo.indexOf('|') > -1) ? './bedSideCardAssets/car2.png' : v.labelShowInfo,
              labelShowInfo: v.labelShowInfo
            };
            _this.patientLabel.push(j);
          }
        }
      }
    }

    if (_this.showLabelCallback && _this.showLabelCallback !== null)_this.showLabelCallback()
  }
}

5、一个床头卡页面的完整实例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>床头卡</title>
    <script src="bedSideCardAssets/lib/jquery-3.3.1.min.js"></script>
    <script src="bedSideCardAssets/js/DealCard.js"></script>
    <script>
        (function () {
            var styleN = document.createElement("style");
            var width = document.documentElement.clientWidth / 1024;
            styleN.innerHTML = 'html{font-size:' + width + 'px!important}';
            document.head.appendChild(styleN);
        })();
    </script>
    <style>
        body {
            background-image: linear-gradient(to right, #B6D6FE, #556EEC);
        }

        * {
            font-family: '黑体';
        }

        .main-view {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .top-view {
            height: 275rem;
             100%;
            box-sizing: border-box;
            padding: 15rem 25rem 0 25rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .top {
            position: relative;
             100%;
            height: 100%;
            background-image: linear-gradient(to right, #fff, #E6F1FF);
            border-radius: 25rem;
            border-bottom-left-radius: 75rem;
            box-shadow: 0 0 7rem 5rem rgba(99, 99, 99, 0.2);
            display: flex;
        }

        .top-left {
             260rem;
            height: 260rem;
            background-image: linear-gradient(to right top, #536CEC, #54A3FC);
            border-top-right-radius: 75rem;
            border-bottom-left-radius: 75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 230rem;
            color: #fff;
            font-weight: bold;
            font-family: "黑体";
        }

        .top-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 5rem 0;
            box-sizing: border-box;
        }

        .top-right-view,
        .top-right-view2,
        .top-right-view3 {
             100%;
            flex: 1;
            display: flex;
            box-sizing: border-box;
            align-items: center;
        }

        .top-right-view {
            padding: 40rem 0 0 25rem;
        }

        .top-right-view2 {
            flex: 0.8 !important;
            padding: 0 15rem;
            box-sizing: border-box;
            align-items: flex-end;
        }

        .top-right-name {
            font-size: 100rem;
            font-weight: bold;
            color: #536bec;
            max- 430rem;
            padding-top: 2rem;
        }

        .top-right-info-view {
            padding-left: 10rem;
            padding-top: 0rem;
            display: flex;
            flex-direction: column;
        }

        .top-right-level {
            color: #fff;
            background-color: #ccc;
            font-size: 30rem;
            border-top-left-radius: 50rem;
            border-top-right-radius: 50rem;
            border-bottom-right-radius: 50rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem 15rem;
            margin-bottom: 10rem;
            margin-right: auto;
            visibility: hidden;
        }

        .top-right-other {
            display: flex;
            align-items: center;
        }

        .top-right-sex {
            font-size: 30rem;
        }

        .top-right-time {
            font-size: 30rem;
            margin-left: 10rem;
        }

        .top-right-text {
            font-size: 30rem;
        }

        .top-right-text2 {
            font-size: 30rem;
            margin-left: 40rem;
        }

        .top-right-view3-card {
            background-color: #D7E0F2;
            min- 465rem;
            height: 50rem;
            border-top-right-radius: 50rem;
            border-bottom-right-radius: 50rem;
            display: flex;
            align-items: center;
            padding: 0 30rem 0 15rem;
        }

        .top-right-view3-card-text {
            display: flex;
            align-items: flex-end;
        }

        .top-right-view3-card-text-key {
            font-size: 25rem;
            color: #666;
            margin-bottom: 2rem;
        }

        .top-right-view3-card-text-value {
            font-size: 30rem;
            margin-left: 10rem;
        }

        .top-right-doct {
            margin-right: 25rem;
        }

        .left-auto {
            margin-left: auto;
        }

        .bottom-view {
            position: absolute;
            top: 90rem;
            left: 15rem;
            bottom: 16rem;
            right: 15rem;
            box-sizing: border-box;
            padding: 190rem 0 0 0;
            z-index: 5;
            background-color: #fff;
            border-radius: 25rem;
            box-shadow: 0 0 7rem 5rem rgba(99, 99, 99, 0.2);
            overflow: hidden;
        }

        .bottom {
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .bottom-background {
            position: absolute;
            bottom: 0;
            left: 0;
             100%;
        }

        .bottom-view1 {
            flex: 1;
            overflow: hidden;
            display: flex;
        }

        .bottom-view1 marquee {
            height: 100%;
        }

        .bottom-view1-icon-view {
             65rem;
            display: flex;
            align-items: center;
        }

        .bottom-view1-icon-left {
             100%;
            height: 60rem;
            background-image: linear-gradient(to top, #CDE2FF, #fff);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35rem;
            color: #526BEA;
            border-top-right-radius: 15rem;
            border-bottom-right-radius: 15rem;
        }

        .bottom-view1-icon-right {
             100%;
            height: 60rem;
            background-image: linear-gradient(to top, #CDE2FF, #fff);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35rem;
            color: #526BEA;
            border-top-left-radius: 15rem;
            border-bottom-left-radius: 15rem;
        }

        .bottom-view1-text-view {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35rem;
            padding: 10rem 20rem;
            box-sizing: border-box;
        }

        .bottom-view1-line-view {
             1rem;
            display: flex;
            align-items: center;
        }

        .bottom-view1-line-view div {
            height: 50rem;
             100%;
            background-color: #4FA7BF;
        }

        .bottom-view2 {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0 5rem;
            box-sizing: border-box;
        }

        .bottom-list-view {
            display: flex;
            align-items: center;
        }

        .bottom-scroll-view {
            position: relative;
            left: 0;
             auto;
            min- 0;
            flex-shrink: 0;
            display: flex;
        }

        .bottom-line {
            height: 1rem;
        }

        .bottom-item {
             180rem;
            position: relative;
            margin: 0 8rem;
        }

        .bottom-item img {
             100%;
        }

        .bottom-item div {
            position: absolute;
             100%;
            bottom: 20rem;
            left: 0;
            text-align: center;
            font-size: 25rem;
        }

        #inTime {
            font-size: 30rem;
            margin-right: 10rem;
        }

        #patientAge,
        #inpNo,
        #doctorName,
        #nurseName {
            font-size: 30rem;
        }

        #bottom-scroll-view-marquee {
            display: none;
        }
    </style>
</head>

<body>
    <div class="main-view">
        <div class="top-view">
            <div class="top">
                <div class="top-left" id="bedName">..</div>
                <div class="top-right">
                    <div class="top-right-view">
                        <div class="top-right-name" id="patientName">..</div>
                        <div class="top-right-info-view">
                            <div class="top-right-level" id="nurseLevel">..</div>
                            <div class="top-right-other">
                                <div class="top-right-sex" id="sex">..</div>
                                <div class="top-right-time" id="patientAge">..</div>
                            </div>
                        </div>
                    </div>
                    <div class="top-right-view2">
                        <div class="top-right-text">住院号：<span id="inpNo">..</span></div>
                        <div class="top-right-text2"><span id="inTime">..</span>入院</div>
                    </div>
                    <div class="top-right-view3">
                        <div class="top-right-view3-card">
                            <div class="top-right-view3-card-text top-right-doct">
                                <div class="top-right-view3-card-text-key">主管医生</div>
                                <div class="top-right-view3-card-text-value" id="doctorName">..</div>
                            </div>
                            <div class="top-right-view3-card-text left-auto">
                                <div class="top-right-view3-card-text-key">责任护士</div>
                                <div class="top-right-view3-card-text-value" id="nurseName">..</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-view">
            <div class="bottom">
                <img class="bottom-background" src="./bedSideCardAssets/bottomBack.jpg" alt="">
                <div class="bottom-view1">
                    <div class="bottom-view1-icon-view">
                        <div class="bottom-view1-icon-left">敏</div>
                    </div>
                    <div class="bottom-view1-text-view" id="allergy">..</div>
                    <div class="bottom-view1-line-view">
                        <div></div>
                    </div>
                    <div class="bottom-view1-text-view" id="diet">..</div>
                    <div class="bottom-view1-icon-view">
                        <div class="bottom-view1-icon-right">食</div>
                    </div>
                </div>
                <img class="bottom-line" src="./bedSideCardAssets/line.png" alt="">
                <div class="bottom-view2">
                    <marquee behavior="scroll" direction="left" scrollamount="6" scrolldelay="60"
                        id="bottom-scroll-view-marquee">
                        <div class="bottom-list-view">
                            <div class="bottom-scroll-view">
                                <!-- <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div>
                                <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                                    <div>防跌倒</div>
                                </div> -->
                            </div>
                        </div>
                    </marquee>
                    <div class="bottom-scroll-view" id="bottom-scroll-view">
                        <!-- <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                            <div>防跌倒</div>
                        </div>
                        <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                            <div>防跌倒</div>
                        </div>
                        <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                            <div>防跌倒防跌倒</div>
                        </div>
                        <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                            <div>防跌倒</div>
                        </div>
                        <div class="bottom-item"><img src="./bedSideCardAssets/car2.png" alt="">
                            <div>防跌倒</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    document.querySelectorAll('.top-left')[0].addEventListener('click', function () {
        window.history.back();
    })

    // 初始化床头卡处理实例
    var cardDealFun =  new DealCard()
    cardDealFun.dealInfoDataCallback = (data)=>renderData(data) // 初始化页面显示回调函数
    cardDealFun.showLabelCallback = ()=>renderLabel() // 护理标签显示回调函数
    cardDealFun.clearPageCallback = ()=>clearInfo() // 清除页面显示回调函数
    cardDealFun.GuoandYinshiCallback = (data)=>GuoandYinshi(data) // 病患标签(过敏、饮食)处理回调函数
    //暴漏给安卓调用
    window.getData = function (bedno, ucode, etnType, optype, jsonData) {
        // 处理床位号的回调方法
        if (bedno) {
            renderBedName(bedno); //床号
        }
        cardDealFun.init(bedno, ucode, etnType, optype, jsonData)
    }

    //数据绑定到页面
    function renderData(resData) {
        if (resData.data) {
            var data = resData.data.patientSelectDtos[0].patientIn;

            renderPatientName(data.patientName); //病人姓名
            document.getElementById('sex').innerText = data.sex; //性别
            document.getElementById('patientAge').innerText = data.patientAge;    //年龄
            document.getElementById('inpNo').innerText = data.inpNo; //住院号
            var _inTime = new Date(data.inTime); //入院日期
            document.getElementById('inTime').innerText = _inTime.getFullYear() + '-' + (_inTime.getMonth() + 1) + '-' + _inTime.getDate();
            document.getElementById('doctorName').innerText = data.doctorName || '暂无'; //主管医生
            document.getElementById('nurseName').innerText = data.nurseName || '暂无'; //责任护士
            renderAllergy(data.allergy); //过敏
            renderDiet(data.diet); //饮食

            //护理等级绑定
            var levelConfig = resData.data.patientSelectDtos[0].nurseLevelConfig;
            var levelDom = document.getElementById('nurseLevel');
            if (levelConfig) {
                levelDom.style.visibility = "";
                levelDom.style.color = levelConfig.fontColor;
                levelDom.style.backgroundColor = levelConfig.backgroundColor;
                levelDom.innerText = levelConfig.nurseLevelName;
            } else levelDom.style.visibility = "hidden";

            // 获取护理标签
            cardDealFun.getBedCardLabel()
            // 获取患者标签
            cardDealFun.getCartPatientLabel()
        } else {
            //清空数据显示
            clearInfo();
        }
    }

    //清空数据显示
    function clearInfo() {
        document.getElementById('bottom-scroll-view').innerHTML = ""; //护理标签
        document.getElementById('patientName').innerHTML = "暂无"; //病人姓名
        document.getElementById('sex').innerText = ''; //性别
        document.getElementById('patientAge').innerText = '';    //年龄
        document.getElementById('inpNo').innerText = '暂无'; //住院号
        document.getElementById('inTime').innerText = ''; //入院日期
        document.getElementById('doctorName').innerText = '暂无'; //主管医生
        document.getElementById('nurseName').innerText = '暂无'; //责任护士
        document.getElementById('allergy').innerText = "暂无"; //过敏
        document.getElementById('diet').innerText = "暂无"; //饮食
        document.getElementById('nurseLevel').style.visibility = "hidden"; //护理等级
        $('#allergy,#diet').css({
            'color':'#000',
            'background-color':'#fff'
        })
    }

    //床号渲染
    function renderBedName(_bedName) {
        var _dom = document.getElementById('bedName');
        _dom.innerText = _bedName;
        //最长要处理14位
        if (_bedName.length == 3) _dom.style.fontSize = "170rem";
        else if (_bedName.length == 4) _dom.style.fontSize = "120rem";
        else if (_bedName.length == 5) _dom.style.fontSize = "100rem";
        else if (_bedName.length == 6) _dom.style.fontSize = "80rem";
        else if (_bedName.length == 7) _dom.style.fontSize = "70rem";
        else if (_bedName.length > 7) {
            _dom.style.fontSize = "70rem";
            _dom.style.wordBreak = "break-all";
            _dom.style.textAlign = "center";
        }
    }

    //病人姓名渲染
    function renderPatientName(name) {
        //脱敏
        if (cardDealFun.isFilterName) {
            if (name.length <= 1) return;
            else if (name.length == 2) name = name.substr(0, 1) + '*';
            else {
                var _n = name.substr(0, 1);
                var _count = 0;
                for (var i = 0; i < name.length - 2; i++) {
                    //如果有3个星，就不加了
                    if (_count > 2) break;
                    _n += '*';
                    _count++;
                }
                _n += name.substr(name.length - 1, 1);
                name = _n;
            }
        }

        var _dom = document.getElementById('patientName');
        _dom.innerText = name;

        if (cardDealFun.isFilterName) {
            //脱敏可以不用滚动

        } else {
            //超出5个字就滚动
            if (name.length > 4) {
                _dom.innerHTML = '<marquee behavior="scroll" direction="left" scrollamount="4" scrolldelay="60">' + name + '</marquee>';
            } else {

            }
        }
    }

    //过敏渲染
    function renderAllergy(data) {
        if (data) {
            //大于26个字符开始滚动
            if (data.length <= 26) document.getElementById('allergy').innerText = data || "暂无";
            else document.getElementById('allergy').innerHTML = '<marquee behavior="scroll" direction="up" scrollamount="2">' + data + '</marquee>';
        } else {
            document.getElementById('allergy').innerText = data || "暂无";
        }
    }

    //饮食渲染
    function renderDiet(data) {
        if (data) {
            //大于26个字符开始滚动
            if (data.length <= 26) document.getElementById('diet').innerText = data || "暂无";
            else document.getElementById('diet').innerHTML = '<marquee behavior="scroll" direction="up" scrollamount="2">' + data + '</marquee>';
        } else {
            document.getElementById('diet').innerText = data || "暂无";
        }
    }
    /**
     * 病患标签处理(过敏、饮食)
     */
    function GuoandYinshi(data){
        console.log('data---',data)
        if(data.allergy !== null){ //过敏
            $('#allergy').css({
                'color':data.allergy.fontColor,
                'background-color':data.allergy.backGroundColor
            })
        }
        if(data.diet !== null){ // 饮食
            $('#diet').css({
                'color':data.diet.fontColor,
                'background-color':data.diet.backGroundColor
            })
        }
    }

    //护理标签获取并渲染
    //请求需要参数patientIn.deptId、patientIn.orgId，所以需要在请求回调中调用
    function renderLabel() {
        const labelList = cardDealFun.patientLabel
        var domView = document.getElementById('bottom-scroll-view');
        var _marq = document.getElementById('bottom-scroll-view-marquee');
        var _sv = _marq.getElementsByClassName('bottom-scroll-view')[0];
        _sv.innerHTML = '';
        domView.innerHTML = '';

        //渲染
        //如果标签长度超过6个，准备启动动画展示
        if (labelList.length > 6) {
            domView.style.display = "none";
            _marq.style.display = "block";

            for (var i = 0; i < labelList.length; i++) {
                _sv.innerHTML += '<div class="bottom-item"><img src="' + labelList[i].img + '" alt=""><div>' + labelList[i].labelName + '</div></div>';
            }

        } else {
            _marq.style.display = "none";
            domView.style.display = 'flex';

            for (var i = 0; i < labelList.length; i++) {
                domView.innerHTML += '<div class="bottom-item"><img src="' + labelList[i].img + '" alt=""><div>' + labelList[i].labelName + '</div></div>';
            }
        }
    }
</script>