From abe4e8db2fe79946edfc93028b576b7f2f1e1d63 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Thu, 21 Mar 2024 23:19:31 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style.css      |   5 +-
 src/views/Room.vue | 270 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 268 insertions(+), 7 deletions(-)

diff --git a/src/style.css b/src/style.css
index 2e9314c..577287a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -65,7 +65,10 @@ button:focus-visible {
   /* padding: 2rem; */
   text-align: center;
 }
-
+.flex-center {
+  display: flex;
+  align-items: center;
+}
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/src/views/Room.vue b/src/views/Room.vue
index 76e1ce5..ea2f7d2 100644
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@@ -19,21 +19,125 @@
         <el-card>
             <div class="div-1">
                 <span class="name name1">房型信息</span>
+                <div class="flex-center bar">
+                    <div class="div300">
+                        <span>房型名称：</span>
+                        <el-select v-model="form.roomName" placeholder="请选择">
+                            <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                    <div class="div300"> 
+                        <span>房型数量：</span>
+                        <el-input-number v-model="form.num100" :min="1" :max="10" label="描述文字"></el-input-number>
+                    </div>
+                </div>
             </div>
             <div class="div-2">
                 <span class="name name2">灯光信息</span>
+                <div class="flex-center bar">
+                    <div v-for="(item,i) in lightArr" :key="item.label"> 
+                        <p>{{ item.label }}</p>
+                        <p>
+                            <el-input-number v-model="form.num100" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                </div>
             </div>
             <div class="div-3">
                 <span class="name name3">空调信息</span>
+                <div class="flex-center bar">
+                    <div>盘管类型</div>
+                    <el-radio-group v-model="form.type1">
+                        <el-radio :label="item.value" :key="item.value" v-for="(item,index) in radioGroup1">{{item.label}}</el-radio>
+                    </el-radio-group>
+                    <el-radio-group v-model="form.type2">
+                        <el-radio :label="item.value" :key="item.value" v-for="(item,index) in radioGroup2">{{item.label}}</el-radio>
+                    </el-radio-group>
+                    <el-radio-group v-model="form.type3">
+                        <el-radio :label="item.value" :key="item.value" v-for="(item,index) in radioGroup3">{{item.label}}</el-radio>
+                    </el-radio-group>
+                    <div>
+                        <p>温控器数量</p>
+                        <p>
+                            <el-input-number v-model="form.num1" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                </div>
             </div>
             <div class="div-4">
                 <span class="name name4">面板信息</span>
+                <div class="flex-center bar">
+                    <div>面板类型</div>
+                    <el-radio-group v-model="form.type4">
+                        <el-radio :label="item.value" :key="item.value" v-for="(item,index) in radioGroup4">{{item.label}}</el-radio>
+                    </el-radio-group>
+                    <div>
+                        <p>面板数量</p>
+                        <p>
+                            <el-input-number v-model="form.mbnum" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                    <div>
+                        <p>按钮数量</p>
+                        <p>
+                            <el-input-number v-model="form.btnnum" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                </div>
             </div>
             <div class="div-5">
                 <span class="name name5">窗帘信息</span>
+                <div class="flex-center bar">
+                    <div>窗帘类型</div>
+                    <el-radio-group v-model="form.type5">
+                        <el-radio :label="item.value" :key="item.value" v-for="(item,index) in radioGroup5">{{item.label}}</el-radio>
+                    </el-radio-group>
+                    <div>
+                        <p>窗帘数量</p>
+                        <p>
+                            <el-input-number v-model="form.chlnum" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                    <div>
+                        <p>窗纱数量</p>
+                        <p>
+                            <el-input-number v-model="form.chshnum" :min="1" :max="100"></el-input-number>
+                        </p>
+                    </div>
+                </div>
             </div>
             <div class="div-6">
                 <span class="name name6">其他信息</span>
+                <div class="con-div">
+                    <div class="flex-center bar">
+                        <div v-for="(item,i) in otherArr" :key="item.label"> 
+                            <p>{{ item.label }}</p>
+                            <p>
+                                <el-input-number v-model="form.num101" :min="1" :max="100"></el-input-number>
+                            </p>
+                        </div>
+                        
+                    </div>
+                    <el-checkbox-group v-model="form.checkone" class="rules-label" >
+                        <el-checkbox v-for="(item,i) in checkList" :label="item.label" :key="item.value" :value="item.value" >
+                            {{ item.label }}
+                        </el-checkbox>
+                    </el-checkbox-group>
+                </div>
+                
+            </div>
+            <div class="div-7">
+                <span class="name name7">备注</span>
+                <div class="con-div100">
+                    <div class="flex-center bar">
+                        <el-input type="textarea" v-model="form.desc"></el-input>
+                    </div>
+                </div>
             </div>
         </el-card>
     </div>
@@ -50,11 +154,122 @@ const new_room = reactive({
     number: 55,
 })
 
+const options = reactive([{
+    label: '房型A',
+    value: 1,
+},{
+    label: '房型B',
+    value: 2,
+}])
+const form = reactive({
+    roomName: options[0].value,
+    num1: 1,
+    num100: 1,
+    num101: 1,
+    type1: 0,
+    type2: 0,
+    type3: 0,
+    type4: 0,
+    type5: 0,
+    mbnum: 0,
+    btnnum: 0,
+    chlnum: 0,
+    chshnum: 0,
+    checkone: [],
+    desc:''
+})
+
+const lightArr = reactive([{
+    label: '开关回路',
+    value: 1,
+},{
+    label: '0-10V调光',
+    value: 2,
+},{
+    label: '前沿调光',
+    value: 3,
+},{
+    label: '后沿调光',
+    value: 4,
+},{
+    label: 'DALI灯',
+    value: 5,
+}])
+const otherArr = reactive([{
+    label: '红外',
+    value: 1,
+},{
+    label: '双鉴红外',
+    value: 2,
+},{
+    label: '门磁',
+    value: 3,
+},{
+    label: '窗磁',
+    value: 4,
+},{
+    label: '门铃',
+    value: 5,
+}])
+const radioGroup1 = reactive([{
+    label: '普通三速风机',
+    value: 1,
+},{
+    label: '直流无刷风机',
+    value: 2,
+},{
+    label: '三方协议风机',
+    value: 3,
+}])
+const radioGroup2 = reactive([{
+    label: '两管制',
+    value: 4,
+},{
+    label: '四管制',
+    value: 5,
+}])
+const radioGroup3 = reactive([{
+    label: '两通阀',
+    value: 6,
+},{
+    label: '调节阀',
+    value: 7,
+}])
+const radioGroup4 = reactive([{
+    label: '普通面板(无背光)',
+    value: 8,
+},{
+    label: '普通面板(带背光)',
+    value: 9,
+},{
+    label: '协议面板',
+    value: 10,
+}])
+const radioGroup5 = reactive([{
+    label: '干接点电机',
+    value: 11,
+},{
+    label: '485电机',
+    value: 12,
+}])
+const checkList = reactive([{
+    label: 'DND',
+    value: 11,
+},{
+    label: 'MUR',
+    value: 12,
+},{
+    label: 'SOS',
+    value: 13,
+}])
 const addRoom = () => {
     room_data.list.push({
         name: new_room.name,
         number: new_room.number,
     });
+}
+const check = () => {
+   
 }
 </script>
 <style lang="scss" scoped>
@@ -135,29 +350,72 @@ const addRoom = () => {
                 .name6 {
                     background: #e99d42;
                 }
-
+                .name7 {
+                    background: #cd42e9;
+                }
             }
 
             .div-1 {
                 height: 10%;
             }
             .div-2 {
-                height: 15%;
+                height: 12%;
             }
             .div-3 {
-                height: 15%;
+                height: 12%;
             }
             .div-4 {
-                height: 15%;
+                height: 12%;
             }
             .div-5 {
-                height: 15%;
+                height: 12%;
             }
             .div-6 {
                 height: 20%;
             }
+            .div-7 {
+                height: 15%;
+            }
+            .el-radio-group {
+                width: 160px !important; 
+                display: flex;
+                .el-radio {
+                    width: 100%;
+                }
+            }
+        }
+        
+        .con-div {
+            display: flex;
+            justify-content:space-around;
+            flex-direction: column;
+        }
+        .con-div100 {
+            width: 96%;
+            height: 100%;
+            padding: 5px;
+        }
+        ::v-deep .el-textarea__inner {
+            height: 80px !important; 
+        }
+        p {
+            margin: 8px;
+        }
+        .bar{
+            width: 100%;
+            padding: 10px;
+            >div {
+                margin-right: 10px;
+            }
+        }
+        .div300 {
+            width: 300px;
+            display: flex;
+            align-items: center;
+            span {
+                flex-shrink: 0;
+            }
         }
-
     }
 
 }</style>
\ No newline at end of file