<!--room-detail.vue-->
|
<template>
|
<div class="page flex flex-col">
|
<div class="page_header flex flex-ver">
|
<div class="left flex flex-ver" @click="back">
|
<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">
|
<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>
|
<div class="page_day">{{ timeObj.date }}</div>
|
</div>
|
<div class="page_time">{{ timeObj.timeMin }}</div>
|
<!-- <div class="page_time">{{ timeObj.time }}</div> -->
|
</div>
|
</div>
|
<!-- 未有安排 -->
|
<div v-if="!occupyInfoView && (!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>
|
<div class="btn_box flex flex-center">
|
<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">
|
<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">
|
<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">
|
<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">
|
<div class="icon">
|
<img class="img" src="static/imgs/clear.png">
|
</div>
|
<div class="tx">通知打扫</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 没有客人和有安排 -->
|
<div v-if="!occupyInfoView && (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-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" style="border-radius: 0 0 10px 10px;">
|
<div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
|
<div v-for="(item, index) in assignTreatListView" :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 v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
|
<!-- <div class="icon">
|
<img class="img" src="static/imgs/choose.png">
|
</div> -->
|
</div>
|
</div>
|
</div>
|
<div v-if="!assignTreatListView || !assignTreatListView.length" class="guest_list">
|
<div class="guest_list__row flex flex-center rowtip">暂无数据</div>
|
</div>
|
</div>
|
</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> 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="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
|
<div v-show="roomInfo.status == 0" class="room_left_btn_box__item flex flex-1 flex-center b-green btn_ani" @click="setStatus('敷麻中', 4)">开始敷麻</div>
|
<div v-show="roomInfo.status == 0" class="room_left_btn_box__item flex flex-1 flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
|
<div v-show="roomInfo.status == 4" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
|
<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 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>
|
<div class="guest_box flex flex-col" style="border-radius: 10px;">
|
<div class="guest_title flex flex-center">等待诊疗</div>
|
<div class="guest_block flex-1">
|
<div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
|
<div v-for="(item, index) in assignTreatListView" :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 v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
|
<!-- <div class="icon">
|
<img class="img" src="static/imgs/choose.png">
|
</div> -->
|
</div>
|
</div>
|
</div>
|
<div v-if="!assignTreatListView || !assignTreatListView.length" class="guest_list">
|
<div class="guest_list__row flex flex-center rowtip">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 选择客人弹窗 -->
|
<XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
|
<!-- 更改房间状态窗 -->
|
<XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
|
<!-- MIC通知卸麻 -->
|
<XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" />
|
</div>
|
</template>
|
|
<script>
|
// 空闲 0
|
// 使用中 1
|
// 客人休息 2
|
// 待打扫/通知打扫 3
|
// import Login from '../utils/jun_login.js'
|
// 选择客人弹窗
|
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// 已使用默认客人后房间是否有改变状态
|
var offNarcosisIds = [] // 是否已通知卸麻id数组
|
var isOffNarcosisShow = false // 是否显示已通知卸麻弹窗
|
export default {
|
name: 'RoomDetail',
|
components: {
|
XioCustomerSelect,
|
XioRoomStatusChg,
|
XioRoomOffNarcosisNotice
|
},
|
inject: ['noop'],
|
data() {
|
return {
|
id: this.$route.query.id || '',
|
roomInfo: {},
|
occupyInfo: '', // 当前占用人的信息
|
assignTreatList: [],
|
statusTx: ['空闲', '使用中', '客人休息', '打扫中', '敷麻中'],
|
timeObj: {}, // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
|
curTreatId: '',
|
isShowAppellationName: true // 是否显示称谓
|
}
|
},
|
computed: {
|
occupyInfoView() {
|
console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
|
// 有当前选中的，根据需求修改增加选中不更改状态，由空闲开始
|
if (this.curTreatId) {
|
return this.gatCurTreatInfo()
|
} else {
|
// 有占用
|
if (this.occupyInfo) {
|
return this.occupyInfo
|
// 没有占用
|
} else {
|
// 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
|
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) => {
|
o.act = false
|
if (this.occupyInfoView && this.occupyInfoView.id === o.id) {
|
o.act = true
|
}
|
})
|
return this.assignTreatList
|
} else {
|
return []
|
}
|
}
|
},
|
activated() {
|
console.log('roomDetail mounted')
|
// 记录当前的治疗ID
|
var curTreatId = localStorage.getItem('curTreatId')
|
var localOffNarcosisIds = localStorage.getItem('offNarcosisIds')
|
var localIsOffNarcosisShow = localStorage.getItem('isOffNarcosisShow')
|
// 获取是否已通知卸麻数组
|
if (localOffNarcosisIds) {
|
offNarcosisIds = JSON.parse(localOffNarcosisIds)
|
} else {
|
offNarcosisIds = []
|
this.setLocalStorageOffNarcosisIds()
|
}
|
if (localIsOffNarcosisShow) {
|
isOffNarcosisShow = localIsOffNarcosisShow
|
}
|
this.curTreatId = curTreatId || ''
|
this.id = this.$route.query.id || ''
|
this.init()
|
},
|
mounted() {},
|
destroyed() {
|
|
},
|
methods: {
|
init() {
|
// 进入页面先初始化常量标识
|
isUseDefault = false
|
isUseDefaultChg = 0
|
// 计时
|
this.countGetTime(this, 'timeObj', 'detail')
|
// 轮询getData，8秒一次
|
this.pollingAjaxFn(this, 'getData', 'detail', 8000)
|
// this.getData()
|
},
|
// 设置已通知卸麻id数组
|
setLocalStorageOffNarcosisIds() {
|
localStorage.setItem('offNarcosisIds', JSON.stringify(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()
|
}
|
isOffNarcosisShow = true
|
localStorage.setItem('isOffNarcosisShow', true)
|
},
|
// 显示通知卸麻弹窗
|
showOffNarcosisNotice() {
|
// 打开弹窗
|
this.$refs['XioRoomOffNarcosisNotice'].showDialog()
|
},
|
// 点击显示隐藏称谓
|
tapAppellationHandle() {
|
this.isShowAppellationName = !this.isShowAppellationName
|
},
|
// 获取当前治疗信息
|
gatCurTreatInfo() {
|
if (this.assignTreatList && this.assignTreatList.length) {
|
return this.assignTreatList.find((o) => { return o.id === this.curTreatId })
|
}
|
},
|
// 刷新浏览器页面
|
resetPage() {
|
window.location.reload()
|
},
|
// 获取房间详情
|
getData() {
|
var params = {}
|
// 房间id
|
if (this.id) {
|
params.shopRoomId = this.id
|
}
|
Req.http.post({
|
url: 'guide/treat/screen/room/info',
|
data: params,
|
udData: { noLoading: true },
|
header: { 'Content-Type': 'application/json' },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
roomInfo: {
|
roomNo: 'xx',
|
status: 0 // 0空闲 1使用 2休息 3打扫 4 敷麻中
|
},
|
assignTreatList: [{
|
startTime: '2023-12-08 00:00:00'
|
}],
|
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] : '女士'}`
|
})
|
}
|
// 已占用用户数据处理
|
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] : '女士'}`
|
}
|
// 已有占用的，更改已使用默认客人的状态
|
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(':')
|
res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
|
}
|
for (const key in res.data) {
|
this[key] = res.data[key]
|
}
|
}
|
// console.log('999999999999999999999999999', res)
|
var offNarcosisTimer = null
|
offNarcosisTimer = setTimeout(() => {
|
console.log('================================>', this.occupyInfoView, 'offNarcosisIds:', offNarcosisIds, 'isOffNarcosisShow:', isOffNarcosisShow)
|
if (this.occupyInfoView && this.occupyInfoView.hempStatus === 2 && this.occupyInfoView.userId) {
|
var flag
|
offNarcosisIds && offNarcosisIds.length && (flag = offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId }))
|
// flag = isOffNarcosisShow
|
if (!flag) {
|
this.showOffNarcosisNotice()
|
}
|
}
|
clearTimeout(offNarcosisTimer)
|
offNarcosisTimer = null
|
}, 500)
|
})
|
},
|
// 返回
|
back() {
|
// 重置默认已使用客人的参数
|
isUseDefault = false
|
isUseDefaultChg = 0
|
// 关闭计时
|
this.stopCountGetTime('detail')
|
// 关闭轮询
|
this.stopPollingAjaxFn('detail')
|
// 返回
|
// console.log('111111111', this.$route.meta.isPush)
|
if (this.$route && this.$route.meta && this.$route.meta.isPush) {
|
this.$router.go(-1)
|
} else {
|
this.$router.push({
|
path: `/`
|
})
|
}
|
},
|
// 未有安排直接状态变更
|
statusChg(e) {
|
var { tx, status } = e.currentTarget.dataset
|
var { occupyInfoView, roomInfo } = this
|
console.log(tx, status)
|
// if (roomInfo && status * 1 == roomInfo.status) {
|
// return
|
// }
|
this.changeStatusFn(occupyInfoView, status, () => {
|
this.getData()
|
})
|
},
|
// 按流程设置房间状态
|
setStatus(tx, status) {
|
var { occupyInfoView, roomInfo } = this
|
console.log(tx, status)
|
this.changeStatusFn(occupyInfoView, status, () => {
|
// 刷新详情
|
this.getData()
|
})
|
},
|
// 改变房间状态异步方法
|
changeStatusFn(item = {}, status, cb) {
|
var params = {}
|
// 更改的状态
|
params.status = status * 1
|
// 房间id
|
if (this.id) {
|
params.shopRoomId = this.id
|
}
|
// 治疗记录id
|
if (item && item.id) {
|
params.treatRecordId = item.id
|
}
|
Req.http.post({
|
url: 'guide/treat/screen/room/status/update',
|
data: params,
|
header: { 'Content-Type': 'application/json' },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}).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
|
}
|
// console.log('8888888888888888888888888888888888', res)
|
cb && cb()
|
})
|
},
|
// 重置状态
|
resetStatus() {
|
// 打开弹窗
|
this.$refs['XioRoomStatusChg'].showDialog()
|
},
|
// 更改房间状态（重置状态的更改方法）
|
changeStatus(opt) {
|
var { occupyInfoView, roomInfo } = this
|
console.log(opt.statusTx, opt.status)
|
// if (roomInfo && opt.status * 1 == roomInfo.status) {
|
// return
|
// }
|
// 清除选中医疗记录id
|
localStorage.removeItem('curTreatId')
|
this.curTreatId = ''
|
this.changeStatusFn({}, opt.status, () => {
|
// 刷新详情
|
this.getData()
|
// 关闭弹窗
|
this.$refs['XioRoomStatusChg'].hideDialog()
|
})
|
},
|
// 选择客户
|
selectCustomer(item = {}) {
|
if (item.act) {
|
return
|
}
|
// 打开弹窗
|
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)
|
// 确定选择的用户，记录id
|
localStorage.setItem('curTreatId', opt.id)
|
this.curTreatId = opt.id
|
// 重置房间状态
|
if (this.roomInfo && this.roomInfo.status) {
|
this.changeStatusFn({}, 0, () => {
|
// 刷新详情
|
this.getData()
|
})
|
}
|
// 关闭弹窗
|
this.$refs['XioCustomerSelect'].hideDialog()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.el-popper.top_tx {
|
text-align: center;
|
font-size: 25px;
|
}
|
</style>
|
|
<style scoped>
|
.page{
|
overflow: auto;
|
}
|
.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;
|
cursor: pointer;
|
border: 0;
|
margin-left: 20px;
|
}
|
.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;
|
cursor: pointer;
|
}
|
.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 .icon .img {
|
width: 100%;
|
height: 100%;
|
}
|
.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 {
|
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;
|
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 {
|
background-color: rgba(47,174,206,1);
|
color: rgba(255,255,255,1);
|
}
|
.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;
|
}
|
.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 .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;
|
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 {
|
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 {
|
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;
|
}
|
</style>
|
