Merge branch 'xio_dev'

jazz

2024-01-09 f6ea728ea50706b1dfa75bc0d266fb6b5f13ef7f

 src/components/xio_room_guest_info_box/index.vue

New file
@@ -0,0 +1,308 @@
<template>
  <div class="guest_info_box">
    <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> appellationName -->
      <div v-show="isShowAppellationName" class="flex flex-center">
        <div class="flex flex-ver">
          <div class="name">{{ occupyInfoView.appellationName }}</div>
          <div class="name_icon" @click="tapAppellationHandle">
            <img class="img" src="static/imgs/eye.png">
          </div>
        </div>
      </div>
      <div v-show="!isShowAppellationName" class="flex flex-center">
        <div class="flex flex-ver">
          <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>
          </div>
          <div class="name_icon" @click="tapAppellationHandle">
            <img class="img" src="static/imgs/eye.png">
          </div>
        </div>
      </div>
      <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
      <div v-if="occupyInfoView.startTime" class="time">安排治疗时间：{{ occupyInfoView.startTime }} 开始</div>
    </div>
    <div v-show="occupyInfoView" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
      <div v-show="occupyInfoView.treatRoomStatus == 0" class="room_left_btn_box__item flex flex-1 flex-center b-green btn_ani" @click="setStatus('敷麻中', 4, occupyInfoView)">开始敷麻</div>
      <div v-show="occupyInfoView.treatRoomStatus == 0" class="room_left_btn_box__item flex flex-1 flex-center green btn_ani" style="margin-right: 0;" @click="setStatus('使用中', 1, occupyInfoView)">开始治疗</div>
      <div v-show="occupyInfoView.treatRoomStatus == 4" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('使用中', 1, occupyInfoView)">开始治疗</div>
      <div v-show="occupyInfoView.treatRoomStatus == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2, occupyInfoView)">客人休息</div>
      <div v-show="occupyInfoView.treatRoomStatus == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" style="margin-right: 0;" @click="setStatus('打扫中', 3, occupyInfoView)">通知打扫</div>
      <div v-show="occupyInfoView.treatRoomStatus == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3, occupyInfoView)">通知打扫</div>
      <div v-show="occupyInfoView.treatRoomStatus == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0, occupyInfoView)">结束打扫</div>
    </div>
    <!-- MIC通知卸麻 -->
    <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" />
  </div>
</template>

<script>
// 通知卸麻
import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice'
export default {
  name: 'XioRoomGuestInfoBox',
  components: {
    XioRoomOffNarcosisNotice
  },
  props: {
    roomInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    occupyInfoView: {
      type: [Object, Array],
      default: () => {
        return {}
      }
    },
    offNarcosisIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isShowAppellationName: true
    }
  },
  methods: {
    noop() {
      return
    },
    // 设置已通知卸麻id数组
    setLocalStorageOffNarcosisIds() {
      localStorage.setItem('offNarcosisIds', JSON.stringify(this.offNarcosisIds))
    },
    // 卸麻通知确认
    offNarcosisNoticeConfirm() {
      if (this.occupyInfoView) {
        if (this.offNarcosisIds && this.offNarcosisIds.length) {
          var flag = this.offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId })
          if (!flag) {
            this.offNarcosisIds.push(this.occupyInfoView.userId)
          }
        } else if (this.offNarcosisIds) {
          this.offNarcosisIds.push(this.occupyInfoView.userId)
        }
        this.setLocalStorageOffNarcosisIds()
      }
    },
    // 显示通知卸麻弹窗
    showOffNarcosisNotice() {
      // 打开弹窗
      this.$refs['XioRoomOffNarcosisNotice'].showDialog()
      this.$refs['XioRoomOffNarcosisNotice'].dataInit(this.occupyInfoView)
    },
    // 点击显示隐藏称谓
    tapAppellationHandle() {
      this.isShowAppellationName = !this.isShowAppellationName
    },
    setStatus(tx, status, item) {
      this.$emit('setStatus', { tx, status, item })
    },
    // 确认
    confirm() {
      this.isShow = false
      this.$emit('confirm', { })
    },
    // 显示弹窗
    showDialog() {
      this.isShow = true
    },
    // 关闭弹窗
    hideDialog() {
      this.isShow = false
      this.$emit('confirm', { })
    }
  }
}
</script>

<style scoped>
.guest_info_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 39px;
  position: relative;
}
.guest_info_box .room_title {
  line-height: 50px;
  color: rgba(255,255,255,1);
  font-size: 36px;
  text-align: center;
  font-family: PingFangSC-medium;
  padding: 10px 0;
  background-color: rgba(34,123,235,1);
  width: 400px;
  margin: 0 auto 0 auto;
}
.guest_info_box .room_main_tip {
  line-height: 168px;
  font-size: 120px;
  color: rgba(46,77,124,1);
  text-align: center;
  font-family: PingFangSC-medium;
  margin-top: 107px;
  /* font-weight: bold; */
}
.guest_info_box .room_main_tip.gray {
  color: rgba(154,154,154,1);
}
.guest_info_box .btn_box {
  margin-top: 130px;
}
.guest_info_box .btn_box__item {
  width: 250px;
  height: 120px;
  border-radius: 10px;
  box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
  margin-right: 70px;
  cursor: pointer;
}
.guest_info_box .btn_box__item:last-child {
  margin-right: 0;
}
.guest_info_box .btn_box__item.white {
  background-color: rgba(255,255,255,1);
}
.guest_info_box .btn_box__item.blue {
  background-color: rgba(46,77,124,1);
}
.guest_info_box .btn_box__item.yellow {
  background-color: rgba(255,199,115,1);
}
.guest_info_box .btn_box__item.gray {
  background-color: rgba(206,206,206,1);
}
.guest_info_box .btn_box__item .icon {
  width: 60px;
  height: 60px;
  display: block;
  margin-right: 17px;
}
.guest_info_box .btn_box__item .icon .img {
  width: 100%;
  height: 100%;
}
.guest_info_box .btn_box__item .tx {
  line-height: 37px;
  color: rgba(51,51,51,1);
  font-size: 26px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.guest_info_box .btn_box__item .tx.white {
  color: rgba(255,255,255,1);
}
.guest_info_box .room_left_btn_box {
  padding: 0 23px;
  margin-top: 163px;
}
.guest_info_box .room_left_btn_box__item {
  width: 500px;
  height: 150px;
  line-height: 73px;
  border-radius: 10px;
  font-size: 50px;
  text-align: center;
  margin: auto;
}
.guest_info_box .room_left_btn_box__item.flex-1 {
  width: auto;
  height: 150px;
  line-height: 58px;
  border-radius: 10px;
  font-size: 40px;
  text-align: center;
  font-family: Microsoft Yahei;
  margin-right: 20px;
  font-weight: bold;
}
/* .guest_info_box .room_left_btn_box__item:last-child {
  margin-right: 0;
} */
.guest_info_box .room_left_btn_box__item.yellow {
  color: rgba(255,255,255,1);
  background-color: rgba(233,157,66,1);
}
.guest_info_box .room_left_btn_box__item.gray {
  background-color: rgba(206,206,206,1);
  color: rgba(79,79,79,1);
}
.guest_info_box .room_left_btn_box__item.green {
  background-color: rgba(47,174,206,1);
  color: rgba(255,255,255,1);
}
.guest_info_box .room_left_btn_box__item.b-green {
  background-color: rgba(79,167,114,1);
  color: rgba(255,255,255,1);
}
.guest_info_box .room_content {
  margin-top: 30px;
}
.guest_info_box .room_content .tip {
  line-height: 33px;
  color: rgba(79,79,79,1);
  font-size: 24px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.guest_info_box .room_content .name {
  line-height: 168px;
  color: rgba(51,51,51,1);
  font-size: 120px;
  text-align: center;
  font-family: PingFangSC-medium;
  margin-top: 13px;
}
.guest_info_box .room_content .name .tx {
  max-width: 666px;
  margin: auto;
  text-align: center;
}
.guest_info_box .room_content .name_icon {
  width: 40px;
  height: 40px;
  display: block;
  margin-top: 13px;
  padding: 20px;
}
.guest_info_box .room_content .name_icon .img {
  width: 100%;
  height: 100%;
}
.guest_info_box .room_content .ciq {
  line-height: 42px;
  color: rgba(51,51,51,1);
  font-size: 30px;
  text-align: center;
  font-family: PingFangSC-regular;
  margin-top: -5px;
}
.guest_info_box .room_content .time {
  line-height: 42px;
  color: rgba(0,0,0,1);
  font-size: 30px;
  text-align: center;
  font-family: PingFangSC-medium;
  font-weight: bold;
  margin-top: 21px;
}
</style>