update_202312071736_项目-治疗室屏幕web-样式调整，适配ios浏览器v1

jazz

2023-12-08 878885c5872fe2fcd153a6571e75a27cb1025e97

 src/pages/room/detail.vue

@@ -1,10 +1,14 @@
<!--room-detail.vue-->
<template>
  <div class="page">
  <div class="page flex flex-col">
    <div class="page_header flex flex-ver">
      <div class="left flex flex-ver" @click="back">
        <img class="page_logo_1" src="../../assets/img/logo_1.png">
        <img class="page_logo_2" src="../../assets/img/logo_2.png">
        <div class="page_logo_1">
          <img class="img" src="static/imgs/logo_1.png">
        </div>
        <div class="page_logo_2">
          <img class="img" src="static/imgs/logo_2.png">
        </div>
      </div>
      <div class="right flex-1 flex flex-jcfe flex-ver">
        <div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
@@ -17,7 +21,7 @@
      </div>
    </div>
    <!-- 未有安排 -->
    <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.length)" class="page_container flex flex-ver">
    <div v-if="!occupyInfoView && (!assignTreatList || !assignTreatList.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>
@@ -25,25 +29,33 @@
          <div class="flex flex-ver">
            <div class="btn_box__item flex flex-center white" data-tx="空闲" data-status="0" @click="statusChg">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/free.png">
                <div class="icon">
                  <img class="img" src="static/imgs/free.png">
                </div>
                <div class="tx">空闲</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center blue" data-tx="使用中" data-status="1" @click="statusChg">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/using.png">
                <div class="icon">
                  <img class="img" src="static/imgs/using.png">
                </div>
                <div class="tx white">使用中</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center yellow" data-tx="客人休息" data-status="2" @click="statusChg">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/rest.png">
                <div class="icon">
                  <img class="img" src="static/imgs/rest.png">
                </div>
                <div class="tx">客人休息</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center gray" data-tx="通知打扫" data-status="3" @click="statusChg">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/clear.png">
                <div class="icon">
                  <img class="img" src="static/imgs/clear.png">
                </div>
                <div class="tx">通知打扫</div>
              </div>
            </div>
@@ -52,7 +64,7 @@
      </div>
    </div>
    <!-- 没有客人和有安排 -->
    <div v-if="!occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-ver">
    <div v-if="!occupyInfoView && (assignTreatList && assignTreatList.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>
@@ -82,7 +94,9 @@
                  <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">
                  <img class="icon" src="../../assets/img/choose.png">
                  <div class="icon">
                    <img class="img" src="static/imgs/choose.png">
                  </div>
                </div>
              </div>
            </div>
@@ -91,7 +105,7 @@
      </div>
    </div>
    <!-- 客人和有安排 -->
    <div v-if="occupyInfoView && (assignTreatList && assignTreatList.length)" class="page_container flex flex-ver">
    <div v-if="occupyInfoView && (assignTreatList && assignTreatList.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 class="room_content">
@@ -166,7 +180,9 @@
                  <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">
                  <img class="icon" src="../../assets/img/choose.png">
                  <div class="icon">
                    <img class="img" src="static/imgs/choose.png">
                  </div>
                </div>
              </div>
            </div>
@@ -193,6 +209,7 @@
import XioRoomStatusChg from '@/components/xio_room_status_chg'
import Req from '../../utils/jun_httpInstall' // http 请求
var isUseDefault = false // 是否已使用默认客人
var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
export default {
  name: 'RoomDetail',
  components: {
@@ -217,8 +234,8 @@
        return this.occupyInfo
      // 没有占用
      } else {
        // 还没使用默认客人值
        if (!isUseDefault && this.assignTreatList && this.assignTreatList.length) {
        // 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
        if ((!isUseDefault || (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
          isUseDefault = true
          return this.assignTreatList[0]
        // 已使用过默认客人值
@@ -240,8 +257,8 @@
      // 计时
      this.countGetTime(this, 'timeObj', 'detail')
      // 轮询getData，8秒一次
      // this.pollingAjaxFn(this, 'getData', 'detail', 8000)
      this.getData()
      this.pollingAjaxFn(this, 'getData', 'detail', 8000)
      // this.getData()
    },
    // 获取房间详情
    getData() {
@@ -251,14 +268,23 @@
        params.shopRoomId = this.id
      }
      Req.http.post({
        url: 'treat/screen/room/info',
        url: 'guide/treat/screen/room/info',
        data: params,
        udData: { noLoading: true },
        header: { 'Content-Type': 'application/json' },
        mockData: {
          code: 100,
          msg: '',
          data: {}
          data: {
            roomInfo: {
              roomNo: 'xx',
              status: 0 // 0空闲 1使用 2休息 3打扫
            },
            assignTreatList: [{
              startTime: '2023-12-08 00:00:00'
            }],
            occupyInfo: null
          }
        }
      }).then((res) => {
        if (res && res.data) {
@@ -269,6 +295,9 @@
              o.startTime = `${st[0]}:${st[1]}`
            })
          }
          // 已有占用的，更改已使用默认客人的状态
          res.data.occupyInfo && (isUseDefaultChg = 1)
          res.data.occupyInfo && (isUseDefault = 1)
          // 占用信息治疗时间处理
          if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
            var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
@@ -284,6 +313,7 @@
    // 返回
    back() {
      isUseDefault = false
      isUseDefaultChg = 0
      // 关闭计时
      this.stopCountGetTime('detail')
      // 关闭轮询
@@ -326,7 +356,7 @@
        params.treatRecordId = item.id
      }
      Req.http.post({
        url: 'treat/screen/room/status/update',
        url: 'guide/treat/screen/room/status/update',
        data: params,
        header: { 'Content-Type': 'application/json' },
        mockData: {
@@ -335,6 +365,10 @@
          data: {}
        }
      }).then((res) => {
        // 在已有默认客人的情况下，改变状态更改标识（适配轮询）
        if (isUseDefault) {
          isUseDefaultChg = 1
        }
        // console.log('8888888888888888888888888888888888', res)
        cb && cb()
      })
@@ -392,6 +426,9 @@
</style>

<style scoped>
.page{
  overflow: auto;
}
.page_header .reset_btn {
  width: 200px;
  height: 60px;
@@ -405,7 +442,7 @@
  cursor: pointer;
}
.page_container .main {
  height: 100%;
  /* height: 100%; */
  border-radius: 10px;
  background-color: rgba(255,255,255,1);
  color: rgba(16,16,16,1);
@@ -467,6 +504,10 @@
  height: 60px;
  display: block;
  margin-right: 17px;
}
.page_container .main .btn_box__item .icon .img {
  width: 100%;
  height: 100%;
}
.page_container .main .btn_box__item .tx {
  line-height: 37px;
@@ -556,7 +597,7 @@
.page_container .right {
  width: 686px;
  margin-left: 30px;
  height: 100%;
  /* height: 100%; */
}
.page_container .right_block {
  width: 100%;
@@ -603,6 +644,10 @@
  height: 20px;
  display: block;
}
.page_container .right .guest_list__td .icon .img {
  width: 100%;
  height: 100%;
}
.page_container .right .guest_list__td:nth-child(1) {
  width: 19.54%;
}