From aeb317703c9c82edb7c4c7ecc5985eef62864c7c Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期二, 05 十二月 2023 19:41:21 +0800
Subject: [PATCH] update_202312051941_项目-治疗室屏幕web-切图v1
---
src/pages/room/detail.vue | 486 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 476 insertions(+), 10 deletions(-)
diff --git a/src/pages/room/detail.vue b/src/pages/room/detail.vue
index 03022fe..e0101a0 100644
--- a/src/pages/room/detail.vue
+++ b/src/pages/room/detail.vue
@@ -1,33 +1,190 @@
<!--room-detail.vue-->
<template>
<div class="page">
- <div class="page_header flex flex-ver">
+ <div class="page_header flex flex-ver" @click="back">
<div class="left flex flex-ver">
<img class="page_logo_1" src="../../assets/img/logo_1.png">
<img class="page_logo_2" src="../../assets/img/logo_2.png">
</div>
<div class="right flex-1 flex flex-jcfe flex-ver">
+ <div class="reset_btn flex flex-center" @click="resetStatus">閲嶇疆鎴块棿鐘舵��</div>
<div class="page_date">
- <div class="page_week">{{timeObj.week}}</div>
- <div class="page_day">{{timeObj.date}}</div>
+ <div class="page_week">{{ timeObj.week }}</div>
+ <div class="page_day">{{ timeObj.date }}</div>
</div>
- <div class="page_time">{{timeObj.timeMin}}</div>
- <!-- <div class="page_time">{{timeObj.time}}</div> -->
+ <div class="page_time">{{ timeObj.timeMin }}</div>
+ <!-- <div class="page_time">{{ timeObj.time }}</div> -->
</div>
</div>
- <div>123</div>
+ <!-- 鏈湁瀹夋帓 -->
+ <div class="page_container flex flex-ver hide">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-浣跨敤涓�-</div>
+ <div class="btn_box flex flex-center">
+ <div class="flex flex-ver">
+ <div class="btn_box__item flex flex-center white" data-tx="绌洪棽">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/free.png">
+ <div class="tx">绌洪棽</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center blue" data-tx="浣跨敤涓�">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/using.png">
+ <div class="tx white">浣跨敤涓�</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center yellow" data-tx="瀹汉浼戞伅">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/rest.png">
+ <div class="tx">瀹汉浼戞伅</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center gray" data-tx="閫氱煡鎵撴壂">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/clear.png">
+ <div class="tx">閫氱煡鎵撴壂</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 娌℃湁榛樿瀹汉鍜屾湁瀹夋帓 -->
+ <div class="page_container flex flex-ver hide">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_main_tip">-浣跨敤涓�-</div>
+ <div class="room_left_btn_box flex flex-ver">
+ <div class="room_left_btn_box__item flex-1 flex flex-center yellow">瀹汉浼戞伅</div>
+ <div class="room_left_btn_box__item flex-1 flex flex-center gray">閫氱煡鎵撴壂</div>
+ <!-- <div class="room_left_btn_box__item flex flex-center green">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">缁撴潫鎵撴壂</div> -->
+ </div>
+ </div>
+ <div class="right">
+ <div class="right_block flex flex-col">
+ <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+ <div class="guest_block flex-1">
+ <div class="guest_list">
+ <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer">
+ <div class="guest_list__td flex flex-center">
+ <div>
+ <div class="tx">寮�*姘�</div>
+ <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
+ </div>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">15:00寮�濮�</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">寮犳��姘�(鍖荤敓)銆佸紶鎬�姘�(鎶ゅ＋)</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <img class="icon" src="../../assets/img/choose.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 榛樿瀹汉鍜屾湁瀹夋帓 -->
+ <div class="page_container flex flex-ver">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_content">
+ <div class="tip">璇婄枟瀹夋帓</div>
+ <div class="name">寮犳��姘�</div>
+ <div class="ciq">(2300000000)</div>
+ <div class="time">瀹夋帓娌荤枟鏃堕棿锛�13:30 寮�濮�</div>
+ </div>
+ <div class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
+ <div class="room_left_btn_box__item flex flex-center green btn_ani">寮�濮嬫不鐤�</div>
+ <!-- <div class="room_left_btn_box__item flex-1 flex flex-center yellow">瀹汉浼戞伅</div>
+ <div class="room_left_btn_box__item flex-1 flex flex-center gray">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">缁撴潫鎵撴壂</div> -->
+ </div>
+ </div>
+ <div class="right flex flex-col">
+ <div class="room_info flex-1">
+ <div class="staff_box flex flex-ver flex-sb">
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鍒嗚瘖椤鹃棶</div>
+ <div class="staff_box_item__name">寮犳��姘�</div>
+ </div>
+ </div>
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鎵ц鍖荤敓</div>
+ <div class="staff_box_item__name">寮犲尰鐢�</div>
+ </div>
+ </div>
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鎵ц鎶ゅ＋</div>
+ <div class="staff_box_item__name">寮犳姢澹�</div>
+ </div>
+ </div>
+ </div>
+ <div class="room_info_project">
+ <div class="room_info_project_block">
+ <div class="tx">phis-Fotona 瓒匳鍏夈�乸his-琛ユ按瀚╄偆(F)娑傛姽</div>
+ </div>
+ </div>
+ </div>
+ <div class="guest_box flex flex-col">
+ <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+ <div class="guest_block flex-1">
+ <div class="guest_list">
+ <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver" @click="selectCustomer">
+ <div class="guest_list__td flex flex-center">
+ <div>
+ <div class="tx">寮�*姘�</div>
+ <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
+ </div>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">15:00寮�濮�</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">寮犳��姘�(鍖荤敓)銆佸紶鎬�姘�(鎶ゅ＋)</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <img class="icon" src="../../assets/img/choose.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 閫夋嫨瀹汉寮圭獥 -->
+ <XioCustomerSelect ref="XioCustomerSelect" @cancel="selectCustomerCancel" @submit="selectCustomerSubmit" />
+ <!-- 鏇存敼鎴块棿鐘舵�佺獥 -->
+ <XioRoomStatusChg ref="XioRoomStatusChg" @changeStatus="changeStatus" />
</div>
</template>
<script>
// import Login from '../utils/jun_login.js'
-
+// 閫夋嫨瀹汉寮圭獥
+import XioCustomerSelect from '@/components/xio_customer_select'
+// 鏇存敼鎴块棿鐘舵�佺獥
+import XioRoomStatusChg from '@/components/xio_room_status_chg'
export default {
name: 'RoomDetail',
- components: {},
+ components: {
+ XioCustomerSelect,
+ XioRoomStatusChg
+ },
inject: ['noop'],
data() {
return {
+ list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
timeObj: {}// week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
}
},
@@ -43,11 +200,320 @@
},
methods: {
init() {
- this.countGetTime(this, 'timeObj')
+ this.countGetTime(this, 'timeObj', 'detail')
+ },
+ // 杩斿洖
+ back() {
+ this.stopCountGetTime('detail')
+ this.stopPollingAjaxFn('detail')
+ this.$router.go(-1)
+ },
+ // 閲嶇疆鐘舵��
+ resetStatus() {
+ // 鎵撳紑寮圭獥
+ this.$refs['XioRoomStatusChg'].showDialog()
+ },
+ // 鏇存敼鎴块棿鐘舵��
+ changeStatus(opt) {
+ console.log(opt.statusTx)
+ // 鍏抽棴寮圭獥
+ this.$refs['XioRoomStatusChg'].hideDialog()
+ },
+ // 閫夋嫨瀹㈡埛
+ selectCustomer(item = {}) {
+ // 鎵撳紑寮圭獥
+ this.$refs['XioCustomerSelect'].showDialog()
+ this.$refs['XioCustomerSelect'].dataInit(item)
+ },
+ // 閫夋嫨瀹㈡埛鍙栨秷
+ selectCustomerCancel(opt) {
+ console.log('cancel', opt)
+ this.$refs['XioCustomerSelect'].hideDialog()
+ },
+ // 閫夋嫨瀹㈡埛纭畾
+ selectCustomerSubmit(opt) {
+ console.log('submit', opt)
+ this.$refs['XioCustomerSelect'].hideDialog()
}
}
}
</script>
<style scoped>
-</style>
\ No newline at end of file
+.page_header .reset_btn {
+ width: 200px;
+ height: 60px;
+ line-height: 35px;
+ border-radius: 5px;
+ background-color: rgba(47,174,206,1);
+ color: rgba(255,255,255,1);
+ font-size: 24px;
+ text-align: center;
+ font-family: Microsoft Yahei;
+}
+.page_container .main {
+ height: 100%;
+ border-radius: 10px;
+ background-color: rgba(255,255,255,1);
+ color: rgba(16,16,16,1);
+ font-size: 14px;
+ /* text-align: center; */
+ font-family: Roboto;
+}
+.page_container .main .room_title {
+ line-height: 50px;
+ color: rgba(255,255,255,1);
+ font-size: 36px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ padding: 10px 0;
+ background-color: rgba(34,123,235,1);
+ width: 400px;
+ margin: 39px auto 0 auto;
+}
+.page_container .main .room_main_tip {
+ line-height: 168px;
+ font-size: 120px;
+ color: rgba(46,77,124,1);
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 107px;
+ /* font-weight: bold; */
+}
+.page_container .main .room_main_tip.gray {
+ color: rgba(154,154,154,1);
+}
+.page_container .main .btn_box {
+ margin-top: 130px;
+}
+.page_container .main .btn_box__item {
+ width: 250px;
+ height: 120px;
+ border-radius: 10px;
+ box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
+ margin-right: 70px;
+}
+.page_container .main .btn_box__item:last-child {
+ margin-right: 0;
+}
+.page_container .main .btn_box__item.white {
+ background-color: rgba(255,255,255,1);
+}
+.page_container .main .btn_box__item.blue {
+ background-color: rgba(46,77,124,1);
+}
+.page_container .main .btn_box__item.yellow {
+ background-color: rgba(255,199,115,1);
+}
+.page_container .main .btn_box__item.gray {
+ background-color: rgba(206,206,206,1);
+}
+.page_container .main .btn_box__item .icon {
+ width: 60px;
+ height: 60px;
+ display: block;
+ margin-right: 17px;
+}
+.page_container .main .btn_box__item .tx {
+ line-height: 37px;
+ color: rgba(51,51,51,1);
+ font-size: 26px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+}
+.page_container .main .btn_box__item .tx.white {
+ color: rgba(255,255,255,1);
+}
+.page_container .main .room_left_btn_box {
+ padding: 0 23px;
+ margin-top: 163px;
+}
+.page_container .main .room_left_btn_box__item {
+ height: 150px;
+ line-height: 58px;
+ border-radius: 10px;
+ font-size: 40px;
+ text-align: center;
+ font-family: Microsoft Yahei;
+ margin-right: 20px;
+ font-weight: bold;
+}
+.page_container .main .room_left_btn_box__item:last-child {
+ margin-right: 0;
+}
+.page_container .main .room_left_btn_box__item.yellow {
+ color: rgba(255,255,255,1);
+ background-color: rgba(233,157,66,1);
+}
+.page_container .main .room_left_btn_box__item.gray {
+ background-color: rgba(206,206,206,1);
+ color: rgba(79,79,79,1);
+}
+.page_container .main .room_left_btn_box__item.green {
+ width: 500px;
+ height: 150px;
+ line-height: 73px;
+ border-radius: 10px;
+ background-color: rgba(47,174,206,1);
+ color: rgba(255,255,255,1);
+ font-size: 50px;
+ text-align: center;
+ margin: auto;
+}
+.page_container .main .room_content {
+ margin-top: 30px;
+}
+.page_container .main .room_content .tip {
+ line-height: 33px;
+ color: rgba(79,79,79,1);
+ font-size: 24px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+}
+.page_container .main .room_content .name {
+ line-height: 168px;
+ color: rgba(51,51,51,1);
+ font-size: 120px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 13px;
+}
+.page_container .main .room_content .ciq {
+ line-height: 42px;
+ color: rgba(51,51,51,1);
+ font-size: 30px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+ margin-top: -5px;
+}
+.page_container .main .room_content .time {
+ line-height: 42px;
+ color: rgba(0,0,0,1);
+ font-size: 30px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ font-weight: bold;
+ margin-top: 21px;
+}
+.page_container .right {
+ width: 686px;
+ margin-left: 30px;
+ height: 100%;
+}
+.page_container .right_block {
+ width: 100%;
+ height: 100%;
+}
+.page_container .right .guest_title {
+ height: 60px;
+ line-height: 28px;
+ border-radius: 10px 10px 0px 0px;
+ background-color: rgba(255,255,255,1);
+ color: rgba(34,123,235,1);
+ font-size: 20px;
+ text-align: center;
+ font-family: Roboto;
+ font-weight: bold;
+}
+.page_container .right .guest_block {
+ overflow: auto;
+}
+.page_container .right .guest_list {
+ background-color: #fff;
+ padding-bottom: 23px;
+}
+.page_container .right .guest_list__row {
+ min-height: 75px;
+ background-color: rgba(34,123,235,0.1);
+}
+.page_container .right .guest_list__row:nth-child(2n) {
+ background-color: #fff;
+}
+.page_container .right .guest_list__td {}
+.page_container .right .guest_list__td .tx {
+ line-height: 30px;
+ color: rgba(16,16,16,1);
+ font-size: 22px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .guest_list__td .icon {
+ width: 20px;
+ height: 20px;
+ display: block;
+}
+.page_container .right .guest_list__td:nth-child(1) {
+ width: 19.54%;
+}
+.page_container .right .guest_list__td:nth-child(2) {
+ width: 21.86%;
+}
+.page_container .right .guest_list__td:nth-child(3) {
+ width: 46.06%;
+}
+.page_container .right .guest_list__td:nth-child(4) {
+ width: 12.54%;
+}
+.page_container .right .room_info {
+ width: 100%;
+ border-radius: 10px;
+ background-color: rgba(255,255,255,0.3);
+}
+.page_container .right .room_info .staff_box {
+ margin-top: 30px;
+}
+.page_container .right .room_info .staff_box_item {
+ height: 180px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(1) {
+ background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item:nth-child(2) {
+ background-color: rgba(255,255,255,0.3);
+ margin: 0 10px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(3) {
+ background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item__title {
+ line-height: 28px;
+ color: rgba(255,255,255,1);
+ font-size: 20px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .room_info .staff_box_item__name {
+ line-height: 56px;
+ color: rgba(255,255,255,1);
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 5px;
+}
+.page_container .right .room_info .room_info_project {
+ padding: 36px 20px 20px 20px;
+ height: 138px;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.page_container .right .room_info .room_info_project_block {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+}
+.page_container .right .room_info .room_info_project .tx {
+ line-height: 39px;
+ color: rgba(255,255,255,1);
+ font-size: 28px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .guest_box {
+ margin-top: 65px;
+ width: 100%;
+ height: 345px;
+ background-color: #fff;
+ overflow: hidden;
+}
+</style>
--
Gitblit v1.8.0