main
parent
ac1c7af007
commit
abe4e8db2f
|
|
@ -65,7 +65,10 @@ button:focus-visible {
|
||||||
/* padding: 2rem; */
|
/* padding: 2rem; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
color: #213547;
|
color: #213547;
|
||||||
|
|
|
||||||
|
|
@ -19,21 +19,125 @@
|
||||||
<el-card>
|
<el-card>
|
||||||
<div class="div-1">
|
<div class="div-1">
|
||||||
<span class="name name1">房型信息</span>
|
<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>
|
||||||
<div class="div-2">
|
<div class="div-2">
|
||||||
<span class="name name2">灯光信息</span>
|
<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>
|
||||||
<div class="div-3">
|
<div class="div-3">
|
||||||
<span class="name name3">空调信息</span>
|
<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>
|
||||||
<div class="div-4">
|
<div class="div-4">
|
||||||
<span class="name name4">面板信息</span>
|
<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>
|
||||||
<div class="div-5">
|
<div class="div-5">
|
||||||
<span class="name name5">窗帘信息</span>
|
<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>
|
||||||
<div class="div-6">
|
<div class="div-6">
|
||||||
<span class="name name6">其他信息</span>
|
<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>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -50,11 +154,122 @@ const new_room = reactive({
|
||||||
number: 55,
|
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 = () => {
|
const addRoom = () => {
|
||||||
room_data.list.push({
|
room_data.list.push({
|
||||||
name: new_room.name,
|
name: new_room.name,
|
||||||
number: new_room.number,
|
number: new_room.number,
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
const check = () => {
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
@ -135,29 +350,72 @@ const addRoom = () => {
|
||||||
.name6 {
|
.name6 {
|
||||||
background: #e99d42;
|
background: #e99d42;
|
||||||
}
|
}
|
||||||
|
.name7 {
|
||||||
|
background: #cd42e9;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.div-1 {
|
.div-1 {
|
||||||
height: 10%;
|
height: 10%;
|
||||||
}
|
}
|
||||||
.div-2 {
|
.div-2 {
|
||||||
height: 15%;
|
height: 12%;
|
||||||
}
|
}
|
||||||
.div-3 {
|
.div-3 {
|
||||||
height: 15%;
|
height: 12%;
|
||||||
}
|
}
|
||||||
.div-4 {
|
.div-4 {
|
||||||
height: 15%;
|
height: 12%;
|
||||||
}
|
}
|
||||||
.div-5 {
|
.div-5 {
|
||||||
height: 15%;
|
height: 12%;
|
||||||
}
|
}
|
||||||
.div-6 {
|
.div-6 {
|
||||||
height: 20%;
|
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>
|
}</style>
|
||||||
Loading…
Reference in New Issue