gitcc
/
inncom_list
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

。。

main
wangqiujuan0808 2024-03-21 23:19:31 +08:00
parent ac1c7af007
commit abe4e8db2f
2 changed files with 268 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/style.css
View File

@ -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;

268
src/views/Room.vue
View File

@ -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>