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