患者基本情報の取得と画面に表示

前回、患者ID、氏名を患者基本情報画面に表示することが出来たので、今回は、患者ID、氏名以外の患者基本情報も画面に表示させれるよう、プログラムを修正していく。

まずはORCAの＊＊＊＊のところをそれらしい患者データを入れていく。
図１のように患者データを入れた。

図１：ORCAの患者基本情報の画面

あとは、残りの患者基本情報を画面に表示させていく。

HTMLを図２のように修正した。

HTML

<ons-page ng-controller="PatientController as patient">

  <ons-toolbar>
    <div class="center">基本情報</div>
  </ons-toolbar>

   <ons-list>
    <ons-list-header>
       <h1>個人情報</h1>
      </ons-list-header>
   </ons-list>    

  <div class="haikei">
    <ons-list-item>
      <ons-col width="30%"> <h6>氏名</h6> </ons-col>
      <ons-col><h4>{{ patient.WholeName }}</h4></ons-col>
    </ons-list-item>
   </div>

  <div class="haikei2">
    <ons-list-item>
      <ons-col width="30%"> <h6>シメイ</h6> </ons-col>
      <ons-col><h4>{{ patient.WholeName_inKana }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei">
   <ons-list-item>
      <ons-col width="30%"> <h6>患者ID</h6> </ons-col>
      <ons-col><h4>{{ patient.Patient_ID }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei2">
    <ons-list-item>
      <ons-col width="30%"> <h6>性別</h6> </ons-col>
      <ons-col><h4>{{ patient.Sex }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei">
    <ons-list-item>
      <ons-col width="30%"> <h6>生年月日</h6> </ons-col>
      <ons-col><h4>{{ patient.BirthDate }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei2">
    <ons-list-item>
      <ons-col width="30%"> <h6>住所</h6> </ons-col>
      <ons-col><h4>{{ patient.WholeAddress1 }}</h4></ons-col>
    </ons-list-item>
  </div>


   <ons-list>
    <ons-list-header><h1>アレルギー等</h1></ons-list-header>
   </ons-list> 

  <div class="haikei3">
    <ons-list-item>
      <ons-col width="30%"> <h6>アレルギー</h6> </ons-col>
      <ons-col><h4>{{ patient.Allergy1 }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei4">
    <ons-list-item>
      <ons-col width="30%"> <h6>感染症</h6> </ons-col>
      <ons-col><h4>{{ patient.Infection1 }}</h4></ons-col>
    </ons-list-item>
  </div>

  <div class="haikei3">
    <ons-list-item>
      <ons-col width="30%"> <h6>禁忌</h6> </ons-col>
      <ons-col><h4>{{ patient.Contraindication1 }}</h4></ons-col>
    </ons-list-item>
  </div>


   <ons-list>
    <ons-list-header><h1>コメント</h1></ons-list-header>
   </ons-list> 

  <div class="haikei5">
    <ons-list-item>
      <ons-col width="30%"> <h6>コメント</h6> </ons-col>
      <ons-col><h4>{{ patient.Comment1 }}</h4></ons-col>
    </ons-list-item>
  </div>


  </ons-list>
</ons-page>

                         　　　　図２：患者基本情報を画面に表示させるプログラム（ＨＴＭＬ）

次に、javaを図３のように修正した。
JS

Patient.get()
    .then(
      function(patient){
        that.Patient_ID = patient.Patient_ID;
        that.WholeName = patient.WholeName;
        that.BirthDate = patient.BirthDate;
        that.Sex = patient.Sex == '1' ? '男性' : '女性';
        that.WholeName_inKana = patient.WholeName_inKana;
        that.WholeAddress1 = patient.Home_Address_Information.WholeAddress1;
        that.Allergy1 = patient.Allergy1;
        that.Infection1 = patient.Infection1;
        that.Contraindication1 = patient.Contraindication1;
        that.Comment1 = patient.Comment1;
      }  
    );
}])

　　　　　　　　　　　　図３：患者基本情報を画面に表示させるプログラム（java）

そしたら、図４、図５のように、図１の患者基本情報が画面に表示された。
（分かりやすいように色付け、グルーピングした）

図４：アプリの患者基本情報の画面１

図５：アプリの患者基本情報の画面２

これで、うまく患者ID、氏名以外も患者基本情報画面に表示させれるようにできた。
あとは、それぞれで作成したプログラムを合わせて、１つの完成形のアプリにしていきたい。