From 583e1038163d7b95f7927f83b19d81f6eac32020 Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期四, 28 十二月 2023 19:35:44 +0800
Subject: [PATCH] update_202312281935_单个治疗室多个客人的逻辑编写v1

---
 src/pages/room/detail.vue |  741 +++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 455 insertions(+), 286 deletions(-)

diff --git a/src/pages/room/detail.vue b/src/pages/room/detail.vue
index cd28687..13df298 100644
--- a/src/pages/room/detail.vue
+++ b/src/pages/room/detail.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="right flex-1 flex flex-jcfe flex-ver">
-        <el-button type="primary" icon="el-icon-refresh" class="reset_btn flex flex-center" size="small" style="width: 100px;" @click="getData">鍒锋柊</el-button>
+        <el-button type="primary" icon="el-icon-refresh" class="reset_btn flex flex-center" size="small" style="width: 100px;" @click="resetPage">鍒锋柊</el-button>
         <div class="reset_btn flex flex-center" @click="resetStatus">閲嶇疆鎴块棿鐘舵��</div>
         <div class="page_date">
           <div class="page_week">{{ timeObj.week }}</div>
@@ -21,8 +21,9 @@
         <!-- <div class="page_time">{{ timeObj.time }}</div> -->
       </div>
     </div>
+    <div class="page_header_placeholer" />
     <!-- 鏈湁瀹夋帓 -->
-    <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.length)" class="page_container flex flex-1">
+    <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (!assignTreatListView || !assignTreatListView.length)" class="page_container flex flex-1">
       <div class="main flex-1">
         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
         <div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
@@ -65,137 +66,39 @@
       </div>
     </div>
     <!-- 娌℃湁瀹汉鍜屾湁瀹夋帓 -->
-    <div v-if="!occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-1">
+    <div v-if="(!occupyInfoViewArr || !occupyInfoViewArr.length) && (assignTreatListView && assignTreatListView.length)" class="page_container flex flex-1">
       <div class="main flex-1">
         <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
         <div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
-        <div v-if="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
-          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('瀹汉浼戞伅', 2)">瀹汉浼戞伅</div>
-          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
-          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
-          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('绌洪棽', 0)">缁撴潫鎵撴壂</div>
+        <div v-show="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
+          <div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('瀹汉浼戞伅', 2)">瀹汉浼戞伅</div>
+          <div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-show="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
+          <div v-show="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('绌洪棽', 0)">缁撴潫鎵撴壂</div>
         </div>
       </div>
       <div class="right">
-        <div class="right_block flex flex-col">
-          <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
-          <div class="guest_block flex-1">
-            <div v-if="assignTreatList && assignTreatList.length" class="guest_list">
-              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
-                <div class="guest_list__td">
-                  <div class="tx flex flex-ver">
-                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
-                  </div>
-                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <span class="tx">{{ item.startTime?item.startTime+'寮�濮�':'' }}</span>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(鍖荤敓)銆�':'' }}{{ item.aNurseName?item.aNurseName+'(鎶ゅ+)':'' }}</span>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <div class="tx">鍒囨崲</div>
-                  <!-- <div class="icon">
-                    <img class="img" src="static/imgs/choose.png">
-                  </div> -->
-                </div>
-              </div>
-            </div>
-            <div v-if="!assignTreatList || !assignTreatList.length" class="guest_list">
-              <div class="guest_list__row flex flex-center rowtip">鏆傛棤鏁版嵁</div>
-            </div>
-          </div>
+        <div class="right_block">
+          <XioRoomGuestBox ref="XioRoomGuestBox" :assign-treat-list-view-com="assignTreatListView" @selectCustomer="selectCustomer" />
         </div>
       </div>
     </div>
-    <!-- 瀹汉鍜屾湁瀹夋帓 -->
-    <div v-if="occupyInfoView" class="page_container flex flex-1">
-      <div class="main flex-1">
-        <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
-        <div class="room_content">
-          <div class="tip">璇婄枟瀹夋帓</div>
-          <!-- <div class="name">{{ occupyInfoView.userName }}</div> -->
-          <div class="name">
-            <el-popover
-              placement="top"
-              width="400"
-              popper-class="top_tx"
-              trigger="click"
-              :popper-options="{ removeOnDestroy: true }"
-            >
-              <div>{{ occupyInfoView.userName }}</div>
-              <div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div>
-            </el-popover>
+    <!-- 瀹汉鍜屾湁瀹夋帓 over-width -->
+    <div v-if="occupyInfoViewArr && occupyInfoViewArr.length" class="page_container flex flex-1" :class="[occupyInfoViewArr && occupyInfoViewArr.length>1?'over-width':'']">
+      <div class="flex flex-1">
+        <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="main flex-1">
+          <div v-if="occupyInfoViewArr.length>1" class="cancel_icon_block" @click="cancelCustomerItem(item)">
+            <img class="img" src="static/imgs/cancel.png">
           </div>
-          <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
-          <div v-if="occupyInfoView.startTime" class="time">瀹夋帓娌荤枟鏃堕棿锛歿{ occupyInfoView.startTime }} 寮�濮�</div>
-        </div>
-        <div v-if="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
-          <div v-if="roomInfo.status == 0" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('浣跨敤涓�', 1)">寮�濮嬫不鐤�</div>
-          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('瀹汉浼戞伅', 2)">瀹汉浼戞伅</div>
-          <div v-if="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
-          <div v-if="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('鎵撴壂涓�', 3)">閫氱煡鎵撴壂</div>
-          <div v-if="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('绌洪棽', 0)">缁撴潫鎵撴壂</div>
+          <XioRoomGuestInfoBox :ref="`XioRoomGuestInfoBox_${item.id}`" :room-info="roomInfo" :occupy-info-view="item" :off-narcosis-ids="offNarcosisIds" @setStatus="setComStatus" />
         </div>
       </div>
       <div class="right flex flex-col">
-        <div class="room_info flex-1">
-          <div class="staff_box flex flex-ver flex-sb">
-            <div class="staff_box_item flex-1 flex flex-center">
-              <div>
-                <div class="staff_box_item__title">鍒嗚瘖椤鹃棶</div>
-                <div class="staff_box_item__name">{{ occupyInfoView.adviserName || '' }}</div>
-              </div>
-            </div>
-            <div class="staff_box_item flex-1 flex flex-center">
-              <div>
-                <div class="staff_box_item__title">鎵ц鍖荤敓</div>
-                <div class="staff_box_item__name">{{ occupyInfoView.aDoctorName || '' }}</div>
-              </div>
-            </div>
-            <div class="staff_box_item flex-1 flex flex-center">
-              <div>
-                <div class="staff_box_item__title">鎵ц鎶ゅ+</div>
-                <div class="staff_box_item__name">{{ occupyInfoView.aNurseName || '' }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="room_info_project">
-            <div class="room_info_project_block">
-              <div class="tx">{{ occupyInfoView.projectName || '' }}</div>
-            </div>
-          </div>
+        <div v-for="(item,index) in occupyInfoViewArr" :key="index" class="flex-1 right_room_info">
+          <XioRoomInfoBlock ref="XioRoomInfoBlock" :occupy-info-view="item" />
         </div>
-        <div class="guest_box flex flex-col">
-          <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
-          <div class="guest_block flex-1">
-            <div v-if="assignTreatList && assignTreatList.length" class="guest_list">
-              <div v-for="(item, index) in assignTreatList" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
-                <div class="guest_list__td">
-                  <div class="tx flex flex-ver">
-                    <div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
-                  </div>
-                  <div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq || '' }}</div>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <span class="tx">{{ item.startTime?item.startTime+'寮�濮�':'' }}</span>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(鍖荤敓)銆�':'' }}{{ item.aNurseName?item.aNurseName+'(鎶ゅ+)':'' }}</span>
-                </div>
-                <div class="guest_list__td flex flex-center">
-                  <div class="tx">鍒囨崲</div>
-                  <!-- <div class="icon">
-                    <img class="img" src="static/imgs/choose.png">
-                  </div> -->
-                </div>
-              </div>
-            </div>
-            <div v-if="!assignTreatList || !assignTreatList.length" class="guest_list">
-              <div class="guest_list__row flex flex-center rowtip">鏆傛棤鏁版嵁</div>
-            </div>
-          </div>
+        <div v-if="occupyInfoViewArr.length<=1" class="flex flex-col" style="border-radius: 10px;">
+          <XioRoomGuestBox ref="XioRoomGuestBox" :assign-treat-list-view-com="assignTreatListView" @selectCustomer="selectCustomer" />
         </div>
       </div>
     </div>
@@ -203,6 +106,8 @@
     <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
     <!-- 鏇存敼鎴块棿鐘舵�佺獥 -->
     <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
+    <!-- MIC閫氱煡鍗搁夯 -->
+    <!-- <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" /> -->
   </div>
 </template>
 
@@ -212,18 +117,31 @@
 // 瀹汉浼戞伅 2
 // 寰呮墦鎵�/閫氱煡鎵撴壂 3
 // import Login from '../utils/jun_login.js'
+// 鎴块棿瀹汉淇℃伅
+import XioRoomGuestInfoBox from '@/components/xio_room_guest_info_box'
+// 鎴块棿璐熻矗鍛樺伐淇℃伅
+import XioRoomInfoBlock from '@/components/xio_room_info_block'
+// 鎴块棿瀹㈡埛棰勭害鍒楄〃淇℃伅
+import XioRoomGuestBox from '@/components/xio_room_guest_box'
 // 閫夋嫨瀹汉寮圭獥
 import XioCustomerSelect from '@/components/xio_customer_select'
 // 鏇存敼鎴块棿鐘舵�佺獥
 import XioRoomStatusChg from '@/components/xio_room_status_chg'
+// 閫氱煡鍗搁夯
+// import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice'
 import Req from '../../utils/jun_httpInstall' // http 璇锋眰
+// import xioFn from './utils/xio_fn.js'
 var isUseDefault = false // 鏄惁宸蹭娇鐢ㄩ粯璁ゅ浜�
 var isUseDefaultChg = 0// 宸蹭娇鐢ㄩ粯璁ゅ浜哄悗鎴块棿鏄惁鏈夋敼鍙樼姸鎬�
 export default {
   name: 'RoomDetail',
   components: {
+    XioRoomGuestInfoBox,
+    XioRoomInfoBlock,
+    XioRoomGuestBox,
     XioCustomerSelect,
     XioRoomStatusChg
+    // XioRoomOffNarcosisNotice
   },
   inject: ['noop'],
   data() {
@@ -232,31 +150,103 @@
       roomInfo: {},
       occupyInfo: '', // 褰撳墠鍗犵敤浜虹殑淇℃伅
       assignTreatList: [],
-      statusTx: ['绌洪棽', '浣跨敤涓�', '瀹汉浼戞伅', '鎵撴壂涓�'],
-      timeObj: {} // week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
+      statusTx: ['绌洪棽', '浣跨敤涓�', '瀹汉浼戞伅', '鎵撴壂涓�', '鏁烽夯涓�'],
+      timeObj: {}, // week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
+      curTreatId: '',
+      curTreatIds: '', // 宸查�変腑鐨勬不鐤楄褰昳d鏁扮粍
+      offNarcosisIds: [] // 鏄惁宸查�氱煡鍗搁夯鐨勭敤鎴穒d鏁扮粍
+      // isShowAppellationName: true // 鏄惁鏄剧ず绉拌皳
     }
   },
   computed: {
+    // 褰撳墠宸查�夋嫨鐢ㄦ埛鐨勬暟缁勬暟鎹�
+    occupyInfoViewArr() {
+      // 缂撳瓨璁板綍
+      if (this.curTreatIds && this.curTreatIds.length) {
+        // todo 瀛樺湪缂撳瓨涓斿瓨鍦ㄥ崰鐢ㄦ暟鎹殑鏃跺�欙紝鏍规嵁鍚庣杩斿洖鍐嶈ˉ鍏呴�昏緫
+        return this.getCurTreatArr(this.curTreatIds)
+      } else {
+        // todo 瀛樺湪鍗犵敤鏁版嵁鐨勬椂鍊欙紝鏍规嵁鍚庣杩斿洖鍐嶈ˉ鍏呴�昏緫
+        if (this.occupyInfo) {
+          this.occupyInfoViewArrIdsHandle(this.occupyInfo)
+          return [this.occupyInfo]
+        } else {
+          if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
+            isUseDefault = true
+            this.occupyInfoViewArrIdsHandle(this.assignTreatList[0])
+            return [this.assignTreatList[0]]
+          } else {
+            return ''
+          }
+        }
+      }
+    },
+    // 褰撳墠宸查�夋嫨鐢ㄦ埛鐨勬暟鎹紙鍗曚釜锛夛紙鏆傛棤鐢級
     occupyInfoView() {
       // console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
-      // 鏈夊崰鐢�
-      if (this.occupyInfo) {
-        return this.occupyInfo
-      // 娌℃湁鍗犵敤
+      // 鏈夊綋鍓嶉�変腑鐨勶紝鏍规嵁闇�姹備慨鏀瑰鍔犻�変腑涓嶆洿鏀圭姸鎬侊紝鐢辩┖闂插紑濮�
+      if (this.curTreatId) {
+        return this.gatCurTreatInfo()
       } else {
-        // 杩樻病浣跨敤榛樿瀹汉鍊兼垨鑰呭凡浣跨敤榛樿瀹汉鍊艰繕娌℃敼鍙樼姸鎬侊紙閫傞厤杞锛�
-        if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
-          isUseDefault = true
-          return this.assignTreatList[0]
-        // 宸蹭娇鐢ㄨ繃榛樿瀹汉鍊�
+        // 鏈夊崰鐢�
+        if (this.occupyInfo) {
+          return this.occupyInfo
+        // 娌℃湁鍗犵敤
         } else {
-          return ''
+          // 杩樻病浣跨敤榛樿瀹汉鍊兼垨鑰呭凡浣跨敤榛樿瀹汉鍊艰繕娌℃敼鍙樼姸鎬侊紙閫傞厤杞锛�
+          if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
+            isUseDefault = true
+            return this.assignTreatList[0]
+          // 宸蹭娇鐢ㄨ繃榛樿瀹汉鍊�
+          } else {
+            return ''
+          }
         }
+      }
+    },
+    // 璇ユ不鐤楀鐢ㄦ埛鍒楄〃
+    assignTreatListView() {
+      if (this.assignTreatList && this.assignTreatList.length) {
+        this.assignTreatList.forEach((o) => {
+          if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
+            this.occupyInfoViewArr.forEach((_o) => {
+              if (_o.id === o.id) {
+                o.act = true
+              }
+            })
+          }
+        })
+        return this.assignTreatList
+      } else {
+        return []
       }
     }
   },
   activated() {
     console.log('roomDetail mounted')
+    // 璁板綍褰撳墠鐨勬不鐤桰D
+    // var curTreatId = localStorage.getItem('curTreatId')
+    // 璁板綍褰撳墠鐨勬不鐤楄褰旾D鏁扮粍
+    var curTreatIds = localStorage.getItem('curTreatIds')
+    // 鍗搁夯鐩稿叧
+    var localOffNarcosisIds = localStorage.getItem('offNarcosisIds')
+    // 鑾峰彇鏄惁宸查�氱煡鍗搁夯鏁扮粍
+    if (localOffNarcosisIds) {
+      this.offNarcosisIds = JSON.parse(localOffNarcosisIds)
+    } else {
+      this.offNarcosisIds = []
+      this.setLocalStorageOffNarcosisIds()
+    }
+    // 娌荤枟璁板綍ID鏁扮粍
+    if (curTreatIds) {
+      try {
+        this.curTreatIds = JSON.parse(curTreatIds)
+      } catch (error) {
+        this.curTreatIds = ''
+      }
+    }
+    // this.curTreatId = curTreatId || ''
+    // 娌荤枟瀹d
     this.id = this.$route.query.id || ''
     this.init()
   },
@@ -274,6 +264,74 @@
       // 杞getData锛�8绉掍竴娆�
       this.pollingAjaxFn(this, 'getData', 'detail', 8000)
       // this.getData()
+    },
+    // 鍒濆榛樿閫夋嫨鐨刬d鏁扮粍澶勭悊
+    occupyInfoViewArrIdsHandle(item) {
+      if (!this.curTreatIds) {
+        this.curTreatIds = []
+      }
+      this.curTreatIds.push(item.id)
+      this.setLocalCurTreatIds()
+    },
+    // 璁剧疆宸查�氱煡鍗搁夯id鏁扮粍
+    setLocalStorageOffNarcosisIds() {
+      localStorage.setItem('offNarcosisIds', JSON.stringify(this.offNarcosisIds))
+    },
+    // 鍗搁夯閫氱煡纭
+    // offNarcosisNoticeConfirm() {
+    //   if (this.occupyInfoView) {
+    //     if (offNarcosisIds && offNarcosisIds.length) {
+    //       var flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId })
+    //       if (!flag) {
+    //         offNarcosisIds.push(this.occupyInfoView.userId)
+    //       }
+    //     } else if (offNarcosisIds) {
+    //       offNarcosisIds.push(this.occupyInfoView.userId)
+    //     }
+    //     this.setLocalStorageOffNarcosisIds()
+    //   }
+    // },
+    // // 鏄剧ず閫氱煡鍗搁夯寮圭獥
+    // showOffNarcosisNotice() {
+    //   // 鎵撳紑寮圭獥
+    //   this.$refs['XioRoomOffNarcosisNotice'].showDialog()
+    // },
+    // 鏄剧ず閫氱煡鍗搁夯寮圭獥锛堝涓級
+    showOffNarcosisNoticeMulti(id) {
+      // 鎵撳紑寮圭獥锛屽姩鎬佺殑ref瀵硅薄鑾峰彇
+      // eslint-disable-next-line no-eval
+      var ref = eval('this.$refs.XioRoomGuestInfoBox_' + id)[0]
+      ref.showOffNarcosisNotice()
+    },
+    // 鐐瑰嚮鏄剧ず闅愯棌绉拌皳
+    // tapAppellationHandle() {
+    //   this.isShowAppellationName = !this.isShowAppellationName
+    // },
+    // 鑾峰彇褰撳墠娌荤枟淇℃伅(鏁扮粍)
+    getCurTreatArr(ids) {
+      var arr = []
+      if (this.assignTreatList && this.assignTreatList.length) {
+        this.assignTreatList.forEach((o) => {
+          if (ids && ids.length) {
+            ids.forEach((_o) => {
+              if (_o === o.id) {
+                arr.push(o)
+              }
+            })
+          }
+        })
+      }
+      return arr
+    },
+    // 鑾峰彇褰撳墠娌荤枟淇℃伅
+    gatCurTreatInfo() {
+      if (this.assignTreatList && this.assignTreatList.length) {
+        return this.assignTreatList.find((o) => { return o.id === this.curTreatId })
+      }
+    },
+    // 鍒锋柊娴忚鍣ㄩ〉闈�
+    resetPage() {
+      window.location.reload()
     },
     // 鑾峰彇鎴块棿璇︽儏
     getData() {
@@ -293,27 +351,71 @@
           data: {
             roomInfo: {
               roomNo: 'xx',
-              status: 0 // 0绌洪棽 1浣跨敤 2浼戞伅 3鎵撴壂
+              status: 0 // 0绌洪棽 1浣跨敤 2浼戞伅 3鎵撴壂 4 鏁烽夯涓�
             },
-            assignTreatList: [{
-              startTime: '2023-12-08 00:00:00'
-            }],
+            assignTreatList: [
+              {
+                id: 'a111',
+                startTime: '2023-12-08 00:00:00',
+                userName: '榛勫槈鑽�',
+                gender: 1,
+                hempStatus: 2,
+                ciq: '123',
+                adviserName: 'a鍚�',
+                aDoctorName: 'b鍚�',
+                aNurseName: 'c鍚�',
+                projectName: 'xxxxXXxxx',
+                userId: '111'
+              },
+              {
+                id: 'a222',
+                startTime: '2023-12-08 00:15:00',
+                userName: '鏉庡痉鍗�',
+                gender: 1,
+                hempStatus: 2,
+                ciq: '456',
+                adviserName: 'd鍚�',
+                aDoctorName: 'e鍚�',
+                aNurseName: 'f鍚�',
+                projectName: 'xxxxXXxxx',
+                userId: '222'
+              },
+              {
+                id: 'a333',
+                startTime: '2023-12-08 00:20:00',
+                userName: '鐚涘鍙�',
+                gender: 2,
+                hempStatus: 2,
+                ciq: '789',
+                adviserName: 'g鍚�',
+                aDoctorName: 'h鍚�',
+                aNurseName: 'i鍚�',
+                projectName: 'xxxxXXxxx',
+                userId: '333'
+              }
+            ],
             occupyInfo: null
           }
         }
       }).then((res) => {
         if (res && res.data) {
-          // 娌荤枟鏃堕棿澶勭悊
           if (res.data.assignTreatList && res.data.assignTreatList.length) {
             res.data.assignTreatList.forEach((o) => {
+              // 娌荤枟鏃堕棿澶勭悊
               var st = (o.startTime).split(' ')[1].split(':')
               o.startTime = `${st[0]}:${st[1]}`
+              // 绉拌皳澶勭悊
+              o.appellationName = o.userName[0] + `${o.gender ? ['濂冲+', '鍏堢敓', '濂冲+'][o.gender] : '濂冲+'}`
             })
           }
-          // 宸叉湁鍗犵敤鐨勶紝鏇存敼宸蹭娇鐢ㄩ粯璁ゅ浜虹殑鐘舵��
+          // todo 宸插崰鐢ㄧ敤鎴锋暟鎹鐞嗭紝寰呭悗绔慨鏀瑰啀澶勭悊
+          if (res.data.occupyInfo && res.data.occupyInfo.userName) {
+            res.data.occupyInfo.appellationName = res.data.occupyInfo.userName[0] + `${res.data.occupyInfo.gender ? ['濂冲+', '鍏堢敓', '濂冲+'][res.data.occupyInfo.gender] : '濂冲+'}`
+          }
+          // todo 宸叉湁鍗犵敤鐨勶紝鏇存敼宸蹭娇鐢ㄩ粯璁ゅ浜虹殑鐘舵��
           res.data.occupyInfo && (isUseDefaultChg = 1)
           res.data.occupyInfo && (isUseDefault = 1)
-          // 鍗犵敤淇℃伅娌荤枟鏃堕棿澶勭悊
+          // todo 鍗犵敤淇℃伅娌荤枟鏃堕棿澶勭悊
           if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
             var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
             res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
@@ -323,10 +425,30 @@
           }
         }
         // console.log('999999999999999999999999999', res)
+        // 鍗搁夯寮圭獥閫昏緫
+        var offNarcosisTimer = null
+        offNarcosisTimer = setTimeout(() => {
+          console.log('================================>鍒ゆ柇鍗搁夯寮圭獥', this.occupyInfoViewArr, 'offNarcosisIds:', this.offNarcosisIds)
+          if (this.occupyInfoViewArr && this.occupyInfoViewArr.length && this.offNarcosisIds) {
+            this.occupyInfoViewArr.forEach((o) => {
+              // 鍒ゆ柇鏀圭敤鎴锋槸鍚﹀脊鍑鸿繃鍗搁夯寮圭獥
+              var flag
+              flag = this.offNarcosisIds.find((_o) => { return _o === o.userId })
+              // 鐘舵��2涓旀病鏈夊脊鍑鸿繃寮圭獥
+              if (o.hempStatus === 2 && !flag) {
+                // 寮瑰嚭瀵瑰簲id寮圭獥
+                this.showOffNarcosisNoticeMulti(o.id)
+              }
+            })
+          }
+          clearTimeout(offNarcosisTimer)
+          offNarcosisTimer = null
+        }, 500)
       })
     },
     // 杩斿洖
     back() {
+      // 閲嶇疆榛樿宸蹭娇鐢ㄥ浜虹殑鍙傛暟
       isUseDefault = false
       isUseDefaultChg = 0
       // 鍏抽棴璁℃椂
@@ -346,20 +468,29 @@
     // 鏈湁瀹夋帓鐩存帴鐘舵�佸彉鏇�
     statusChg(e) {
       var { tx, status } = e.currentTarget.dataset
-      var { occupyInfoView, roomInfo } = this
-      console.log(tx, status)
+      // var { occupyInfoView, roomInfo } = this
+      console.log('==========================>娌℃湁瀹夋帓鏃舵病鏈夊浜虹洿鎺ュ彉鏇寸姸鎬�', tx, status)
       // if (roomInfo && status * 1 == roomInfo.status) {
       //   return
       // }
-      this.changeStatusFn(occupyInfoView, status, () => {
+      this.changeStatusFn({}, status, () => {
         this.getData()
       })
     },
-    // 鎸夋祦绋嬭缃埧闂寸姸鎬�
+    // 娌℃湁瀹汉鐨勬寜娴佺▼璁剧疆鎴块棿鐘舵��
     setStatus(tx, status) {
-      var { occupyInfoView, roomInfo } = this
-      console.log(tx, status)
-      this.changeStatusFn(occupyInfoView, status, () => {
+      // var { occupyInfoView, roomInfo } = this
+      console.log('============================>鏈夊畨鎺掓病鏈夊浜鸿缃埧闂寸姸鎬�', tx, status)
+      this.changeStatusFn({}, status, () => {
+        // 鍒锋柊璇︽儏
+        this.getData()
+      })
+    },
+    // 鎸夋祦绋嬭缃埧闂寸姸鎬侊紙缁勪欢锛�
+    setComStatus(opt) {
+      // var { occupyInfoView, roomInfo } = this
+      console.log('============================>瀹汉淇℃伅缁勪欢鐐瑰嚮鏇存敼鐘舵��', opt.tx, opt.status, opt.item)
+      this.changeStatusFn(opt.item, opt.status, () => {
         // 鍒锋柊璇︽儏
         this.getData()
       })
@@ -389,7 +520,28 @@
       }).then((res) => {
         // 鍦ㄥ凡鏈夐粯璁ゅ浜虹殑鎯呭喌涓嬶紝鏀瑰彉鐘舵�佹洿鏀规爣璇嗭紙閫傞厤杞锛�
         if (isUseDefault) {
+          console.log('鍦ㄥ凡鏈夐粯璁ゅ浜虹殑鎯呭喌涓嬶紝鏀瑰彉鐘舵�佹洿鏀规爣璇�')
           isUseDefaultChg = 1
+        }
+        // 褰撳墠閫変腑鐨勭敤鎴锋埧闂存洿鏀逛簡鐘舵�侊紝宸茬粡鎴愪负鍗犵敤鏃讹紝娓呴櫎閫変腑鍖荤枟璁板綍id
+        // if (item && item.id && item.id === this.curTreatId) {
+        //   console.log('褰撳墠閫変腑鐨勭敤鎴锋埧闂存洿鏀逛簡鐘舵�侊紝宸茬粡鎴愪负鍗犵敤鏃讹紝娓呴櫎閫変腑鍖荤枟璁板綍id')
+        //   localStorage.removeItem('curTreatId')
+        //   this.curTreatId = ''
+        // }
+        // 鍙鏇存敼涓虹┖闂插氨閲嶇疆鍙傛暟
+        if (status === 0) {
+          console.log('鎴块棿鏇存敼涓虹┖闂�')
+          // 閲嶇疆榛樿宸蹭娇鐢ㄥ浜虹殑鍙傛暟
+          isUseDefault = false
+          isUseDefaultChg = 0
+          // this.isShowAppellationName = true
+        }
+        // todo 鐢ㄦ埛缁撴潫娌荤枟鍚庯紝灏嗗叾浠庣紦瀛樹腑鍒犻櫎, 寰呮祴璇�
+        if (item && item.id && this.curTreatIds && this.curTreatIds.length && status === 0) {
+          console.log('褰撳墠鐢ㄦ埛鎵�鍦ㄦ埧闂存洿鏀逛簡鐘舵�佷负缁撴潫锛屾竻闄ゅ綋鍓嶇殑鍖荤枟璁板綍id')
+          // 褰撳墠閫夋嫨瀹㈡埛鐨勬暟缁勫垹闄ゅ鎴�
+          this.occupyInfoViewArrDataHandle('cancel', item)
         }
         // console.log('8888888888888888888888888888888888', res)
         cb && cb()
@@ -402,12 +554,19 @@
     },
     // 鏇存敼鎴块棿鐘舵�侊紙閲嶇疆鐘舵�佺殑鏇存敼鏂规硶锛�
     changeStatus(opt) {
-      var { occupyInfoView, roomInfo } = this
-      console.log(opt.statusTx, opt.status)
+      // var { occupyInfoView, roomInfo } = this
+      console.log('============================>閲嶇疆鎴块棿鐘舵��', opt.statusTx, opt.status)
       // if (roomInfo && opt.status * 1 == roomInfo.status) {
       //   return
       // }
-      this.changeStatusFn(occupyInfoView, opt.status, () => {
+      // 娓呴櫎閫変腑鍖荤枟璁板綍id
+      // localStorage.removeItem('curTreatId')
+      // this.curTreatId = ''
+      // 娓呴櫎閫変腑鍖荤枟璁板綍ids鏁扮粍
+      localStorage.removeItem('curTreatIds')
+      this.curTreatIds = ''
+      // 鍙樻洿鎴块棿鐘舵�佹柟娉�
+      this.changeStatusFn({}, opt.status, () => {
         // 鍒锋柊璇︽儏
         this.getData()
         // 鍏抽棴寮圭獥
@@ -416,6 +575,9 @@
     },
     // 閫夋嫨瀹㈡埛
     selectCustomer(item = {}) {
+      if (item.act) {
+        return
+      }
       // 鎵撳紑寮圭獥
       this.$refs['XioCustomerSelect'].showDialog()
       // 缁勪欢瀹㈡埛鏁版嵁澶勭悊
@@ -428,13 +590,72 @@
     },
     // 閫夋嫨瀹㈡埛纭畾
     selectCustomerSubmit(opt) {
-      console.log('submit', opt)
-      this.changeStatusFn(opt, 1, () => {
-        // 鍒锋柊璇︽儏
-        this.getData()
-        // 鍏抽棴寮圭獥
-        this.$refs['XioCustomerSelect'].hideDialog()
-      })
+      console.log('=======================>submit', opt)
+      // 纭畾閫夋嫨鐨勭敤鎴凤紝璁板綍id
+      // localStorage.setItem('curTreatId', opt.id)
+      // this.curTreatId = opt.id
+      // 褰撳墠閫夋嫨瀹㈡埛鐨勬暟缁勫鍔犲鎴�
+      this.occupyInfoViewArrDataHandle('add', opt)
+      // 閲嶇疆鎴块棿鐘舵��
+      if (this.roomInfo) {
+        this.changeStatusFn({}, 0, () => {
+          // 鍒锋柊璇︽儏
+          this.getData()
+        })
+      }
+      // 鍏抽棴寮圭獥
+      this.$refs['XioCustomerSelect'].hideDialog()
+    },
+    // 鍒犻櫎宸查�夋嫨鐨勫鎴锋暟鎹�
+    cancelCustomerItem(item) {
+      // 褰撳墠閫夋嫨瀹㈡埛鐨勬暟缁勫垹闄ゅ鎴�
+      this.occupyInfoViewArrDataHandle('cancel', item, true)
+    },
+    // 褰撳墠閫夋嫨瀹㈡埛鐨勬暟缁勫鍒犲鐞嗘柟娉�
+    occupyInfoViewArrDataHandle(key, item, isReset) {
+      // 澧炲姞锛堥�夋嫨锛�
+      if (key === 'add') {
+        // id鏁扮粍澶勭悊
+        if (this.curTreatIds && this.curTreatIds.length) {
+          // 褰撳墠娌荤枟璁板綍id娌℃湁鎵�閫夌敤鎴风殑娌荤枟璁板綍id
+          var flag = this.curTreatIds.find((o) => { return o === item.id })
+          if (!flag) {
+            this.curTreatIds.push(item.id)
+          }
+          // 缂撳瓨
+          this.setLocalCurTreatIds()
+        }
+        // 鏁扮粍鏁版嵁澶勭悊
+        // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
+        //   this.occupyInfoViewArr.push(item)
+        // }
+      }
+      // 鍒犻櫎
+      if (key === 'cancel') {
+        // id鏁扮粍澶勭悊
+        if (this.curTreatIds && this.curTreatIds.length) {
+          // 娣卞鍒�
+          var ids = JSON.parse(JSON.stringify(this.curTreatIds))
+          this.curTreatIds = ids.filter((o) => { return o !== item.id })
+          // 缂撳瓨
+          this.setLocalCurTreatIds()
+          // 鍒锋柊
+          if (isReset) {
+            // 鍒锋柊璇︽儏
+            this.getData()
+          }
+        }
+        // 鏁扮粍鏁版嵁澶勭悊
+        // if (this.occupyInfoViewArr && this.occupyInfoViewArr.length) {
+        //   // 娣卞鍒�
+        //   var arr = JSON.parse(JSON.stringify(this.occupyInfoViewArr))
+        //   this.occupyInfoViewArr = arr.filter((o) => { o.id !== item.id })
+        // }
+      }
+    },
+    // 璁剧疆鏈湴缂撳瓨ids鏁扮粍
+    setLocalCurTreatIds() {
+      localStorage.setItem('curTreatIds', JSON.stringify(this.curTreatIds))
     }
   }
 }
@@ -451,6 +672,16 @@
 .page{
   overflow: auto;
 }
+.page_header_placeholer {
+  height: 100px;
+}
+.page_header {
+  position: fixed;
+  top: 0;
+  left: 23px;
+  right: 23px;
+  z-index: 1;
+}
 .page_header .reset_btn {
   width: 200px;
   height: 60px;
@@ -465,6 +696,9 @@
   border: 0;
   margin-left: 20px;
 }
+.page_container.over-width {
+  width: 150%;
+}
 .page_container .main {
   /* height: 100%; */
   border-radius: 10px;
@@ -473,6 +707,25 @@
   font-size: 14px;
   /* text-align: center; */
   font-family: Roboto;
+  position: relative;
+}
+.page_container.over-width .main {
+  margin-right: 50px;
+}
+.page_container.over-width .main:last-child {
+  margin-right: 0;
+}
+.page_container .main .cancel_icon_block {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 12px;
+  right: 11px;
+  z-index: 1;
+}
+.page_container .main .cancel_icon_block .img {
+  width: 100%;
+  height: 100%;
 }
 .page_container .main .room_title {
   line-height: 50px;
@@ -548,6 +801,16 @@
   margin-top: 163px;
 }
 .page_container .main .room_left_btn_box__item {
+  width: 500px;
+  height: 150px;
+  line-height: 73px;
+  border-radius: 10px;
+  font-size: 50px;
+  text-align: center;
+  margin: auto;
+}
+.page_container .main .room_left_btn_box__item.flex-1 {
+  width: auto;
   height: 150px;
   line-height: 58px;
   border-radius: 10px;
@@ -557,9 +820,9 @@
   margin-right: 20px;
   font-weight: bold;
 }
-.page_container .main .room_left_btn_box__item:last-child {
+/* .page_container .main .room_left_btn_box__item:last-child {
   margin-right: 0;
-}
+} */
 .page_container .main .room_left_btn_box__item.yellow {
   color: rgba(255,255,255,1);
   background-color: rgba(233,157,66,1);
@@ -569,15 +832,12 @@
   color: rgba(79,79,79,1);
 }
 .page_container .main .room_left_btn_box__item.green {
-  width: 500px;
-  height: 150px;
-  line-height: 73px;
-  border-radius: 10px;
   background-color: rgba(47,174,206,1);
   color: rgba(255,255,255,1);
-  font-size: 50px;
-  text-align: center;
-  margin: auto;
+}
+.page_container .main .room_left_btn_box__item.b-green {
+  background-color: rgba(79,167,114,1);
+  color: rgba(255,255,255,1);
 }
 .page_container .main .room_content {
   margin-top: 30px;
@@ -600,6 +860,18 @@
 .page_container .main .room_content .name .tx {
   max-width: 666px;
   margin: auto;
+  text-align: center;
+}
+.page_container .main .room_content .name_icon {
+  width: 40px;
+  height: 40px;
+  display: block;
+  margin-top: 13px;
+  padding: 20px;
+}
+.page_container .main .room_content .name_icon .img {
+  width: 100%;
+  height: 100%;
 }
 .page_container .main .room_content .ciq {
   line-height: 42px;
@@ -623,133 +895,30 @@
   margin-left: 30px;
   /* height: 100%; */
 }
+.page_container.over-width .right_room_info {
+  margin-bottom: 58px;
+}
+.page_container.over-width .right_room_info:last-child {
+  margin-bottom: 0;
+}
 .page_container .right_block {
   width: 100%;
   height: 100%;
 }
-.page_container .right .guest_title {
-  height: 60px;
-  line-height: 28px;
-  border-radius: 10px 10px 0px 0px;
-  background-color: rgba(255,255,255,1);
-  color: rgba(34,123,235,1);
-  font-size: 20px;
-  text-align: center;
-  font-family: Roboto;
-  font-weight: bold;
-}
-.page_container .right .guest_block {
-  background-color: #fff;
-  overflow: auto;
-}
-.page_container .right .guest_list {
-  background-color: #fff;
-  padding-bottom: 23px;
-}
-.page_container .right .guest_list__row {
-  min-height: 75px;
-  background-color: rgba(34,123,235,0.1);
-}
-.page_container .right .guest_list__row:nth-child(2n) {
-  background-color: #fff;
-}
-.page_container .right .guest_list__row.rowtip {
-  background-color: #fff;
-  line-height: 30px;
-  color: rgba(0,0,0,.5);
-  font-size: 22px;
-}
-.page_container .right .guest_list__td {}
-.page_container .right .guest_list__td .tx {
-  line-height: 30px;
-  color: rgba(16,16,16,1);
-  font-size: 22px;
-  text-align: center;
-  font-family: PingFangSC-regular;
-  box-sizing: border-box;
-  padding: 0 5px;
-}
-.page_container .right .guest_list__td .icon {
-  width: 20px;
-  height: 20px;
-  display: block;
-}
-.page_container .right .guest_list__td .icon .img {
+.page_container .right_block .guest_box {
+  margin-top: 0;
   width: 100%;
   height: 100%;
-}
-.page_container .right .guest_list__td:nth-child(1) {
-  width: 19.54%;
-}
-.page_container .right .guest_list__td:nth-child(2) {
-  width: 21.86%;
-}
-.page_container .right .guest_list__td:nth-child(3) {
-  width: 46.06%;
-}
-.page_container .right .guest_list__td:nth-child(4) {
-  width: 12.54%;
-}
-.page_container .right .room_info {
-  width: 100%;
-  border-radius: 10px;
-  background-color: rgba(255,255,255,0.3);
-}
-.page_container .right .room_info .staff_box {
-  margin-top: 30px;
-}
-.page_container .right .room_info .staff_box_item {
-  height: 180px;
-}
-.page_container .right .room_info .staff_box_item:nth-child(1) {
-  background-color: rgba(255,255,255,0.1);
-}
-.page_container .right .room_info .staff_box_item:nth-child(2) {
-  background-color: rgba(255,255,255,0.3);
-  margin: 0 10px;
-}
-.page_container .right .room_info .staff_box_item:nth-child(3) {
-  background-color: rgba(255,255,255,0.1);
-}
-.page_container .right .room_info .staff_box_item__title {
-  line-height: 28px;
-  color: rgba(255,255,255,1);
-  font-size: 20px;
-  text-align: center;
-  font-family: PingFangSC-regular;
-}
-.page_container .right .room_info .staff_box_item__name {
-  line-height: 56px;
-  color: rgba(255,255,255,1);
-  font-size: 40px;
-  text-align: center;
-  font-family: PingFangSC-medium;
-  margin-top: 5px;
-}
-.page_container .right .room_info .room_info_project {
-  padding: 36px 20px 20px 20px;
-  height: 138px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.page_container .right .room_info .room_info_project_block {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-.page_container .right .room_info .room_info_project .tx {
-  line-height: 39px;
-  color: rgba(255,255,255,1);
-  font-size: 28px;
-  text-align: center;
-  font-family: PingFangSC-regular;
-}
-.page_container .right .guest_box {
-  margin-top: 65px;
-  width: 100%;
-  height: 345px;
-  background-color: #fff;
-  overflow: hidden;
+  -webkit-flex-flow: column;
+  flex-flow: column;
+  display: box;
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
 }
 </style>

--
Gitblit v1.8.0