update_202312051941_项目-治疗室屏幕web-切图v1

jazz

2023-12-05 aeb317703c9c82edb7c4c7ecc5985eef62864c7c

 src/pages/room/detail.vue

@@ -1,33 +1,190 @@
<!--room-detail.vue-->
<template>
  <div class="page">
    <div class="page_header flex flex-ver">
    <div class="page_header flex flex-ver" @click="back">
      <div class="left flex flex-ver">
        <img class="page_logo_1" src="../../assets/img/logo_1.png">
        <img class="page_logo_2" src="../../assets/img/logo_2.png">
      </div>
      <div class="right flex-1 flex flex-jcfe flex-ver">
        <div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
        <div class="page_date">
          <div class="page_week">{{timeObj.week}}</div>
          <div class="page_day">{{timeObj.date}}</div>
          <div class="page_week">{{ timeObj.week }}</div>
          <div class="page_day">{{ timeObj.date }}</div>
        </div>
        <div class="page_time">{{timeObj.timeMin}}</div>
        <!-- <div class="page_time">{{timeObj.time}}</div> -->
        <div class="page_time">{{ timeObj.timeMin }}</div>
        <!-- <div class="page_time">{{ timeObj.time }}</div> -->
      </div>
    </div>
    <div>123</div>
    <!-- 未有安排 -->
    <div class="page_container flex flex-ver hide">
      <div class="main flex-1">
        <div class="room_title">VIP-诊疗室-1</div>
        <div class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-使用中-</div>
        <div class="btn_box flex flex-center">
          <div class="flex flex-ver">
            <div class="btn_box__item flex flex-center white" data-tx="空闲">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/free.png">
                <div class="tx">空闲</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center blue" data-tx="使用中">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/using.png">
                <div class="tx white">使用中</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center yellow" data-tx="客人休息">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/rest.png">
                <div class="tx">客人休息</div>
              </div>
            </div>
            <div class="btn_box__item flex flex-center gray" data-tx="通知打扫">
              <div class="flex flex-ver">
                <img class="icon" src="../../assets/img/clear.png">
                <div class="tx">通知打扫</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 没有默认客人和有安排 -->
    <div class="page_container flex flex-ver hide">
      <div class="main flex-1">
        <div class="room_title">VIP-诊疗室-1</div>
        <div class="room_main_tip">-使用中-</div>
        <div class="room_left_btn_box flex flex-ver">
          <div class="room_left_btn_box__item flex-1 flex flex-center yellow">客人休息</div>
          <div class="room_left_btn_box__item flex-1 flex flex-center gray">通知打扫</div>
          <!-- <div class="room_left_btn_box__item flex flex-center green">通知打扫</div> -->
          <!-- <div class="room_left_btn_box__item flex flex-center green">结束打扫</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 class="guest_list">
              <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer">
                <div class="guest_list__td flex flex-center">
                  <div>
                    <div class="tx">张*民</div>
                    <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
                  </div>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">15:00开始</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">张怀民(医生)、张怀民(护士)</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <img class="icon" src="../../assets/img/choose.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 默认客人和有安排 -->
    <div class="page_container flex flex-ver">
      <div class="main flex-1">
        <div class="room_title">VIP-诊疗室-1</div>
        <div class="room_content">
          <div class="tip">诊疗安排</div>
          <div class="name">张怀民</div>
          <div class="ciq">(2300000000)</div>
          <div class="time">安排治疗时间：13:30 开始</div>
        </div>
        <div class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
          <div class="room_left_btn_box__item flex flex-center green btn_ani">开始治疗</div>
          <!-- <div class="room_left_btn_box__item flex-1 flex flex-center yellow">客人休息</div>
          <div class="room_left_btn_box__item flex-1 flex flex-center gray">通知打扫</div> -->
          <!-- <div class="room_left_btn_box__item flex flex-center green">通知打扫</div> -->
          <!-- <div class="room_left_btn_box__item flex flex-center green">结束打扫</div> -->
        </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">张怀民</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">张医生</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">张护士</div>
              </div>
            </div>
          </div>
          <div class="room_info_project">
            <div class="room_info_project_block">
              <div class="tx">phis-Fotona 超V光、phis-补水嫩肤(F)涂抹</div>
            </div>
          </div>
        </div>
        <div class="guest_box flex flex-col">
          <div class="guest_title flex flex-center">等待诊疗</div>
          <div class="guest_block flex-1">
            <div class="guest_list">
              <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer">
                <div class="guest_list__td flex flex-center">
                  <div>
                    <div class="tx">张*民</div>
                    <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
                  </div>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">15:00开始</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <span class="tx">张怀民(医生)、张怀民(护士)</span>
                </div>
                <div class="guest_list__td flex flex-center">
                  <img class="icon" src="../../assets/img/choose.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择客人弹窗 -->
    <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
    <!-- 更改房间状态窗 -->
    <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
  </div>
</template>

<script>
// import Login from '../utils/jun_login.js'

// 选择客人弹窗
import XioCustomerSelect from '@/components/xio_customer_select'
// 更改房间状态窗
import XioRoomStatusChg from '@/components/xio_room_status_chg'
export default {
  name: 'RoomDetail',
  components: {},
  components: {
    XioCustomerSelect,
    XioRoomStatusChg
  },
  inject: ['noop'],
  data() {
    return {
      list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
      timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
    }
  },
@@ -43,11 +200,320 @@
  },
  methods: {
    init() {
      this.countGetTime(this, 'timeObj')
      this.countGetTime(this, 'timeObj', 'detail')
    },
    // 返回
    back() {
      this.stopCountGetTime('detail')
      this.stopPollingAjaxFn('detail')
      this.$router.go(-1)
    },
    // 重置状态
    resetStatus() {
      // 打开弹窗
      this.$refs['XioRoomStatusChg'].showDialog()
    },
    // 更改房间状态
    changeStatus(opt) {
      console.log(opt.statusTx)
      // 关闭弹窗
      this.$refs['XioRoomStatusChg'].hideDialog()
    },
    // 选择客户
    selectCustomer(item = {}) {
      // 打开弹窗
      this.$refs['XioCustomerSelect'].showDialog()
      this.$refs['XioCustomerSelect'].dataInit(item)
    },
    // 选择客户取消
    selectCustomerCancel(opt) {
      console.log('cancel', opt)
      this.$refs['XioCustomerSelect'].hideDialog()
    },
    // 选择客户确定
    selectCustomerSubmit(opt) {
      console.log('submit', opt)
      this.$refs['XioCustomerSelect'].hideDialog()
    }
  }
}
</script>

<style scoped>
</style>
.page_header .reset_btn {
  width: 200px;
  height: 60px;
  line-height: 35px;
  border-radius: 5px;
  background-color: rgba(47,174,206,1);
  color: rgba(255,255,255,1);
  font-size: 24px;
  text-align: center;
  font-family: Microsoft Yahei;
}
.page_container .main {
  height: 100%;
  border-radius: 10px;
  background-color: rgba(255,255,255,1);
  color: rgba(16,16,16,1);
  font-size: 14px;
  /* text-align: center; */
  font-family: Roboto;
}
.page_container .main .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: 39px auto 0 auto;
}
.page_container .main .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; */
}
.page_container .main .room_main_tip.gray {
  color: rgba(154,154,154,1);
}
.page_container .main .btn_box {
  margin-top: 130px;
}
.page_container .main .btn_box__item {
  width: 250px;
  height: 120px;
  border-radius: 10px;
  box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
  margin-right: 70px;
}
.page_container .main .btn_box__item:last-child {
  margin-right: 0;
}
.page_container .main .btn_box__item.white {
  background-color: rgba(255,255,255,1);
}
.page_container .main .btn_box__item.blue {
  background-color: rgba(46,77,124,1);
}
.page_container .main .btn_box__item.yellow {
  background-color: rgba(255,199,115,1);
}
.page_container .main .btn_box__item.gray {
  background-color: rgba(206,206,206,1);
}
.page_container .main .btn_box__item .icon {
  width: 60px;
  height: 60px;
  display: block;
  margin-right: 17px;
}
.page_container .main .btn_box__item .tx {
  line-height: 37px;
  color: rgba(51,51,51,1);
  font-size: 26px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.page_container .main .btn_box__item .tx.white {
  color: rgba(255,255,255,1);
}
.page_container .main .room_left_btn_box {
  padding: 0 23px;
  margin-top: 163px;
}
.page_container .main .room_left_btn_box__item {
  height: 150px;
  line-height: 58px;
  border-radius: 10px;
  font-size: 40px;
  text-align: center;
  font-family: Microsoft Yahei;
  margin-right: 20px;
  font-weight: bold;
}
.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);
}
.page_container .main .room_left_btn_box__item.gray {
  background-color: rgba(206,206,206,1);
  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_content {
  margin-top: 30px;
}
.page_container .main .room_content .tip {
  line-height: 33px;
  color: rgba(79,79,79,1);
  font-size: 24px;
  text-align: center;
  font-family: PingFangSC-medium;
}
.page_container .main .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;
}
.page_container .main .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;
}
.page_container .main .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;
}
.page_container .right {
  width: 686px;
  margin-left: 30px;
  height: 100%;
}
.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 {
  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__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;
}
.page_container .right .guest_list__td .icon {
  width: 20px;
  height: 20px;
  display: block;
}
.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;
}
</style>