704 lines
18 KiB
Vue
704 lines
18 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>
|
|
<el-button type="success" @click="exc">项目预览</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 in project.content" :key="item.base_info.room_name" class="room-span"
|
|
@click="select_room(item)" :class="{
|
|
selectDiv:
|
|
item.base_info.room_name ===
|
|
current_room_info.base_info.room_name,
|
|
}">
|
|
<span>{{ item.base_info.room_name }}</span>
|
|
<span>{{ item.base_info.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="current_room_info.base_info.room_name" placeholder="请输入房型名称" />
|
|
</div>
|
|
<div class="div300">
|
|
<span>房型数量：</span>
|
|
<el-input-number v-model="current_room_info.base_info.room_count" :min="1" :max="99999"
|
|
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 in lightArr" :key="item.label">
|
|
<p>{{ item.label }}</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.light_info[item.key]" :min="0"
|
|
:max="999"></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="current_room_info.fcu_info.fcu_type">
|
|
<el-radio :value="item.value" :key="item.value" v-for="item in radioGroup1">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<el-radio-group v-model="current_room_info.fcu_info.pipe_type">
|
|
<el-radio :value="item.value" :key="item.value" v-for="item in radioGroup2">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<el-radio-group v-model="current_room_info.fcu_info.valve_type">
|
|
<el-radio :value="item.value" :key="item.value" v-for="item in radioGroup3">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<div>
|
|
<p>风机盘管数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.fcu_info.fcu_count" :min="0"
|
|
:max="999"></el-input-number>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>温控器数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.fcu_info.thermostat_count" :min="0"
|
|
:max="999"></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="current_room_info.panel_info.panel_type">
|
|
<el-radio :value="item.value" :key="item.value" v-for="item in radioGroup4">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<div>
|
|
<p>面板数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.panel_info.panel_count" :min="0"
|
|
:max="999"></el-input-number>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>按钮数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.panel_info.panel_button_count" :min="0"
|
|
:max="999"></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="current_room_info.curtain_info.curtain_type">
|
|
<el-radio :value="item.value" :key="item.value" v-for="item in radioGroup5">{{ item.label
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
<div>
|
|
<p>窗帘数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.curtain_info.curtain_count" :min="0"
|
|
:max="999"></el-input-number>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>窗纱数量</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.curtain_info.sheer_curtain_count" :min="0"
|
|
:max="999"></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 in otherArr" :key="item.label">
|
|
<p>{{ item.label }}</p>
|
|
<p>
|
|
<el-input-number v-model="current_room_info.other[item.key]" :min="0"
|
|
:max="999"></el-input-number>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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="current_room_info.base_info.desc"></el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { Delete } from "@element-plus/icons-vue";
|
|
import { onMounted, reactive } from "vue";
|
|
import { Plus } from "@element-plus/icons-vue";
|
|
import myApi from "@/api/myApi.js";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const project = reactive({
|
|
name: "",
|
|
description: "",
|
|
content: [],
|
|
});
|
|
|
|
const addData = reactive({
|
|
base_info: {
|
|
room_name: "",
|
|
room_count: 1,
|
|
desc: "",
|
|
},
|
|
|
|
light_info: {
|
|
// 灯光信息
|
|
switching_circuit: 0,
|
|
dimming_10v: 0,
|
|
dimming_leading_edge: 0,
|
|
dimming_trailing_edge: 0,
|
|
DALI: 0,
|
|
},
|
|
fcu_info: {
|
|
// 盘管信息
|
|
fcu_type: 0,
|
|
pipe_type: 0,
|
|
valve_type: 0,
|
|
fcu_count: 0,
|
|
thermostat_count: 0,
|
|
},
|
|
panel_info: {
|
|
// 面板信息
|
|
panel_type: 0,
|
|
panel_count: 0,
|
|
panel_button_count: 0,
|
|
},
|
|
curtain_info: {
|
|
// 窗帘信息
|
|
curtain_type: 0,
|
|
curtain_count: 0,
|
|
sheer_curtain_count: 0,
|
|
},
|
|
other: {
|
|
// 其他信息
|
|
PIR: 0,
|
|
PIR2: 0,
|
|
Gate: 0,
|
|
Window: 0,
|
|
doorbell: 0,
|
|
Housekeeping: 0,
|
|
},
|
|
});
|
|
|
|
const current_room_info = reactive({
|
|
base_info: {
|
|
room_name: "",
|
|
room_count: 1,
|
|
desc: "",
|
|
},
|
|
|
|
light_info: {
|
|
// 灯光信息
|
|
switching_circuit: 0,
|
|
dimming_10v: 0,
|
|
dimming_leading_edge: 0,
|
|
dimming_trailing_edge: 0,
|
|
DALI: 0,
|
|
},
|
|
fcu_info: {
|
|
// 盘管信息
|
|
fcu_type: 0,
|
|
pipe_type: 0,
|
|
valve_type: 0,
|
|
fcu_count: 0,
|
|
thermostat_count: 0,
|
|
},
|
|
panel_info: {
|
|
// 面板信息
|
|
panel_type: 0,
|
|
panel_count: 0,
|
|
panel_button_count: 0,
|
|
},
|
|
curtain_info: {
|
|
// 窗帘信息
|
|
curtain_type: 0,
|
|
curtain_count: 0,
|
|
sheer_curtain_count: 0,
|
|
},
|
|
other: {
|
|
// 其他信息
|
|
PIR: 0,
|
|
PIR2: 0,
|
|
Gate: 0,
|
|
Window: 0,
|
|
doorbell: 0,
|
|
Housekeeping: 0,
|
|
},
|
|
});
|
|
|
|
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 (
|
|
res.data.content &&
|
|
Array.isArray(res.data.content) &&
|
|
res.data.content.length > 0
|
|
) {
|
|
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.base_info.room_name !== item.base_info.room_name;
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
get_project();
|
|
});
|
|
|
|
const select_room = (item) => {
|
|
for (const key in item) {
|
|
current_room_info[key] = item[key];
|
|
}
|
|
};
|
|
const add_room = () => {
|
|
if (!Array.isArray(project.content)) {
|
|
project.content = [];
|
|
}
|
|
let target = JSON.parse(JSON.stringify(addData));
|
|
target.base_info.room_name = "房型" + generateShortUUID();
|
|
project.content.push(target);
|
|
};
|
|
|
|
const save_room = async () => {
|
|
const param = {
|
|
action: 1021,
|
|
data: project,
|
|
};
|
|
const res = await myApi.getProjects(param);
|
|
if (res.code === 0) {
|
|
ElMessage({
|
|
message: "保存成功",
|
|
type: "success",
|
|
});
|
|
get_project();
|
|
} else {
|
|
ElMessage({
|
|
message: res.message + "[" + res.data + "]",
|
|
type: "warning",
|
|
});
|
|
}
|
|
};
|
|
|
|
const exc = async () => {
|
|
const param = {
|
|
action: 90001,
|
|
data: project,
|
|
};
|
|
try {
|
|
const res = await myApi.download(param);
|
|
console.log(res);
|
|
if (1) {
|
|
// 文件下载成功
|
|
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = 'xx.xlsx'; // 设置下载的文件名
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
window.URL.revokeObjectURL(url);
|
|
ElMessage({
|
|
message: "保存成功",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
// 下载失败，显示错误信息
|
|
ElMessage({
|
|
message: res.message + "[" + res.data + "]",
|
|
type: "warning",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
// 捕获并处理可能的错误
|
|
console.error("Error downloading file:", error);
|
|
ElMessage({
|
|
message: "下载文件时发生错误",
|
|
type: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
function generateShortUUID() {
|
|
let uuid = "";
|
|
const possible = "0123456789ABCDEF";
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
uuid += possible.charAt(Math.floor(Math.random() * possible.length));
|
|
}
|
|
|
|
return uuid;
|
|
}
|
|
|
|
const goHome = () => {
|
|
save_room();
|
|
router.push("home");
|
|
};
|
|
|
|
const lightArr = reactive([
|
|
{
|
|
label: "开关回路",
|
|
value: 0,
|
|
key: "switching_circuit",
|
|
},
|
|
{
|
|
label: "0-10V调光",
|
|
value: 1,
|
|
key: "dimming_10v",
|
|
},
|
|
{
|
|
label: "前沿调光",
|
|
value: 2,
|
|
key: "dimming_leading_edge",
|
|
},
|
|
{
|
|
label: "后沿调光",
|
|
value: 3,
|
|
key: "dimming_trailing_edge",
|
|
},
|
|
{
|
|
label: "DALI灯",
|
|
value: 4,
|
|
key: "DALI",
|
|
},
|
|
]);
|
|
const otherArr = reactive([
|
|
{
|
|
label: "红外",
|
|
value: 0,
|
|
key: "PIR",
|
|
},
|
|
{
|
|
label: "双鉴红外",
|
|
value: 1,
|
|
key: "PIR2",
|
|
},
|
|
{
|
|
label: "门磁",
|
|
value: 2,
|
|
key: "Gate",
|
|
},
|
|
{
|
|
label: "窗磁",
|
|
value: 3,
|
|
key: "Window",
|
|
},
|
|
{
|
|
label: "门铃",
|
|
value: 4,
|
|
key: "doorbell",
|
|
},
|
|
{
|
|
label: "房务",
|
|
value: 5,
|
|
key: "Housekeeping",
|
|
},
|
|
]);
|
|
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,
|
|
},
|
|
]);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.room-div {
|
|
height: 800px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
>div:first-child {
|
|
width: 20%;
|
|
|
|
: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%;
|
|
|
|
: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;
|
|
}
|
|
|
|
: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>
|