543 lines
15 KiB
Vue
543 lines
15 KiB
Vue
<template>
|
|
<div class="room-div">
|
|
<el-card>
|
|
<div>
|
|
<el-button type="primary" @click="goHome">项目管理</el-button>
|
|
<el-button type="success" @click="save_room">项目预览</el-button>
|
|
</div>
|
|
<div class="ptoject-info">
|
|
<div class="title">{{ project.name }}</div>
|
|
<div>{{ project.description }}</div>
|
|
</div>
|
|
<el-divider />
|
|
<div>
|
|
<el-button type="primary" class="add-btn" :icon="Plus" @click="add_room">新建</el-button>
|
|
</div>
|
|
<div class="room-list">
|
|
<div v-for="(item, index) in project.content" :key="index" class="room-span" @click="select_room(item)"
|
|
:class="{ 'selectDiv': item.room_name === currentRoom.room_name }">
|
|
<span>{{ item.room_name }}</span>
|
|
<span>{{ item.room_count }}</span>
|
|
<el-button :icon="Delete" circle @click="delet_room(item)"/>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card>
|
|
<div class="div-1">
|
|
<span class="name name1">房型信息</span>
|
|
<div class="flex-center bar">
|
|
<div class="div300">
|
|
<span>房型名称：</span>
|
|
<el-input v-model="currentRoom.room_name" placeholder="请输入房型名称" />
|
|
</div>
|
|
<div class="div300">
|
|
<span>房型数量：</span>
|
|
<el-input-number v-model="currentRoom.room_count" :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="currentRoom['lightNum'+ item.value]" :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="currentRoom.type1">
|
|
<el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup1">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<el-radio-group v-model="currentRoom.type2">
|
|
<el-radio :value="item.value" :key="item.value" v-for="(item, index) in radioGroup2">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<el-radio-group v-model="currentRoom.type3">
|
|
<el-radio :value="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="currentRoom.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="currentRoom.type4">
|
|
<el-radio :value="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="currentRoom.mbnum" :min="1" :max="100"></el-input-number>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>按钮数量</p>
|
|
<p>
|
|
<el-input-number v-model="currentRoom.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="currentRoom.type5">
|
|
<el-radio :value="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="currentRoom.chlnum" :min="1" :max="100"></el-input-number>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>窗纱数量</p>
|
|
<p>
|
|
<el-input-number v-model="currentRoom.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="currentRoom['otherNum'+ item.value]" :min="1" :max="100"></el-input-number>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<el-checkbox-group v-model="currentRoom.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="currentRoom.desc"></el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { Delete } from '@element-plus/icons-vue'
|
|
import { onMounted, ref, reactive } from 'vue'
|
|
import { usrRoomStore } from '../store/project'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import myApi from "@/api/myApi.js";
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage,ElMessageBox } from "element-plus";
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const project = reactive({
|
|
name: "",
|
|
description: "",
|
|
content: [],
|
|
});
|
|
|
|
const room_info = reactive({
|
|
room_name: '',
|
|
room_count: 1,
|
|
lightNum0: 1, // 开关回路
|
|
lightNum1: 1,//0-10V调光
|
|
lightNum2: 1,//前沿调光
|
|
lightNum3: 1,//后沿调光
|
|
lightNum4:1, //DALI灯
|
|
type1: 0,// 盘管类型
|
|
type2: 0,
|
|
type3: 0,
|
|
num1: 1, // 温室器数量
|
|
type4: 0,// 面板类型
|
|
type5: 0,// 窗帘类型
|
|
mbnum: 0,// 面板数量
|
|
btnnum: 0,// 按钮数量
|
|
chlnum: 0,// 窗帘数量
|
|
chshnum: 0,// 窗纱数量
|
|
checkone: [0,1],// 其他信息
|
|
desc: '', // 备注,
|
|
otherNum0: 1,
|
|
otherNum1: 1,
|
|
otherNum2: 1,
|
|
otherNum3: 1,
|
|
otherNum4: 1
|
|
|
|
})
|
|
|
|
|
|
var currentRoom = ref({});
|
|
const get_project = async () => {
|
|
const param = {
|
|
action: 100,
|
|
data: {
|
|
name: route.query.project_name,
|
|
}
|
|
}
|
|
const res = await myApi.getProjects(param);
|
|
if (res.code === 0) {
|
|
project.name = res.data.name;
|
|
project.description = res.data.description;
|
|
if (Array.isArray(res.data.content)) {
|
|
project.content = res.data.content;
|
|
} else {
|
|
add_room();
|
|
}
|
|
select_room(project.content[0]);
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: "warning",
|
|
});
|
|
}
|
|
}
|
|
const delet_room = (item) => {
|
|
if(project.content.length === 1) {
|
|
ElMessage.warning('至少保留一个。。')
|
|
return;
|
|
}
|
|
project.content = project.content.filter(ele => {
|
|
return ele.room_name !== item.room_name;
|
|
})
|
|
save_room();
|
|
}
|
|
onMounted(() => {
|
|
get_project();
|
|
});
|
|
|
|
const select_room = (item) => {
|
|
currentRoom.value = item;
|
|
}
|
|
const add_room = () => {
|
|
if (!Array.isArray(project.content)) {
|
|
project.content = []
|
|
}
|
|
let target=JSON.parse(JSON.stringify(room_info));
|
|
target.room_name = "房型" + (project.content.length + 1);
|
|
project.content.push(target);
|
|
console.log(1, project.content);
|
|
}
|
|
|
|
const save_room = async () => {
|
|
const param = {
|
|
action: 1021,
|
|
data: project
|
|
}
|
|
const res = await myApi.getProjects(param);
|
|
console.log(res);
|
|
if (res.code === 0) {
|
|
ElMessage({
|
|
message: "更新成功",
|
|
type: "success",
|
|
});
|
|
get_project();
|
|
} else {
|
|
ElMessage({
|
|
message: res.message + '[' + res.data + ']',
|
|
type: "warning",
|
|
});
|
|
}
|
|
}
|
|
|
|
const goHome = () => {
|
|
save_room();
|
|
router.push('home');
|
|
}
|
|
|
|
|
|
const lightArr = reactive([{
|
|
label: '开关回路',
|
|
value: 0,
|
|
}, {
|
|
label: '0-10V调光',
|
|
value: 1,
|
|
}, {
|
|
label: '前沿调光',
|
|
value: 2,
|
|
}, {
|
|
label: '后沿调光',
|
|
value: 3,
|
|
}, {
|
|
label: 'DALI灯',
|
|
value: 4,
|
|
}])
|
|
const otherArr = reactive([{
|
|
label: '红外',
|
|
value: 0,
|
|
}, {
|
|
label: '双鉴红外',
|
|
value: 1,
|
|
}, {
|
|
label: '门磁',
|
|
value: 2,
|
|
}, {
|
|
label: '窗磁',
|
|
value: 3,
|
|
}, {
|
|
label: '门铃',
|
|
value: 4,
|
|
}])
|
|
const radioGroup1 = reactive([{
|
|
label: '普通三速风机',
|
|
value: 0,
|
|
}, {
|
|
label: '直流无刷风机',
|
|
value: 1,
|
|
}, {
|
|
label: '三方协议风机',
|
|
value: 2,
|
|
}])
|
|
const radioGroup2 = reactive([{
|
|
label: '两管制',
|
|
value: 0,
|
|
}, {
|
|
label: '四管制',
|
|
value: 1,
|
|
}])
|
|
const radioGroup3 = reactive([{
|
|
label: '两通阀',
|
|
value: 0,
|
|
}, {
|
|
label: '调节阀',
|
|
value: 1,
|
|
}])
|
|
const radioGroup4 = reactive([{
|
|
label: '普通面板(无背光)',
|
|
value: 0,
|
|
}, {
|
|
label: '普通面板(带背光)',
|
|
value: 1,
|
|
}, {
|
|
label: '协议面板',
|
|
value: 10,
|
|
}])
|
|
const radioGroup5 = reactive([{
|
|
label: '干接点电机',
|
|
value: 0,
|
|
}, {
|
|
label: '485电机',
|
|
value: 1,
|
|
}])
|
|
const checkList = reactive([{
|
|
label: 'DND',
|
|
value: 0,
|
|
}, {
|
|
label: 'MUR',
|
|
value: 1,
|
|
}, {
|
|
label: 'SOS',
|
|
value: 2,
|
|
}])
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.room-div {
|
|
height: 800px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>div:first-child {
|
|
width: 20%;
|
|
|
|
::v-deep .el-card__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 95%;
|
|
|
|
>div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.add-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.room-span {
|
|
padding: 10px 5px;
|
|
border: 1px solid #409eff;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
>span {
|
|
width: 30%;
|
|
}
|
|
}
|
|
.title {
|
|
line-height: 48px;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
}
|
|
.el-divider{
|
|
background-color:#409eff;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
>div:nth-child(2) {
|
|
width: 79%;
|
|
|
|
::v-deep .el-card__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 95%;
|
|
justify-content: space-between;
|
|
|
|
>div {
|
|
border: 1px solid #ddd;
|
|
display: flex;
|
|
border-radius: 8px;
|
|
|
|
.name {
|
|
width: 50px;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.name1 {
|
|
background: #de868f;
|
|
}
|
|
|
|
.name2 {
|
|
background: #e99d42;
|
|
}
|
|
|
|
.name3 {
|
|
background: #cba43f;
|
|
}
|
|
|
|
.name4 {
|
|
background: #bfbf3d;
|
|
}
|
|
|
|
.name5 {
|
|
background: #54bcbd;
|
|
}
|
|
|
|
.name6 {
|
|
background: #e99d42;
|
|
}
|
|
|
|
.name7 {
|
|
background: #cd42e9;
|
|
}
|
|
}
|
|
|
|
.div-1 {
|
|
height: 10%;
|
|
}
|
|
|
|
.div-2 {
|
|
height: 12%;
|
|
}
|
|
|
|
.div-3 {
|
|
height: 12%;
|
|
}
|
|
|
|
.div-4 {
|
|
height: 12%;
|
|
}
|
|
|
|
.div-5 {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectDiv {
|
|
background: #409eff;
|
|
color: #fff;
|
|
}
|
|
|
|
}</style> |