You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
557 lines
17 KiB
557 lines
17 KiB
<template> |
|
<div> |
|
<div style="user-select: none; |
|
height: 40px; |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
padding: 0 10px; |
|
margin-bottom: 10px; |
|
-webkit-box-sizing: border-box; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
border-top: 1px solid #f6f6f6; |
|
background-color: #fff; |
|
-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); |
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);"> |
|
<div style="height: 100%; |
|
border-bottom: 3px solid #409EFF; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 10px; |
|
font-family: Arial,sans-serif; |
|
font-size: 15px; |
|
color: #409EFF;"> |
|
{{routeName == '' ? '系统设置' : routeName}} |
|
</div> |
|
</div> |
|
<div class="setting-block"> |
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
<el-tab-pane label="当前模式" name="first"> |
|
<el-form |
|
:model="ruleForm" |
|
:rules="rules" |
|
ref="ruleForm" |
|
label-width="100px" |
|
class="demo-ruleForm" |
|
> |
|
<el-form-item label="当前模式" prop="mode"> |
|
<el-radio-group v-model="ruleForm.mode"> |
|
<el-radio label="1">夏季模式</el-radio> |
|
<el-radio label="2">冬季模式</el-radio> |
|
<el-radio label="0">关闭</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" @click="submitForm('ruleForm')" |
|
>提交</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</el-tab-pane> |
|
<el-tab-pane label="额定人数" name="second"> |
|
<el-tabs v-model="areaIndex" @tab-click="changeArea"> |
|
<el-tab-pane label="业务区" name="1"> |
|
<el-form |
|
:model="ruleForm1" |
|
:rules="rules1" |
|
ref="ruleForm1" |
|
label-width="120px" |
|
class="demo-ruleForm" |
|
> |
|
<el-form-item label="总人数" prop="total"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.total" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="一号楼额定人数" prop="floorOne"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.floorOne" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="二号楼额定人数" prop="floorTwo"> |
|
<el-input disabled |
|
size="small" |
|
v-model="ruleForm1.floorTwo" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="三号楼额定人数" prop="floorThree"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.floorThree" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="四号楼额定人数" prop="floorFour"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.floorFour" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="五号楼额定人数" prop="floorFive"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.floorFive" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="六号楼额定人数" prop="floorSix"> |
|
<el-input |
|
size="small" |
|
v-model="ruleForm1.floorSix" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" @click="submitForm('ruleForm1')" |
|
>提交</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</el-tab-pane> |
|
<el-tab-pane label="塔台" name="2"> |
|
<el-form |
|
:model="towerRuleForm1" |
|
:rules="towerRules1" |
|
ref="towerRuleForm1" |
|
label-width="120px" |
|
class="demo-ruleForm" |
|
> |
|
<el-form-item label="总人数" prop="total"> |
|
<el-input |
|
size="small" |
|
v-model="towerRuleForm1.total" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="塔楼额定人数" prop="floorOne"> |
|
<el-input |
|
size="small" |
|
v-model="towerRuleForm1.floorOne" |
|
style="width: 200px" |
|
> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item label="辅楼额定人数" prop="floorTwo"> |
|
<el-input |
|
size="small" |
|
v-model="towerRuleForm1.floorTwo" |
|
style="width: 200px" |
|
> |
|
</el-input> |
|
</el-form-item> |
|
|
|
<el-form-item> |
|
<el-button type="primary" @click="submitForm('towerRuleForm1')" |
|
>提交</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</el-tab-pane> |
|
<el-tab-pane label="园区面积" name="third"> |
|
<el-form |
|
:model="areaForm" |
|
:rules="areaRules" |
|
ref="areaForm" |
|
label-width="120px" |
|
class="demo-ruleForm" |
|
> |
|
<el-form-item label="业务区室内面积" prop="ywqAreaIn"> |
|
<el-input |
|
size="small" |
|
v-model="areaForm.ywqAreaIn" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="业务区室外面积" prop="ywqAreaOut"> |
|
<el-input |
|
size="small" |
|
v-model="areaForm.ywqAreaOut" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="塔台室内面积" prop="ttAreaIn"> |
|
<el-input |
|
size="small" |
|
v-model="areaForm.ttAreaIn" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="塔台室外面积" prop="ttAreaOut"> |
|
<el-input |
|
size="small" |
|
v-model="areaForm.ttAreaOut" |
|
style="width: 200px" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" @click="submitForm('areaForm')" |
|
>提交</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { setWarmMode, getWarmMode } from "@/api/garden/monitoring"; |
|
import { getPeople, setPeople, getArea, setArea } from "@/api/source/total"; |
|
export default { |
|
data() { |
|
return { |
|
routeName:'', |
|
activeName: "first", //模式/人数/面积 |
|
areaIndex: "1", //业务区/塔台人数 |
|
ruleForm: { |
|
//模式 |
|
mode: "1", |
|
}, |
|
towerRuleForm1: { |
|
//塔台人数 |
|
total: "", //总 |
|
floorOne: "", //塔楼 |
|
floorTwo: "", //辅楼 |
|
}, |
|
ruleForm1: { |
|
total: "", //业务区 总 |
|
floorOne: "", //业务区 一号楼 |
|
floorTwo: "", //业务区 二号楼 |
|
floorThree: "", |
|
floorFour: "", |
|
floorFive: "", |
|
floorSix: "", |
|
}, |
|
areaForm: { |
|
//面积 |
|
ywqAreaIn: "", //业务区室内面积 |
|
ywqAreaOut: "", //业务区室外面积 |
|
ttAreaIn: "", //塔台室内面积 |
|
ttAreaOut: "", //塔台室外面积 |
|
}, |
|
rules: { |
|
//模式 |
|
mode: [ |
|
{ |
|
required: true, |
|
message: "请选择当前模式", |
|
trigger: "change", |
|
}, |
|
], |
|
}, |
|
rules1: { |
|
//人数 业务区 |
|
total: [ |
|
{ |
|
required: true, |
|
message: "请输入总人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorOne: [ |
|
{ |
|
required: true, |
|
message: "请输入一号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorTwo: [ |
|
{ |
|
required: true, |
|
message: "请输入二号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorThree: [ |
|
{ |
|
required: true, |
|
message: "请输入三号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorFour: [ |
|
{ |
|
required: true, |
|
message: "请输入四号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorFive: [ |
|
{ |
|
required: true, |
|
message: "请输入五号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorSix: [ |
|
{ |
|
required: true, |
|
message: "请输入六号楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
}, |
|
towerRules1: { |
|
//塔台人数 |
|
total: [ |
|
{ |
|
required: true, |
|
message: "请输入总人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorOne: [ |
|
{ |
|
required: true, |
|
message: "请输入塔楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
floorTwo: [ |
|
{ |
|
required: true, |
|
message: "请输入辅楼额定人数", |
|
trigger: "change", |
|
}, |
|
], |
|
}, |
|
areaRules: { |
|
//面积 |
|
ywqAreaIn: [ |
|
{ |
|
required: true, |
|
message: "请输入业务区室内面积", |
|
trigger: "change", |
|
}, |
|
], |
|
ywqAreaOut: [ |
|
{ |
|
required: true, |
|
message: "请输入业务区室外面积", |
|
trigger: "change", |
|
}, |
|
], |
|
ttAreaIn: [ |
|
{ |
|
required: true, |
|
message: "请输入塔台室内面积", |
|
trigger: "change", |
|
}, |
|
], |
|
ttAreaOut: [ |
|
{ |
|
required: true, |
|
message: "请输入塔台室外面积", |
|
trigger: "change", |
|
}, |
|
], |
|
}, |
|
}; |
|
}, |
|
mounted() { |
|
this.routeName = this.$route.name |
|
this.getWarmMode(); |
|
}, |
|
methods: { |
|
handleClick(tab, event) { |
|
this.activeName = tab.name; |
|
if (this.activeName == "second") { |
|
this.getPeople(); |
|
} else if (this.activeName == "third") { |
|
this.getArea(); |
|
} else { |
|
this.getWarmMode(); |
|
} |
|
}, |
|
changeArea(tab, event) { |
|
this.areaIndex = tab.name; |
|
this.getPeople(); |
|
}, |
|
//园区人数查询 |
|
getPeople() { |
|
getPeople(this.areaIndex).then((res) => { |
|
//获取园区人数 |
|
if (res.data.code == 200) { |
|
const data = res.data.data; |
|
if (this.areaIndex == 1) { |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].dictKey == "0") { |
|
this.ruleForm1.total = data[i].dictValue; |
|
} else if (data[i].dictKey == "1") { |
|
this.ruleForm1.floorOne = data[i].dictValue; |
|
} else if (data[i].dictKey == "2") { |
|
this.ruleForm1.floorTwo = data[i].dictValue; |
|
} else if (data[i].dictKey == "3") { |
|
this.ruleForm1.floorThree = data[i].dictValue; |
|
} else if (data[i].dictKey == "4") { |
|
this.ruleForm1.floorFour = data[i].dictValue; |
|
} else if (data[i].dictKey == "5") { |
|
this.ruleForm1.floorFive = data[i].dictValue; |
|
} else if (data[i].dictKey == "6") { |
|
this.ruleForm1.floorSix = data[i].dictValue; |
|
} |
|
} |
|
} else { |
|
this.towerRuleForm1 = { |
|
total: "", //总 |
|
floorOne: "", //塔楼 |
|
floorTwo: "", //辅楼 |
|
}; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].dictKey == "100") { |
|
this.towerRuleForm1.total = data[i].dictValue; |
|
} else if (data[i].dictKey == "101") { |
|
this.towerRuleForm1.floorOne = data[i].dictValue; |
|
} else if (data[i].dictKey == "102") { |
|
this.towerRuleForm1.floorTwo = data[i].dictValue; |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
}, |
|
//园区面积 |
|
getArea() { |
|
getArea().then((res) => { |
|
const data = res.data.data; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].dictKey == "10") { |
|
this.areaForm.ywqAreaIn = data[i].dictValue; |
|
} else if (data[i].dictKey == "11") { |
|
this.areaForm.ywqAreaOut = data[i].dictValue; |
|
} else if (data[i].dictKey == "20") { |
|
this.areaForm.ttAreaIn = data[i].dictValue; |
|
} else if (data[i].dictKey == "21") { |
|
this.areaForm.ttAreaOut = data[i].dictValue; |
|
} |
|
} |
|
}); |
|
}, |
|
//耗热模式 |
|
getWarmMode() { |
|
getWarmMode().then((res) => { |
|
const data = res.data.data; |
|
this.ruleForm.mode = data.dictValue; |
|
}); |
|
}, |
|
submitForm(formName) { |
|
this.$refs[formName].validate((valid) => { |
|
if (valid) { |
|
if (formName == "ruleForm") { |
|
setWarmMode(this.ruleForm.mode).then((res) => { |
|
if (res.data.code == 200) { |
|
this.$message.success("提交成功！"); |
|
} |
|
}); |
|
} else { |
|
let arr = []; |
|
if (formName == "ruleForm1") { |
|
arr = [ |
|
{ |
|
dictKey: 0, |
|
dictValue: this.ruleForm1.total, |
|
}, |
|
{ |
|
dictKey: 1, |
|
dictValue: this.ruleForm1.floorOne, |
|
}, |
|
{ |
|
dictKey: 2, |
|
dictValue: this.ruleForm1.floorTwo, |
|
}, |
|
{ |
|
dictKey: 3, |
|
dictValue: this.ruleForm1.floorThree, |
|
}, |
|
{ |
|
dictKey: 4, |
|
dictValue: this.ruleForm1.floorFour, |
|
}, |
|
{ |
|
dictKey: 5, |
|
dictValue: this.ruleForm1.floorFive, |
|
}, |
|
{ |
|
dictKey: 6, |
|
dictValue: this.ruleForm1.floorSix, |
|
}, |
|
]; |
|
} else if (formName == "towerRuleForm1") { |
|
arr = [ |
|
{ |
|
dictKey: 100, |
|
dictValue: this.towerRuleForm1.total, |
|
}, |
|
{ |
|
dictKey: 101, |
|
dictValue: this.towerRuleForm1.floorOne, |
|
}, |
|
{ |
|
dictKey: 102, |
|
dictValue: this.towerRuleForm1.floorTwo, |
|
}, |
|
]; |
|
} else if (formName == "areaForm") { |
|
arr = [ |
|
{ |
|
dictKey: 10, |
|
dictValue: this.areaForm.ywqAreaIn, |
|
}, |
|
{ |
|
dictKey: 11, |
|
dictValue: this.areaForm.ywqAreaOut, |
|
}, |
|
{ |
|
dictKey: 20, |
|
dictValue: this.areaForm.ttAreaIn, |
|
}, |
|
{ |
|
dictKey: 21, |
|
dictValue: this.areaForm.ttAreaOut, |
|
}, |
|
]; |
|
} |
|
if (this.activeName == "second") { |
|
setPeople(JSON.stringify(arr), this.areaIndex).then((res) => { |
|
if (res.data.code == 200) { |
|
this.$message.success("提交成功！"); |
|
this.$refs[formName].resetFields(); |
|
this.getPeople(); |
|
} |
|
}); |
|
} else if (this.activeName == "third") { |
|
setArea(JSON.stringify(arr), this.areaIndex).then((res) => { |
|
if (res.data.code == 200) { |
|
this.$message.success("提交成功！"); |
|
this.$refs[formName].resetFields(); |
|
this.getArea(); |
|
} |
|
}); |
|
} |
|
} |
|
} else { |
|
console.log("error submit!!"); |
|
return false; |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.setting-block { |
|
width: 90%; |
|
margin: 40px 5%; |
|
} |
|
</style>
|
|
|