治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazz
2023-12-04 bb2b0836b12254eee6bad1886f3d5606ab58aa6b
提交 | 用户 | age
3ac5f2 1 <!--room-detail.vue-->
J 2 <template>
3   <div class="page">
4     <div class="page_header flex flex-ver">
5       <div class="left flex flex-ver">
6         <img class="page_logo_1" src="../../assets/img/logo_1.png">
7         <img class="page_logo_2" src="../../assets/img/logo_2.png">
8       </div>
9       <div class="right flex-1 flex flex-jcfe flex-ver">
bb2b08 10         <div class="reset_btn flex flex-center">重置房间状态</div>
3ac5f2 11         <div class="page_date">
bb2b08 12           <div class="page_week">{{ timeObj.week }}</div>
J 13           <div class="page_day">{{ timeObj.date }}</div>
3ac5f2 14         </div>
bb2b08 15         <div class="page_time">{{ timeObj.timeMin }}</div>
J 16         <!-- <div class="page_time">{{ timeObj.time }}</div> -->
3ac5f2 17       </div>
J 18     </div>
bb2b08 19     <!-- 未有安排 -->
J 20     <div class="page_container flex flex-ver hide">
21       <div class="main flex-1">
22         <div class="room_title">VIP-诊疗室-1</div>
23         <div class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-使用中-</div>
24         <div class="btn_box flex flex-center">
25           <div class="flex flex-ver">
26             <div class="btn_box__item flex flex-center white" data-tx="空闲">
27               <div class="flex flex-ver">
28                 <img class="icon" src="../../assets/img/free.png">
29                 <div class="tx">空闲</div>
30               </div>
31             </div>
32             <div class="btn_box__item flex flex-center blue" data-tx="使用中">
33               <div class="flex flex-ver">
34                 <img class="icon" src="../../assets/img/using.png">
35                 <div class="tx white">使用中</div>
36               </div>
37             </div>
38             <div class="btn_box__item flex flex-center yellow" data-tx="客人休息">
39               <div class="flex flex-ver">
40                 <img class="icon" src="../../assets/img/rest.png">
41                 <div class="tx">客人休息</div>
42               </div>
43             </div>
44             <div class="btn_box__item flex flex-center gray" data-tx="通知打扫">
45               <div class="flex flex-ver">
46                 <img class="icon" src="../../assets/img/clear.png">
47                 <div class="tx">通知打扫</div>
48               </div>
49             </div>
50           </div>
51         </div>
52       </div>
53     </div>
54     <!-- 没有默认客人和有安排 -->
55     <div class="page_container flex flex-ver hide">
56       <div class="main flex-1">
57         <div class="room_title">VIP-诊疗室-1</div>
58         <div class="room_main_tip">-使用中-</div>
59         <div class="room_left_btn_box flex flex-ver">
60           <div class="room_left_btn_box__item flex-1 flex flex-center yellow">客人休息</div>
61           <div class="room_left_btn_box__item flex-1 flex flex-center gray">通知打扫</div>
62           <!-- <div class="room_left_btn_box__item flex flex-center green">通知打扫</div> -->
63           <!-- <div class="room_left_btn_box__item flex flex-center green">结束打扫</div> -->
64         </div>
65       </div>
66       <div class="right">
67         <div class="right_block flex flex-col">
68           <div class="guest_title flex flex-center">等待诊疗</div>
69           <div class="guest_block flex-1">
70             <div class="guest_list">
71               <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver">
72                 <div class="guest_list__td flex flex-center">
73                   <div>
74                     <div class="tx">张*民</div>
75                     <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
76                   </div>
77                 </div>
78                 <div class="guest_list__td flex flex-center">
79                   <span class="tx">15:00开始</span>
80                 </div>
81                 <div class="guest_list__td flex flex-center">
82                   <span class="tx">张怀民(医生)、张怀民(护士)</span>
83                 </div>
84                 <div class="guest_list__td flex flex-center">
85                   <img class="icon" src="../../assets/img/choose.png">
86                 </div>
87               </div>
88             </div>
89           </div>
90         </div>
91       </div>
92     </div>
93     <!-- 默认客人和有安排 -->
94     <div class="page_container flex flex-ver">
95       <div class="main flex-1">
96         <div class="room_title">VIP-诊疗室-1</div>
97         <div class="room_content">
98           <div class="tip">诊疗安排</div>
99           <div class="name">张怀民</div>
100           <div class="ciq">(2300000000)</div>
101           <div class="time">安排治疗时间：13:30 开始</div>
102         </div>
103         <div class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
104           <div class="room_left_btn_box__item flex flex-center green btn_ani">开始治疗</div>
105           <!-- <div class="room_left_btn_box__item flex-1 flex flex-center yellow">客人休息</div>
106           <div class="room_left_btn_box__item flex-1 flex flex-center gray">通知打扫</div> -->
107           <!-- <div class="room_left_btn_box__item flex flex-center green">通知打扫</div> -->
108           <!-- <div class="room_left_btn_box__item flex flex-center green">结束打扫</div> -->
109         </div>
110       </div>
111       <div class="right flex flex-col">
112         <div class="room_info flex-1">
113           <div class="staff_box flex flex-ver flex-sb">
114             <div class="staff_box_item flex-1 flex flex-center">
115               <div>
116                 <div class="staff_box_item__title">分诊顾问</div>
117                 <div class="staff_box_item__name">张怀民</div>
118               </div>
119             </div>
120             <div class="staff_box_item flex-1 flex flex-center">
121               <div>
122                 <div class="staff_box_item__title">执行医生</div>
123                 <div class="staff_box_item__name">张医生</div>
124               </div>
125             </div>
126             <div class="staff_box_item flex-1 flex flex-center">
127               <div>
128                 <div class="staff_box_item__title">执行护士</div>
129                 <div class="staff_box_item__name">张护士</div>
130               </div>
131             </div>
132           </div>
133           <div class="room_info_project">
134             <div class="room_info_project_block">
135               <div class="tx">phis-Fotona 超V光、phis-补水嫩肤(F)涂抹</div>
136             </div>
137           </div>
138         </div>
139         <div class="guest_box flex flex-col">
140           <div class="guest_title flex flex-center">等待诊疗</div>
141           <div class="guest_block flex-1">
142             <div class="guest_list">
143               <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver">
144                 <div class="guest_list__td flex flex-center">
145                   <div>
146                     <div class="tx">张*民</div>
147                     <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
148                   </div>
149                 </div>
150                 <div class="guest_list__td flex flex-center">
151                   <span class="tx">15:00开始</span>
152                 </div>
153                 <div class="guest_list__td flex flex-center">
154                   <span class="tx">张怀民(医生)、张怀民(护士)</span>
155                 </div>
156                 <div class="guest_list__td flex flex-center">
157                   <img class="icon" src="../../assets/img/choose.png">
158                 </div>
159               </div>
160             </div>
161           </div>
162         </div>
163       </div>
164     </div>
165     <XioCustomerSelect ref="XioCustomerSelect"></XioCustomerSelect>
3ac5f2 166   </div>
J 167 </template>
168
169 <script>
170 // import Login from '../utils/jun_login.js'
bb2b08 171 import XioCustomerSelect from '@/components/xio_customer_select'
3ac5f2 172 export default {
J 173   name: 'RoomDetail',
bb2b08 174   components: {
J 175     XioCustomerSelect
176   },
3ac5f2 177   inject: ['noop'],
J 178   data() {
179     return {
bb2b08 180       list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
3ac5f2 181       timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
J 182     }
183   },
184   computed: {
185
186   },
187   mounted() {
188     console.log('roomDetail mounted')
189     this.init()
190   },
191   destroyed() {
192
193   },
194   methods: {
195     init() {
bb2b08 196       this.countGetTime(this, 'timeObj', 'detail')
3ac5f2 197     }
J 198   }
199 }
200 </script>
201
202 <style scoped>
bb2b08 203 .page_header .reset_btn {
J 204   width: 200px;
205   height: 60px;
206   line-height: 35px;
207   border-radius: 5px;
208   background-color: rgba(47,174,206,1);
209   color: rgba(255,255,255,1);
210   font-size: 24px;
211   text-align: center;
212   font-family: Microsoft Yahei;
213 }
214 .page_container .main {
215   height: 100%;
216   border-radius: 10px;
217   background-color: rgba(255,255,255,1);
218   color: rgba(16,16,16,1);
219   font-size: 14px;
220   /* text-align: center; */
221   font-family: Roboto;
222 }
223 .page_container .main .room_title {
224   line-height: 50px;
225   color: rgba(255,255,255,1);
226   font-size: 36px;
227   text-align: center;
228   font-family: PingFangSC-medium;
229   padding: 10px 0;
230   background-color: rgba(34,123,235,1);
231   width: 400px;
232   margin: 39px auto 0 auto;
233 }
234 .page_container .main .room_main_tip {
235   line-height: 168px;
236   font-size: 120px;
237   color: rgba(46,77,124,1);
238   text-align: center;
239   font-family: PingFangSC-medium;
240   margin-top: 107px;
241   /* font-weight: bold; */
242 }
243 .page_container .main .room_main_tip.gray {
244   color: rgba(154,154,154,1);
245 }
246 .page_container .main .btn_box {
247   margin-top: 130px;
248 }
249 .page_container .main .btn_box__item {
250   width: 250px;
251   height: 120px;
252   border-radius: 10px;
253   box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
254   margin-right: 70px;
255 }
256 .page_container .main .btn_box__item:last-child {
257   margin-right: 0;
258 }
259 .page_container .main .btn_box__item.white {
260   background-color: rgba(255,255,255,1);
261 }
262 .page_container .main .btn_box__item.blue {
263   background-color: rgba(46,77,124,1);
264 }
265 .page_container .main .btn_box__item.yellow {
266   background-color: rgba(255,199,115,1);
267 }
268 .page_container .main .btn_box__item.gray {
269   background-color: rgba(206,206,206,1);
270 }
271 .page_container .main .btn_box__item .icon {
272   width: 60px;
273   height: 60px;
274   display: block;
275   margin-right: 17px;
276 }
277 .page_container .main .btn_box__item .tx {
278   line-height: 37px;
279   color: rgba(51,51,51,1);
280   font-size: 26px;
281   text-align: center;
282   font-family: PingFangSC-medium;
283 }
284 .page_container .main .btn_box__item .tx.white {
285   color: rgba(255,255,255,1);
286 }
287 .page_container .main .room_left_btn_box {
288   padding: 0 23px;
289   margin-top: 163px;
290 }
291 .page_container .main .room_left_btn_box__item {
292   height: 150px;
293   line-height: 58px;
294   border-radius: 10px;
295   font-size: 40px;
296   text-align: center;
297   font-family: Microsoft Yahei;
298   margin-right: 20px;
299   font-weight: bold;
300 }
301 .page_container .main .room_left_btn_box__item:last-child {
302   margin-right: 0;
303 }
304 .page_container .main .room_left_btn_box__item.yellow {
305   color: rgba(255,255,255,1);
306   background-color: rgba(233,157,66,1);
307 }
308 .page_container .main .room_left_btn_box__item.gray {
309   background-color: rgba(206,206,206,1);
310   color: rgba(79,79,79,1);
311 }
312 .page_container .main .room_left_btn_box__item.green {
313   width: 500px;
314   height: 150px;
315   line-height: 73px;
316   border-radius: 10px;
317   background-color: rgba(47,174,206,1);
318   color: rgba(255,255,255,1);
319   font-size: 50px;
320   text-align: center;
321   margin: auto;
322 }
323 .page_container .main .room_content {
324   margin-top: 30px;
325 }
326 .page_container .main .room_content .tip {
327   line-height: 33px;
328   color: rgba(79,79,79,1);
329   font-size: 24px;
330   text-align: center;
331   font-family: PingFangSC-medium;
332 }
333 .page_container .main .room_content .name {
334   line-height: 168px;
335   color: rgba(51,51,51,1);
336   font-size: 120px;
337   text-align: center;
338   font-family: PingFangSC-medium;
339   margin-top: 13px;
340 }
341 .page_container .main .room_content .ciq {
342   line-height: 42px;
343   color: rgba(51,51,51,1);
344   font-size: 30px;
345   text-align: center;
346   font-family: PingFangSC-regular;
347   margin-top: -5px;
348 }
349 .page_container .main .room_content .time {
350   line-height: 42px;
351   color: rgba(0,0,0,1);
352   font-size: 30px;
353   text-align: center;
354   font-family: PingFangSC-medium;
355   font-weight: bold;
356   margin-top: 21px;
357 }
358 .page_container .right {
359   width: 686px;
360   margin-left: 30px;
361   height: 100%;
362 }
363 .page_container .right_block {
364   width: 100%;
365   height: 100%;
366 }
367 .page_container .right .guest_title {
368   height: 60px;
369   line-height: 28px;
370   border-radius: 10px 10px 0px 0px;
371   background-color: rgba(255,255,255,1);
372   color: rgba(34,123,235,1);
373   font-size: 20px;
374   text-align: center;
375   font-family: Roboto;
376   font-weight: bold;
377 }
378 .page_container .right .guest_block {
379   overflow: auto;
380 }
381 .page_container .right .guest_list {
382   background-color: #fff;
383   padding-bottom: 23px;
384 }
385 .page_container .right .guest_list__row {
386   min-height: 75px;
387   background-color: rgba(34,123,235,0.1);
388 }
389 .page_container .right .guest_list__row:nth-child(2n) {
390   background-color: #fff;
391 }
392 .page_container .right .guest_list__td {}
393 .page_container .right .guest_list__td .tx {
394   line-height: 30px;
395   color: rgba(16,16,16,1);
396   font-size: 22px;
397   text-align: center;
398   font-family: PingFangSC-regular;
399 }
400 .page_container .right .guest_list__td .icon {
401   width: 20px;
402   height: 20px;
403   display: block;
404 }
405 .page_container .right .guest_list__td:nth-child(1) {
406   width: 19.54%;
407 }
408 .page_container .right .guest_list__td:nth-child(2) {
409   width: 21.86%;
410 }
411 .page_container .right .guest_list__td:nth-child(3) {
412   width: 46.06%;
413 }
414 .page_container .right .guest_list__td:nth-child(4) {
415   width: 12.54%;
416 }
417 .page_container .right .room_info {
418   width: 100%;
419   border-radius: 10px;
420   background-color: rgba(255,255,255,0.3);
421 }
422 .page_container .right .room_info .staff_box {
423   margin-top: 30px;
424 }
425 .page_container .right .room_info .staff_box_item {
426   height: 180px;
427 }
428 .page_container .right .room_info .staff_box_item:nth-child(1) {
429   background-color: rgba(255,255,255,0.1);
430 }
431 .page_container .right .room_info .staff_box_item:nth-child(2) {
432   background-color: rgba(255,255,255,0.3);
433   margin: 0 10px;
434 }
435 .page_container .right .room_info .staff_box_item:nth-child(3) {
436   background-color: rgba(255,255,255,0.1);
437 }
438 .page_container .right .room_info .staff_box_item__title {
439   line-height: 28px;
440   color: rgba(255,255,255,1);
441   font-size: 20px;
442   text-align: center;
443   font-family: PingFangSC-regular;
444 }
445 .page_container .right .room_info .staff_box_item__name {
446   line-height: 56px;
447   color: rgba(255,255,255,1);
448   font-size: 40px;
449   text-align: center;
450   font-family: PingFangSC-medium;
451   margin-top: 5px;
452 }
453 .page_container .right .room_info .room_info_project {
454   padding: 36px 20px 20px 20px;
455   height: 138px;
456   box-sizing: border-box;
457   overflow: hidden;
458 }
459 .page_container .right .room_info .room_info_project_block {
460   box-sizing: border-box;
461   width: 100%;
462   height: 100%;
463   overflow: auto;
464 }
465 .page_container .right .room_info .room_info_project .tx {
466   line-height: 39px;
467   color: rgba(255,255,255,1);
468   font-size: 28px;
469   text-align: center;
470   font-family: PingFangSC-regular;
471 }
472 .page_container .right .guest_box {
473   margin-top: 65px;
474   width: 100%;
475   height: 345px;
476   background-color: #fff;
477   overflow: hidden;
478 }
479 </style>