~chenshaoxiong/treatment_room_screen.git

jazz

2023-12-13 d3f0ff6001c34c9ac37e9e776f090f5a696a1361

提交 \| 用户 \| age
3ac5f2	1	<!--room-detail.vue-->
J	2	<template>
878885	3	<div class="page flex flex-col">
6da3c1	4	<div class="page_header flex flex-ver">
J	5	<div class="left flex flex-ver" @click="back">
878885	6	<div class="page_logo_1">
J	7	<img class="img" src="static/imgs/logo_1.png">
	8	</div>
	9	<div class="page_logo_2">
	10	<img class="img" src="static/imgs/logo_2.png">
	11	</div>
3ac5f2	12	</div>
J	13	<div class="right flex-1 flex flex-jcfe flex-ver">
1d1095	14	<el-button type="primary" icon="el-icon-refresh" class="reset_btn flex flex-center" size="small" style="width: 100px;" @click="resetPage">刷新</el-button>
aeb317	15	<div class="reset_btn flex flex-center" @click="resetStatus">重置房间状态</div>
3ac5f2	16	<div class="page_date">
bb2b08	17	<div class="page_week">{{ timeObj.week }}</div>
J	18	<div class="page_day">{{ timeObj.date }}</div>
3ac5f2	19	</div>
bb2b08	20	<div class="page_time">{{ timeObj.timeMin }}</div>
J	21	<!-- <div class="page_time">{{ timeObj.time }}</div> -->
3ac5f2	22	</div>
J	23	</div>
bb2b08	24	<!-- 未有安排 -->
34cb2b	25	<div v-if="!occupyInfoView && (!assignTreatListView \|\| !assignTreatListView.length)" class="page_container flex flex-1">
bb2b08	26	<div class="main flex-1">
6da3c1	27	<div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
J	28	<div v-if="roomInfo" class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-{{ statusTx[roomInfo.status] }}-</div>
bb2b08	29	<div class="btn_box flex flex-center">
J	30	<div class="flex flex-ver">
6da3c1	31	<div class="btn_box__item flex flex-center white" data-tx="空闲" data-status="0" @click="statusChg">
bb2b08	32	<div class="flex flex-ver">
878885	33	<div class="icon">
J	34	<img class="img" src="static/imgs/free.png">
	35	</div>
bb2b08	36	<div class="tx">空闲</div>
J	37	</div>
	38	</div>
6da3c1	39	<div class="btn_box__item flex flex-center blue" data-tx="使用中" data-status="1" @click="statusChg">
bb2b08	40	<div class="flex flex-ver">
878885	41	<div class="icon">
J	42	<img class="img" src="static/imgs/using.png">
	43	</div>
bb2b08	44	<div class="tx white">使用中</div>
J	45	</div>
	46	</div>
6da3c1	47	<div class="btn_box__item flex flex-center yellow" data-tx="客人休息" data-status="2" @click="statusChg">
bb2b08	48	<div class="flex flex-ver">
878885	49	<div class="icon">
J	50	<img class="img" src="static/imgs/rest.png">
	51	</div>
bb2b08	52	<div class="tx">客人休息</div>
J	53	</div>
	54	</div>
6da3c1	55	<div class="btn_box__item flex flex-center gray" data-tx="通知打扫" data-status="3" @click="statusChg">
bb2b08	56	<div class="flex flex-ver">
878885	57	<div class="icon">
J	58	<img class="img" src="static/imgs/clear.png">
	59	</div>
bb2b08	60	<div class="tx">通知打扫</div>
J	61	</div>
	62	</div>
	63	</div>
	64	</div>
	65	</div>
	66	</div>
6da3c1	67	<!-- 没有客人和有安排 -->
34cb2b	68	<div v-if="!occupyInfoView && (assignTreatListView && assignTreatListView.length)" class="page_container flex flex-1">
bb2b08	69	<div class="main flex-1">
6da3c1	70	<div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
J	71	<div v-if="roomInfo" class="room_main_tip">-{{ statusTx[roomInfo.status] }}-</div>
1d1095	72	<div v-show="roomInfo && roomInfo.status >= 1" class="room_left_btn_box flex flex-ver">
J	73	<div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2)">客人休息</div>
	74	<div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
	75	<div v-show="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
	76	<div v-show="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0)">结束打扫</div>
bb2b08	77	</div>
J	78	</div>
	79	<div class="right">
	80	<div class="right_block flex flex-col">
	81	<div class="guest_title flex flex-center">等待诊疗</div>
34cb2b	82	<div class="guest_block flex-1" style="border-radius: 0 0 10px 10px;">
J	83	<div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
	84	<div v-for="(item, index) in assignTreatListView" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
cf3e3e	85	<div class="guest_list__td">
J	86	<div class="tx flex flex-ver">
	87	<div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
bb2b08	88	</div>
cf3e3e	89	<div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq \|\| '' }}</div>
bb2b08	90	</div>
J	91	<div class="guest_list__td flex flex-center">
6da3c1	92	<span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
bb2b08	93	</div>
J	94	<div class="guest_list__td flex flex-center">
cf3e3e	95	<span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
bb2b08	96	</div>
J	97	<div class="guest_list__td flex flex-center">
34cb2b	98	<div v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
bf4dca	99	<!-- <div class="icon">
878885	100	<img class="img" src="static/imgs/choose.png">
bf4dca	101	</div> -->
bb2b08	102	</div>
J	103	</div>
bf4dca	104	</div>
34cb2b	105	<div v-if="!assignTreatListView \|\| !assignTreatListView.length" class="guest_list">
bf4dca	106	<div class="guest_list__row flex flex-center rowtip">暂无数据</div>
bb2b08	107	</div>
J	108	</div>
	109	</div>
	110	</div>
	111	</div>
6da3c1	112	<!-- 客人和有安排 -->
bf4dca	113	<div v-if="occupyInfoView" class="page_container flex flex-1">
bb2b08	114	<div class="main flex-1">
6da3c1	115	<div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div>
bb2b08	116	<div class="room_content">
J	117	<div class="tip">诊疗安排</div>
cf3e3e	118	<!-- <div class="name">{{ occupyInfoView.userName }}</div> -->
J	119	<div class="name">
	120	<el-popover
	121	placement="top"
	122	width="400"
	123	popper-class="top_tx"
	124	trigger="click"
	125	:popper-options="{ removeOnDestroy: true }"
	126	>
	127	<div>{{ occupyInfoView.userName }}</div>
	128	<div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div>
	129	</el-popover>
	130	</div>
6da3c1	131	<div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div>
J	132	<div v-if="occupyInfoView.startTime" class="time">安排治疗时间：{{ occupyInfoView.startTime }} 开始</div>
bb2b08	133	</div>
1d1095	134	<div v-show="roomInfo" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
J	135	<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>
	136	<div v-show="roomInfo.status == 0" class="room_left_btn_box__item flex flex-1 flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
	137	<div v-show="roomInfo.status == 4" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('使用中', 1)">开始治疗</div>
	138	<div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('客人休息', 2)">客人休息</div>
	139	<div v-show="roomInfo.status == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
	140	<div v-show="roomInfo.status == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('打扫中', 3)">通知打扫</div>
	141	<div v-show="roomInfo.status == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('空闲', 0)">结束打扫</div>
bb2b08	142	</div>
J	143	</div>
	144	<div class="right flex flex-col">
	145	<div class="room_info flex-1">
	146	<div class="staff_box flex flex-ver flex-sb">
	147	<div class="staff_box_item flex-1 flex flex-center">
	148	<div>
	149	<div class="staff_box_item__title">分诊顾问</div>
6da3c1	150	<div class="staff_box_item__name">{{ occupyInfoView.adviserName \|\| '' }}</div>
bb2b08	151	</div>
J	152	</div>
	153	<div class="staff_box_item flex-1 flex flex-center">
	154	<div>
	155	<div class="staff_box_item__title">执行医生</div>
6da3c1	156	<div class="staff_box_item__name">{{ occupyInfoView.aDoctorName \|\| '' }}</div>
bb2b08	157	</div>
J	158	</div>
	159	<div class="staff_box_item flex-1 flex flex-center">
	160	<div>
	161	<div class="staff_box_item__title">执行护士</div>
6da3c1	162	<div class="staff_box_item__name">{{ occupyInfoView.aNurseName \|\| '' }}</div>
bb2b08	163	</div>
J	164	</div>
	165	</div>
	166	<div class="room_info_project">
	167	<div class="room_info_project_block">
6da3c1	168	<div class="tx">{{ occupyInfoView.projectName \|\| '' }}</div>
bb2b08	169	</div>
J	170	</div>
	171	</div>
34cb2b	172	<div class="guest_box flex flex-col" style="border-radius: 10px;">
bb2b08	173	<div class="guest_title flex flex-center">等待诊疗</div>
J	174	<div class="guest_block flex-1">
34cb2b	175	<div v-if="assignTreatListView && assignTreatListView.length" class="guest_list">
J	176	<div v-for="(item, index) in assignTreatListView" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer(item)">
cf3e3e	177	<div class="guest_list__td">
J	178	<div class="tx flex flex-ver">
	179	<div class="flex-1 flex-1-w1 ell">{{ item.userName }}</div>
bb2b08	180	</div>
cf3e3e	181	<div class="tx" style="font-size: 14px;line-height: 20px;">{{ item.ciq \|\| '' }}</div>
bb2b08	182	</div>
J	183	<div class="guest_list__td flex flex-center">
6da3c1	184	<span class="tx">{{ item.startTime?item.startTime+'开始':'' }}</span>
bb2b08	185	</div>
J	186	<div class="guest_list__td flex flex-center">
cf3e3e	187	<span class="tx flex-1 flex-1-w1 ell">{{ item.aDoctorName?item.aDoctorName+'(医生)、':'' }}{{ item.aNurseName?item.aNurseName+'(护士)':'' }}</span>
bb2b08	188	</div>
J	189	<div class="guest_list__td flex flex-center">
34cb2b	190	<div v-if="!item.act" class="tx" style="text-decoration: underline;color: #227beb;">切换</div>
bf4dca	191	<!-- <div class="icon">
878885	192	<img class="img" src="static/imgs/choose.png">
bf4dca	193	</div> -->
bb2b08	194	</div>
J	195	</div>
bf4dca	196	</div>
34cb2b	197	<div v-if="!assignTreatListView \|\| !assignTreatListView.length" class="guest_list">
bf4dca	198	<div class="guest_list__row flex flex-center rowtip">暂无数据</div>
bb2b08	199	</div>
J	200	</div>
	201	</div>
	202	</div>
	203	</div>
aeb317	204	<!-- 选择客人弹窗 -->
J	205	<XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
	206	<!-- 更改房间状态窗 -->
	207	<XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
3ac5f2	208	</div>
J	209	</template>
	210
	211	<script>
6da3c1	212	// 空闲 0
J	213	// 使用中 1
	214	// 客人休息 2
	215	// 待打扫/通知打扫 3
3ac5f2	216	// import Login from '../utils/jun_login.js'
aeb317	217	// 选择客人弹窗
bb2b08	218	import XioCustomerSelect from '@/components/xio_customer_select'
aeb317	219	// 更改房间状态窗
J	220	import XioRoomStatusChg from '@/components/xio_room_status_chg'
6da3c1	221	import Req from '../../utils/jun_httpInstall' // http 请求
1d1095	222	// import xioFn from './utils/xio_fn.js'
6da3c1	223	var isUseDefault = false // 是否已使用默认客人
878885	224	var isUseDefaultChg = 0// 已使用默认客人后房间是否有改变状态
3ac5f2	225	export default {
J	226	name: 'RoomDetail',
bb2b08	227	components: {
aeb317	228	XioCustomerSelect,
J	229	XioRoomStatusChg
bb2b08	230	},
3ac5f2	231	inject: ['noop'],
J	232	data() {
	233	return {
6da3c1	234	id: this.$route.query.id \|\| '',
J	235	roomInfo: {},
	236	occupyInfo: '', // 当前占用人的信息
	237	assignTreatList: [],
1d1095	238	statusTx: ['空闲', '使用中', '客人休息', '打扫中', '敷麻中'],
34cb2b	239	timeObj: {}, // week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
J	240	curTreatId: ''
3ac5f2	241	}
J	242	},
	243	computed: {
6da3c1	244	occupyInfoView() {
34cb2b	245	console.log('00000000000000000000000', this.occupyInfo, isUseDefault, isUseDefaultChg)
J	246	// 有当前选中的，根据需求修改增加选中不更改状态，由空闲开始
	247	if (this.curTreatId) {
	248	return this.gatCurTreatInfo()
6da3c1	249	} else {
34cb2b	250	// 有占用
J	251	if (this.occupyInfo) {
	252	return this.occupyInfo
	253	// 没有占用
6da3c1	254	} else {
34cb2b	255	// 还没使用默认客人值或者已使用默认客人值还没改变状态（适配轮询）
J	256	if ((!isUseDefault \|\| (isUseDefault && isUseDefaultChg === 0)) && this.assignTreatList && this.assignTreatList.length) {
	257	isUseDefault = true
	258	return this.assignTreatList[0]
	259	// 已使用过默认客人值
	260	} else {
	261	return ''
	262	}
6da3c1	263	}
34cb2b	264	}
J	265	},
	266	assignTreatListView() {
	267	if (this.assignTreatList && this.assignTreatList.length) {
	268	this.assignTreatList.forEach((o) => {
	269	o.act = false
	270	if (this.occupyInfoView && this.occupyInfoView.id === o.id) {
	271	o.act = true
	272	}
	273	})
	274	return this.assignTreatList
	275	} else {
	276	return []
6da3c1	277	}
J	278	}
3ac5f2	279	},
bf4dca	280	activated() {
3ac5f2	281	console.log('roomDetail mounted')
34cb2b	282	// 记录当前的治疗ID
J	283	var curTreatId = localStorage.getItem('curTreatId')
	284	this.curTreatId = curTreatId \|\| ''
bf4dca	285	this.id = this.$route.query.id \|\| ''
3ac5f2	286	this.init()
J	287	},
bf4dca	288	mounted() {},
3ac5f2	289	destroyed() {
J	290
	291	},
	292	methods: {
	293	init() {
bf4dca	294	// 进入页面先初始化常量标识
J	295	isUseDefault = false
	296	isUseDefaultChg = 0
6da3c1	297	// 计时
bb2b08	298	this.countGetTime(this, 'timeObj', 'detail')
6da3c1	299	// 轮询getData，8秒一次
878885	300	this.pollingAjaxFn(this, 'getData', 'detail', 8000)
J	301	// this.getData()
34cb2b	302	},
J	303	// 获取当前治疗信息
	304	gatCurTreatInfo() {
	305	if (this.assignTreatList && this.assignTreatList.length) {
1d1095	306	return this.assignTreatList.find((o) => { return o.id === this.curTreatId })
34cb2b	307	}
1d1095	308	},
J	309	// 刷新浏览器页面
	310	resetPage() {
	311	window.location.reload()
6da3c1	312	},
J	313	// 获取房间详情
	314	getData() {
	315	var params = {}
	316	// 房间id
	317	if (this.id) {
	318	params.shopRoomId = this.id
	319	}
	320	Req.http.post({
878885	321	url: 'guide/treat/screen/room/info',
6da3c1	322	data: params,
J	323	udData: { noLoading: true },
	324	header: { 'Content-Type': 'application/json' },
	325	mockData: {
	326	code: 100,
	327	msg: '',
878885	328	data: {
J	329	roomInfo: {
	330	roomNo: 'xx',
1d1095	331	status: 0 // 0空闲 1使用 2休息 3打扫 4 敷麻中
878885	332	},
J	333	assignTreatList: [{
	334	startTime: '2023-12-08 00:00:00'
	335	}],
	336	occupyInfo: null
	337	}
6da3c1	338	}
J	339	}).then((res) => {
	340	if (res && res.data) {
cf3e3e	341	// 治疗时间处理
J	342	if (res.data.assignTreatList && res.data.assignTreatList.length) {
	343	res.data.assignTreatList.forEach((o) => {
	344	var st = (o.startTime).split(' ')[1].split(':')
	345	o.startTime = `${st[0]}:${st[1]}`
	346	})
	347	}
878885	348	// 已有占用的，更改已使用默认客人的状态
J	349	res.data.occupyInfo && (isUseDefaultChg = 1)
	350	res.data.occupyInfo && (isUseDefault = 1)
cf3e3e	351	// 占用信息治疗时间处理
J	352	if (res.data.occupyInfo && res.data.occupyInfo.startTime) {
	353	var ost = (res.data.occupyInfo.startTime).split(' ')[1].split(':')
	354	res.data.occupyInfo.startTime = `${ost[0]}:${ost[1]}`
	355	}
6da3c1	356	for (const key in res.data) {
J	357	this[key] = res.data[key]
	358	}
	359	}
	360	// console.log('999999999999999999999999999', res)
	361	})
aeb317	362	},
J	363	// 返回
	364	back() {
34cb2b	365	// 重置默认已使用客人的参数
cf3e3e	366	isUseDefault = false
878885	367	isUseDefaultChg = 0
6da3c1	368	// 关闭计时
aeb317	369	this.stopCountGetTime('detail')
6da3c1	370	// 关闭轮询
aeb317	371	this.stopPollingAjaxFn('detail')
6da3c1	372	// 返回
bf4dca	373	// console.log('111111111', this.$route.meta.isPush)
J	374	if (this.$route && this.$route.meta && this.$route.meta.isPush) {
	375	this.$router.go(-1)
	376	} else {
	377	this.$router.push({
	378	path: `/`
	379	})
	380	}
6da3c1	381	},
cf3e3e	382	// 未有安排直接状态变更
6da3c1	383	statusChg(e) {
J	384	var { tx, status } = e.currentTarget.dataset
	385	var { occupyInfoView, roomInfo } = this
	386	console.log(tx, status)
	387	// if (roomInfo && status * 1 == roomInfo.status) {
	388	// return
	389	// }
	390	this.changeStatusFn(occupyInfoView, status, () => {
	391	this.getData()
	392	})
	393	},
	394	// 按流程设置房间状态
	395	setStatus(tx, status) {
	396	var { occupyInfoView, roomInfo } = this
	397	console.log(tx, status)
	398	this.changeStatusFn(occupyInfoView, status, () => {
	399	// 刷新详情
	400	this.getData()
	401	})
	402	},
cf3e3e	403	// 改变房间状态异步方法
6da3c1	404	changeStatusFn(item = {}, status, cb) {
J	405	var params = {}
cf3e3e	406	// 更改的状态
J	407	params.status = status * 1
6da3c1	408	// 房间id
J	409	if (this.id) {
	410	params.shopRoomId = this.id
	411	}
	412	// 治疗记录id
	413	if (item && item.id) {
cf3e3e	414	params.treatRecordId = item.id
6da3c1	415	}
J	416	Req.http.post({
878885	417	url: 'guide/treat/screen/room/status/update',
6da3c1	418	data: params,
J	419	header: { 'Content-Type': 'application/json' },
	420	mockData: {
	421	code: 100,
	422	msg: '',
	423	data: {}
	424	}
	425	}).then((res) => {
878885	426	// 在已有默认客人的情况下，改变状态更改标识（适配轮询）
J	427	if (isUseDefault) {
34cb2b	428	console.log('在已有默认客人的情况下，改变状态更改标识')
878885	429	isUseDefaultChg = 1
34cb2b	430	}
J	431	// 当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id
	432	if (item && item.id && item.id === this.curTreatId) {
	433	console.log('当前选中的用户房间更改了状态，已经成为占用时，清除选中医疗记录id')
	434	localStorage.removeItem('curTreatId')
	435	this.curTreatId = ''
	436	}
d73f98	437	// 只要更改为空闲就重置参数
J	438	if (status === 0) {
	439	console.log('更改为空闲')
34cb2b	440	// 重置默认已使用客人的参数
J	441	isUseDefault = false
	442	isUseDefaultChg = 0
878885	443	}
6da3c1	444	// console.log('8888888888888888888888888888888888', res)
J	445	cb && cb()
	446	})
aeb317	447	},
J	448	// 重置状态
	449	resetStatus() {
	450	// 打开弹窗
	451	this.$refs['XioRoomStatusChg'].showDialog()
	452	},
cf3e3e	453	// 更改房间状态（重置状态的更改方法）
aeb317	454	changeStatus(opt) {
6da3c1	455	var { occupyInfoView, roomInfo } = this
J	456	console.log(opt.statusTx, opt.status)
	457	// if (roomInfo && opt.status * 1 == roomInfo.status) {
	458	// return
	459	// }
34cb2b	460	// 清除选中医疗记录id
J	461	localStorage.removeItem('curTreatId')
	462	this.curTreatId = ''
	463	this.changeStatusFn({}, opt.status, () => {
6da3c1	464	// 刷新详情
J	465	this.getData()
	466	// 关闭弹窗
	467	this.$refs['XioRoomStatusChg'].hideDialog()
	468	})
aeb317	469	},
J	470	// 选择客户
	471	selectCustomer(item = {}) {
34cb2b	472	if (item.act) {
J	473	return
	474	}
aeb317	475	// 打开弹窗
J	476	this.$refs['XioCustomerSelect'].showDialog()
6da3c1	477	// 组件客户数据处理
aeb317	478	this.$refs['XioCustomerSelect'].dataInit(item)
J	479	},
	480	// 选择客户取消
	481	selectCustomerCancel(opt) {
	482	console.log('cancel', opt)
	483	this.$refs['XioCustomerSelect'].hideDialog()
	484	},
	485	// 选择客户确定
	486	selectCustomerSubmit(opt) {
	487	console.log('submit', opt)
34cb2b	488	// 确定选择的用户，记录id
J	489	localStorage.setItem('curTreatId', opt.id)
	490	this.curTreatId = opt.id
	491	// 重置房间状态
	492	if (this.roomInfo && this.roomInfo.status) {
	493	this.changeStatusFn({}, 0, () => {
	494	// 刷新详情
	495	this.getData()
	496	})
	497	}
	498	// 关闭弹窗
	499	this.$refs['XioCustomerSelect'].hideDialog()
3ac5f2	500	}
J	501	}
	502	}
	503	</script>
cf3e3e	504
J	505	<style>
	506	.el-popper.top_tx {
	507	text-align: center;
	508	font-size: 25px;
	509	}
	510	</style>
3ac5f2	511
J	512	<style scoped>
878885	513	.page{
J	514	overflow: auto;
	515	}
bb2b08	516	.page_header .reset_btn {
J	517	width: 200px;
	518	height: 60px;
	519	line-height: 35px;
	520	border-radius: 5px;
	521	background-color: rgba(47,174,206,1);
	522	color: rgba(255,255,255,1);
	523	font-size: 24px;
	524	text-align: center;
	525	font-family: Microsoft Yahei;
6da3c1	526	cursor: pointer;
bf4dca	527	border: 0;
J	528	margin-left: 20px;
bb2b08	529	}
J	530	.page_container .main {
878885	531	/* height: 100%; */
bb2b08	532	border-radius: 10px;
J	533	background-color: rgba(255,255,255,1);
	534	color: rgba(16,16,16,1);
	535	font-size: 14px;
	536	/* text-align: center; */
	537	font-family: Roboto;
	538	}
	539	.page_container .main .room_title {
	540	line-height: 50px;
	541	color: rgba(255,255,255,1);
	542	font-size: 36px;
	543	text-align: center;
	544	font-family: PingFangSC-medium;
	545	padding: 10px 0;
	546	background-color: rgba(34,123,235,1);
	547	width: 400px;
	548	margin: 39px auto 0 auto;
	549	}
	550	.page_container .main .room_main_tip {
	551	line-height: 168px;
	552	font-size: 120px;
	553	color: rgba(46,77,124,1);
	554	text-align: center;
	555	font-family: PingFangSC-medium;
	556	margin-top: 107px;
	557	/* font-weight: bold; */
	558	}
	559	.page_container .main .room_main_tip.gray {
	560	color: rgba(154,154,154,1);
	561	}
	562	.page_container .main .btn_box {
	563	margin-top: 130px;
	564	}
	565	.page_container .main .btn_box__item {
	566	width: 250px;
	567	height: 120px;
	568	border-radius: 10px;
	569	box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
	570	margin-right: 70px;
6da3c1	571	cursor: pointer;
bb2b08	572	}
J	573	.page_container .main .btn_box__item:last-child {
	574	margin-right: 0;
	575	}
	576	.page_container .main .btn_box__item.white {
	577	background-color: rgba(255,255,255,1);
	578	}
	579	.page_container .main .btn_box__item.blue {
	580	background-color: rgba(46,77,124,1);
	581	}
	582	.page_container .main .btn_box__item.yellow {
	583	background-color: rgba(255,199,115,1);
	584	}
	585	.page_container .main .btn_box__item.gray {
	586	background-color: rgba(206,206,206,1);
	587	}
	588	.page_container .main .btn_box__item .icon {
	589	width: 60px;
	590	height: 60px;
	591	display: block;
	592	margin-right: 17px;
878885	593	}
J	594	.page_container .main .btn_box__item .icon .img {
	595	width: 100%;
	596	height: 100%;
bb2b08	597	}
J	598	.page_container .main .btn_box__item .tx {
	599	line-height: 37px;
	600	color: rgba(51,51,51,1);
	601	font-size: 26px;
	602	text-align: center;
	603	font-family: PingFangSC-medium;
	604	}
	605	.page_container .main .btn_box__item .tx.white {
	606	color: rgba(255,255,255,1);
	607	}
	608	.page_container .main .room_left_btn_box {
	609	padding: 0 23px;
	610	margin-top: 163px;
	611	}
	612	.page_container .main .room_left_btn_box__item {
1d1095	613	width: 500px;
J	614	height: 150px;
	615	line-height: 73px;
	616	border-radius: 10px;
	617	font-size: 50px;
	618	text-align: center;
	619	margin: auto;
	620	}
	621	.page_container .main .room_left_btn_box__item.flex-1 {
	622	width: auto;
bb2b08	623	height: 150px;
J	624	line-height: 58px;
	625	border-radius: 10px;
	626	font-size: 40px;
	627	text-align: center;
	628	font-family: Microsoft Yahei;
	629	margin-right: 20px;
	630	font-weight: bold;
	631	}
1d1095	632	/* .page_container .main .room_left_btn_box__item:last-child {
bb2b08	633	margin-right: 0;
1d1095	634	} */
bb2b08	635	.page_container .main .room_left_btn_box__item.yellow {
J	636	color: rgba(255,255,255,1);
	637	background-color: rgba(233,157,66,1);
	638	}
	639	.page_container .main .room_left_btn_box__item.gray {
	640	background-color: rgba(206,206,206,1);
	641	color: rgba(79,79,79,1);
	642	}
	643	.page_container .main .room_left_btn_box__item.green {
	644	background-color: rgba(47,174,206,1);
	645	color: rgba(255,255,255,1);
1d1095	646	}
J	647	.page_container .main .room_left_btn_box__item.b-green {
	648	background-color: rgba(79,167,114,1);
	649	color: rgba(255,255,255,1);
bb2b08	650	}
J	651	.page_container .main .room_content {
	652	margin-top: 30px;
	653	}
	654	.page_container .main .room_content .tip {
	655	line-height: 33px;
	656	color: rgba(79,79,79,1);
	657	font-size: 24px;
	658	text-align: center;
	659	font-family: PingFangSC-medium;
	660	}
	661	.page_container .main .room_content .name {
	662	line-height: 168px;
	663	color: rgba(51,51,51,1);
	664	font-size: 120px;
	665	text-align: center;
	666	font-family: PingFangSC-medium;
	667	margin-top: 13px;
	668	}
cf3e3e	669	.page_container .main .room_content .name .tx {
J	670	max-width: 666px;
	671	margin: auto;
	672	}
bb2b08	673	.page_container .main .room_content .ciq {
J	674	line-height: 42px;
	675	color: rgba(51,51,51,1);
	676	font-size: 30px;
	677	text-align: center;
	678	font-family: PingFangSC-regular;
	679	margin-top: -5px;
	680	}
	681	.page_container .main .room_content .time {
	682	line-height: 42px;
	683	color: rgba(0,0,0,1);
	684	font-size: 30px;
	685	text-align: center;
	686	font-family: PingFangSC-medium;
	687	font-weight: bold;
	688	margin-top: 21px;
	689	}
	690	.page_container .right {
	691	width: 686px;
	692	margin-left: 30px;
878885	693	/* height: 100%; */
bb2b08	694	}
J	695	.page_container .right_block {
	696	width: 100%;
	697	height: 100%;
	698	}
	699	.page_container .right .guest_title {
	700	height: 60px;
	701	line-height: 28px;
	702	border-radius: 10px 10px 0px 0px;
	703	background-color: rgba(255,255,255,1);
	704	color: rgba(34,123,235,1);
	705	font-size: 20px;
	706	text-align: center;
	707	font-family: Roboto;
	708	font-weight: bold;
	709	}
	710	.page_container .right .guest_block {
cf3e3e	711	background-color: #fff;
bb2b08	712	overflow: auto;
J	713	}
	714	.page_container .right .guest_list {
	715	background-color: #fff;
	716	padding-bottom: 23px;
	717	}
	718	.page_container .right .guest_list__row {
	719	min-height: 75px;
	720	background-color: rgba(34,123,235,0.1);
	721	}
	722	.page_container .right .guest_list__row:nth-child(2n) {
	723	background-color: #fff;
	724	}
bf4dca	725	.page_container .right .guest_list__row.rowtip {
J	726	background-color: #fff;
	727	line-height: 30px;
	728	color: rgba(0,0,0,.5);
	729	font-size: 22px;
	730	}
bb2b08	731	.page_container .right .guest_list__td {}
J	732	.page_container .right .guest_list__td .tx {
	733	line-height: 30px;
	734	color: rgba(16,16,16,1);
	735	font-size: 22px;
	736	text-align: center;
	737	font-family: PingFangSC-regular;
cf3e3e	738	box-sizing: border-box;
J	739	padding: 0 5px;
bb2b08	740	}
J	741	.page_container .right .guest_list__td .icon {
	742	width: 20px;
	743	height: 20px;
	744	display: block;
	745	}
878885	746	.page_container .right .guest_list__td .icon .img {
J	747	width: 100%;
	748	height: 100%;
	749	}
bb2b08	750	.page_container .right .guest_list__td:nth-child(1) {
J	751	width: 19.54%;
	752	}
	753	.page_container .right .guest_list__td:nth-child(2) {
	754	width: 21.86%;
	755	}
	756	.page_container .right .guest_list__td:nth-child(3) {
	757	width: 46.06%;
	758	}
	759	.page_container .right .guest_list__td:nth-child(4) {
	760	width: 12.54%;
	761	}
	762	.page_container .right .room_info {
	763	width: 100%;
	764	border-radius: 10px;
	765	background-color: rgba(255,255,255,0.3);
	766	}
	767	.page_container .right .room_info .staff_box {
	768	margin-top: 30px;
	769	}
	770	.page_container .right .room_info .staff_box_item {
	771	height: 180px;
	772	}
	773	.page_container .right .room_info .staff_box_item:nth-child(1) {
	774	background-color: rgba(255,255,255,0.1);
	775	}
	776	.page_container .right .room_info .staff_box_item:nth-child(2) {
	777	background-color: rgba(255,255,255,0.3);
	778	margin: 0 10px;
	779	}
	780	.page_container .right .room_info .staff_box_item:nth-child(3) {
	781	background-color: rgba(255,255,255,0.1);
	782	}
	783	.page_container .right .room_info .staff_box_item__title {
	784	line-height: 28px;
	785	color: rgba(255,255,255,1);
	786	font-size: 20px;
	787	text-align: center;
	788	font-family: PingFangSC-regular;
	789	}
	790	.page_container .right .room_info .staff_box_item__name {
	791	line-height: 56px;
	792	color: rgba(255,255,255,1);
	793	font-size: 40px;
	794	text-align: center;
	795	font-family: PingFangSC-medium;
	796	margin-top: 5px;
	797	}
	798	.page_container .right .room_info .room_info_project {
	799	padding: 36px 20px 20px 20px;
	800	height: 138px;
	801	box-sizing: border-box;
	802	overflow: hidden;
	803	}
	804	.page_container .right .room_info .room_info_project_block {
	805	box-sizing: border-box;
	806	width: 100%;
	807	height: 100%;
	808	overflow: auto;
	809	}
	810	.page_container .right .room_info .room_info_project .tx {
	811	line-height: 39px;
	812	color: rgba(255,255,255,1);
	813	font-size: 28px;
	814	text-align: center;
	815	font-family: PingFangSC-regular;
	816	}
	817	.page_container .right .guest_box {
	818	margin-top: 65px;
	819	width: 100%;
	820	height: 345px;
	821	background-color: #fff;
	822	overflow: hidden;
	823	}
	824	</style>