Files
energy_app/src/views/facilityManage/components/hotWaterSystem.vue
T
jiangyinzhi 04f0606430 能效诊断
2024-07-10 10:25:32 +08:00

750 lines
28 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<van-form ref="hot" :disabled="showForm">
<div class="focusAir">
<div class="focusItem">
<van-cell-group>
<Whether :value="formColumns.venueName" @onConfirmTrueFalse="onConfirmTrueFalse" title="涉及医院,场馆类或学校" required :rules="[{ required: true, message:'请选择' }]" feildName="venue" />
<van-field v-model="formColumns.energyTypeName" label="消耗能源类型" required :rules="[{ required: true, message:'请选择消耗能源类型' }]" is-link input-align="right" placeholder="请选择" readonly @click="energyTypeShow = !showForm" />
<van-field v-input.floatNo0 v-model="form.waterDay" required :rules="[{ required: true}]" label="日用水量(L)" type="number" input-align="right" placeholder="请输入" />
<van-field v-input.float v-model="form.setWaterWarm" required :rules="[{ required: true}]" label="设定水温(℃)" type="number" input-align="right" placeholder="请输入" @input="inputForSetWaterWarm"/>
<div class="tips" v-if="tips0 == true">35℃ ≤设定水温≤100℃</div>
<!-- <van-field v-model="form.useYear" label="变压器投运年限(年)" label-width="140" input-align="right" placeholder="请输入" is-link readonly @click="handelClickYear('useYear')" /> -->
<van-field v-model="formColumns.deviceTypeName" label="热水设备类型" required :rules="[{ required: true, message:'请选择热水设备类型' }]" input-align="right" placeholder="请选择" readonly is-link @click="deviceTypeShow = !showForm" />
<!-- 是否进行过设备改造 -->
<Whether required :rules="[{ required: true, message:'请选择设备改造' }]" :value="formColumns.waterModiyName" @onConfirmTrueFalse="onConfirmTrueFalse" feildName="waterModiy" special="1" />
<!-- 改造方式 -->
<ModifyMode
v-show="form.waterModiy == 1"
:columns="formColumns"
:list1="resultList"
:list2="spliceList"
:type="hotType"
feild="waterModiy"
:required="form.waterModiy == 1"
:form="form"
@onConfirmCheckbox="onConfirmCheckbox"
/>
<van-field v-show="modifyYearShow" required :rules="[{ required: modifyYearShow, message:'请选择年份' }]" v-model="form.modifyYear" label="增加设备智能化集中控制系统年份" label-width="220" input-align="right" is-link placeholder="请选择" readonly @click="handelClickYear('modifyYear')" />
<van-field v-show="intellectModifyYearShow" required :rules="[{ required: intellectModifyYearShow, message:'请选择年份' }]" v-model="form.intellectModifyYear" label="更换高能效设备,改造年份" label-width="220" input-align="right" is-link placeholder="请选择" readonly @click="handelClickYear('intellectModifyYear')" />
</van-cell-group>
</div>
<div :class="form.energyType ? 'search-main' : ''" v-for="item in searchList" :key="item.type">
<div class="focusItem" v-if="form.energyType">
<div class="title" v-if="item.type == '1'">
<van-icon name="chat-o" />运营类节能诊断问询
</div>
<div class="title" v-if="item.type == '2'">
<van-icon name="chat-o" />设备类节能诊断问询
</div>
<div class="wt" v-for="(ele, i) in item.child" :key="ele.enquireId">
<div class="wtItem">
<p>{{ ++i }}.{{ ele.enquireTitle }}</p>
<Radio :item="ele" :index="i" @handelClickOk="handelClickOk(ele, i)" @handelClickNo="handelClickNo(ele, item.child)" />
</div>
</div>
</div>
</div>
<!-- <div class="bottom"><van-button type="primary" block>保存</van-button></div> -->
<VanPickerNew :show="show" :columns="list" :loading="loading" @onConfirm="onConfirm" @onCancel="onCancel" />
<Year :show="yearShow" :num="1" @onConfirmYear="onConfirmYear" @onCancelYear="onCancelYear" />
<!-- 消耗能源类型 -->
<VanPickerNew :show="energyTypeShow">
<div class="content">
<div class="content-head">
<div @click="onCancelEnergyType">取消</div>
<div @click="onConfirmEnergyType">确认</div>
</div>
<div class="content-main">
<van-cell v-for="item in energyTypeList" :key="item.value" clickable :title="item.dict_label" style="font-weight: 400 !important; font-size: 15px !important">
<van-checkbox :name="item" checked-color="#009999" v-model="item.checked">
{{ item.text }}
</van-checkbox>
</van-cell>
</div>
</div>
</VanPickerNew>
<!-- 热水设备类型 -->
<VanPickerNew :show="deviceTypeShow">
<div class="content">
<div class="content-head">
<div @click="onCancelDeviceType">取消</div>
<div @click="onConfirmDeviceType">确认</div>
</div>
<div class="content-main">
<van-cell v-for="item in deviceTypeList" :key="item.value" clickable :title="item.dict_label" style="font-weight: 400 !important; font-size: 15px !important">
<van-checkbox :name="item" checked-color="#009999" v-model="item.checked">
{{ item.name }}
</van-checkbox>
</van-cell>
</div>
</div>
</VanPickerNew>
</div>
</van-form>
</template>
<script>
import VanPickerNew from '@/components/vanPickerNew'
import ModifyMode from '../common-vue/modifyMode.vue'
import Whether from '../common-vue/whether.vue'
import Year from '../common-vue/year.vue'
import mixin from '@/mixins/mixin'
import { dataMode } from '../common'
import { getCodeCommon } from '@/views/facilityManage/common'
import Radio from '../common-vue/radio.vue'
export default {
components: {
Radio,
Year,
ModifyMode,
Whether,
VanPickerNew,
},
mixins: [mixin],
data() {
return {
tips0: false,
typeId: this.$route.query.typeId,
tidCid: null,
//当前是何页面
page: {
name: '生活热水系统',
title: 'hotWater',
},
//用能设备id
eqid: '',
//页面双向绑定及向后端传递的数据
form: {
venue: '', //涉及医院等
energyType: '', //消耗能源类型
waterDay: '', //日用水量
setWaterWarm: '', //设定水温
deviceType: '', //热水设备类型
waterModiy: '2', //是否进行过设备改造
modifyMode: '', //改造方式
modifyYear: '', //增加主机智能化集中控制系统年份
useYear: '',
intellectModifyYear:''
},
//页面展示的中文名称
formColumns: {
heatModeName: '', //改造方式名称
energyTypeName: '', //消耗能源类型名称
deviceTypeName: '', //热水设备类型名称
venueName: '',
modifyModeName: '',
waterModiyName: '',
},
//改造方式的系统码表数据
hotType: {
id: 80000001028,
type: 'rsgzfs',
},
/**
* 复选框
*/
//改造方式选中
resultList: [],
//改造方式未选中
spliceList: [],
/**
* 询问
*/
useSearch: {
hotWaterEnquireDevIds: '', //设备类
hotWaterEnquireIds: '', //运营类
},
//问询的数据
searchList: [],
hotWaterEnquireDevIdsList: [], //设备类
hotWaterEnquireIdsList: [], //运营类
/**
* 消耗能源类型
*/
energyTypeShow: false,
//消耗能源类型数据
energyTypeList: [],
//消耗能源类型选中
resultCheckboxEnergy: [],
//消耗能源类型未选中
resultSpliceEnergy:[],
/**
* 热水设备类型
*/
deviceTypeShow: false,
//热水设备类型
deviceTypeList: [],
resultCheckboxDevice: [],
resultSpliceDevice: [],
modifyYearShow: false,
intellectModifyYearShow:false,
//定时器
edSet: null,
required: false
}
},
created() {
this.tidCid = JSON.parse(sessionStorage.getItem('tidCid'))
},
watch: {
deviceTypeList: function(newVal) {
if (newVal && newVal.length > 0) {
if (this.form.deviceType) {
const deChcekedList = this.form.deviceType.split(',')
const deData = newVal.filter((ele) => {
return deChcekedList.some((item) => item == ele.code)
})
this.formColumns.deviceTypeName = deData.map((ele) => {
ele.checked = true
return ele.name
}).join(',')
this.resultCheckboxDevice = deData
}
}
},
},
computed: {
showForm() {
if(this.tidCid.taskId) {
return false
}
return true
},
//如果选择为否,携带属性需要删除
notData() {
return {
waterModiy: {
formColumnsField: ['modifyModeName'],
formField: ['modifyMode', 'modifyYear','intellectModifyYear'],
isShow: ['modifyYearShow','intellectModifyYearShow'],
list: [],
}
}
}
},
mounted() {
this.$store.commit('pageData/GET_HOT', this.typeId)
this.editData()
},
beforeDestroy() {
clearTimeout(this.edSet)
this.clearData()
// this.setVuexData()
},
methods: {
//第二次进入页面查询vuex页面是否存储
// getVuexData() {
// for (const key in this.$store.getters.hotData) {
// for (const keys in this.$data) {
// if (key == keys) {
// this.$data[keys] = this.$store.getters.hotData[key]
// }
// }
// }
// },
clearData() {
for (const key in this.form) {
this.form[key] = ''
}
for (const key in this.formColumns) {
this.formColumns[key] = ''
}
for (const key in this.useSearch) {
this.useSearch[key] = ''
}
this.energyTypeShow = false
this.deviceTypeShow = false
this.modifyYearShow = false
this.resultList = []
this.spliceList = []
this.searchList = []
this.hotWaterEnquireDevIdsList = []
this.hotWaterEnquireIdsList = []
this.resultCheckboxEnergy = []
this.resultSpliceEnergy = []
this.resultCheckboxDevice = []
this.resultSpliceDevice = []
sessionStorage.removeItem('rsModifyName')
},
//修改覆写数据
async editData() {
//消耗能源类型
this.editDataEnergy()
//热水设备类型
this.editDatadevice()
this.edSet = setTimeout(async () => {
//前页面存起来的数据
const data = this.$store.getters.editData
//问询问题
const searchInfo = this.$store.getters.searchInfo
if (searchInfo) {
const res = dataMode(searchInfo['sbshrs'])
this.searchList = res
//运营类
if(data.info.hotWaterEnquireIds == '') {
const list1 = res.find((ele)=> ele.type == 1)
const dataList1 = list1.child.map((item)=> item.enquireId)
this.useSearch.hotWaterEnquireIds = dataList1.join(',')
this.hotWaterEnquireIdsList = dataList1
}
//设备类
if(data.info.hotWaterEnquireDevIds == '') {
const list1 = res.find((ele)=> ele.type == 2)
const dataList1 = list1.child.map((item)=> item.enquireId)
this.useSearch.hotWaterEnquireDevIds = dataList1.join(',')
this.hotWaterEnquireDevIdsList = dataList1
}
this.$store.commit('search/SET_HOT', this.useSearch)
}
//判断如果为修改状态
if (data.pageKey) {
//获取当前用能设备id
this.eqid = data.info.equipId
// 判断后端是否存在配电页面的数据
if (data.info.nxzdHotWaterSystemDTO) {
for (const key in data.info.nxzdHotWaterSystemDTO) {
for (const keys in this.form) {
if (key == keys) {
this.form[keys] = data.info.nxzdHotWaterSystemDTO[key]
}
}
}
if(this.form.modifyYear) {
this.modifyYearShow = true
}
if(this.form.intellectModifyYear) {
this.intellectModifyYearShow = true
}
//判断是否
this.editIsTrue()
//消耗能源类型
this.editDataEnergy()
//热水设备类型
this.editDatadevice()
//改造方式
this.editDataModify()
//问询
this.editSearch(data)
} else {
for (const key in this.form) {
this.form[key] = ''
this.formColumns[key + 'Name'] = ''
}
}
return
}
}, 250)
},
/**
* editData消耗能源类型
*/
async editDataEnergy() {
const energyInfo = {
id: 80000001026,
type: 'xhnylx',
}
const energyTypeList = await getCodeCommon(energyInfo)
energyTypeList.forEach((v) => {
v.checked = false
})
this.energyTypeList = energyTypeList
if (energyTypeList && energyTypeList.length > 0) {
if (this.form.energyType) {
const enChcekedList = this.form.energyType.split(',')
const enData = energyTypeList.filter((ele) => {
return enChcekedList.some((item) => item == ele.code)
})
this.formColumns.energyTypeName = enData.map((ele) => {
ele.checked = true
return ele.name
}).join(',')
this.resultCheckboxEnergy = enData
}
}
},
/**
* editData改造方式
*/
editDataModify() {
if(this.form.modifyMode) {
const data = this.form.modifyMode.split(',').find((ele)=> ele == 1)
const data2 = this.form.modifyMode.split(',').find((ele)=> ele == 2)
if(data) {
this.modifyYearShow = true
}
if(data2) {
this.intellectModifyYearShow = true
}
}
if (this.form.modifyMode) {
this.resultList = this.form.modifyMode.split(',')
setTimeout(() => {
const mNameData = JSON.parse(sessionStorage.getItem('rsModifyName'))
if (mNameData) {
this.formColumns.modifyModeName = mNameData.map((ele) => ele.name).join(',')
}
}, 500)
}
},
/**
* editData热水设备类型
*/
async editDatadevice() {
const deviceInfo = {
id: 80000001027,
type: 'rssblx',
}
const deviceTypeList = await getCodeCommon(deviceInfo)
this.getDeviceTypeList(deviceTypeList)
},
/**
* editData判断是否
*/
editIsTrue() {
/**
* 判断是否
*/
const list = [{
id: '1',
name: '是',
},
{
id: '2',
name: '否',
},
]
const obj = list.find((v) => v.id == this.form.venue)
const obj1 = list.find((v) => v.id == this.form.waterModiy)
if (obj) {
this.formColumns.venueName = obj.name
}
if (obj1) {
this.formColumns.waterModiyName = obj1.name
}
},
/**
* editData 问询
*/
editSearch(data) {
/**
* 询问回显
*/
//设备类
if (data.info.hotWaterEnquireDevIds && this.searchList.length > 0) {
const devList = data.info.hotWaterEnquireDevIds.split(',')
this.useSearch.hotWaterEnquireDevIds =
data.info.hotWaterEnquireDevIds
this.hotWaterEnquireDevIdsList = devList
this.searchList[1].child.forEach((ele) => {
ele.color = false
devList.forEach((item) => {
if (item == ele.enquireId) {
ele.color = true
}
})
})
}
//运营类
if (data.info.hotWaterEnquireIds && this.searchList.length > 0) {
const devList = data.info.hotWaterEnquireIds.split(',')
this.useSearch.hotWaterEnquireIds = data.info.hotWaterEnquireIds
this.hotWaterEnquireIdsList = devList
this.searchList[0].child.forEach((ele) => {
ele.color = false
devList.forEach((v) => {
if (v == ele.enquireId) {
ele.color = true
}
})
})
}
this.$store.commit('search/SET_HOT', this.useSearch)
},
// setVuexData() {
// this.$store.commit('pageData/CURRENT_HOT_DATA', this.$data)
// },
//递归拆分数据
getDeviceTypeList(list) {
const list1 = JSON.parse(JSON.stringify(list))
let arr = []
list1.forEach((v) => {
if (!v.child) {
arr.push(v)
}
if (v.child) {
v.child.forEach((ev) => {
arr.push(ev)
})
this.getDeviceTypeList(v.child)
}
})
arr.forEach((v) => {
v.checked = false
})
this.deviceTypeList = arr
},
/**
* 消耗能源类型
*/
onCancelEnergyType() {
this.energyTypeList.forEach((v)=>{
this.resultSpliceEnergy.forEach((sv)=>{
if(v.value == sv.value) {
v.checked = false
}
})
this.resultCheckboxEnergy.forEach((rv)=>{
if(v.value == rv.value) {
v.checked = true
}
})
})
this.energyTypeShow = false
},
onConfirmEnergyType() {
const enName = this.energyTypeList.filter((ele) => ele.checked)
const enameF = this.energyTypeList.filter((ele) => !ele.checked)
this.resultCheckboxEnergy = enName
this.resultSpliceEnergy = enameF
this.formColumns.energyTypeName = enName.map((ele) => ele.name).join(',')
this.form.energyType = this.resultCheckboxEnergy.map((ele) => ele.value).join(',')
this.energyTypeShow = false
},
/**
* 热水设备类型
*/
onCancelDeviceType() {
this.deviceTypeList.forEach((v)=>{
this.resultSpliceDevice.forEach((sv)=>{
if(v.value == sv.value) {
v.checked = false
}
})
this.resultCheckboxDevice.forEach((rv)=>{
if(v.value == rv.value) {
v.checked = true
}
})
})
this.deviceTypeShow = false
},
onConfirmDeviceType() {
const devName = this.deviceTypeList.filter((ele) => ele.checked)
const devameF = this.deviceTypeList.filter((ele) => !ele.checked)
this.resultCheckboxDevice = devName
this.resultSpliceDevice = devameF
this.formColumns.deviceTypeName = this.resultCheckboxDevice.map((ele) => ele.name).join(',')
this.form.deviceType = this.resultCheckboxDevice.map((ele) => ele.value).join(',')
this.deviceTypeShow = false
},
/**
* 闻讯
*/
//询问选择为是
handelClickOk(ele, i) {
if(this.showForm) {
return
}
if (ele.enquireType == '2' && !ele.color) {
this.hotWaterEnquireDevIdsList.splice( i-1, 1, ele.enquireId)
ele.color = true
}
if (ele.enquireType == '1' && !ele.color) {
this.hotWaterEnquireIdsList.splice( i-1, 1, ele.enquireId)
ele.color = true
}
this.useSearch.hotWaterEnquireDevIds = this.hotWaterEnquireDevIdsList.join(',')
this.useSearch.hotWaterEnquireIds = this.hotWaterEnquireIdsList.join(',')
this.$store.commit('search/SET_HOT', this.useSearch)
},
//询问选择为否
handelClickNo(ele, list) {
if(this.showForm) {
return
}
if (ele.enquireType == '2' && ele.color) {
const index = this.hotWaterEnquireDevIdsList.findIndex((v) => v == ele.enquireId)
if(index == -1) {
this.hotWaterEnquireDevIdsList = list.map((item)=> {
if(ele.enquireId == item.enquireId) {
return item.noId
}
return item.enquireId
})
this.useSearch.hotWaterEnquireDevIds = this.hotWaterEnquireDevIdsList.join(',')
const elseItem = this.searchList.find((ele)=> ele.type == '1')
this.useSearch.hotWaterEnquireIds = elseItem.child.map((ele)=> {
if(ele.color) {
return ele.enquireId
} else {
return ele.noId
}
}).join(',')
ele.color = false
} else {
this.hotWaterEnquireDevIdsList.splice(index, 1, ele.noId)
this.useSearch.hotWaterEnquireDevIds = this.hotWaterEnquireDevIdsList.join(',')
const elseItem = this.searchList.find((ele)=> ele.type == '1')
this.useSearch.hotWaterEnquireIds = elseItem.child.map((ele)=> {
if(ele.color) {
return ele.enquireId
} else {
return ele.noId
}
}).join(',')
ele.color = false
}
}
if (ele.enquireType == '1' && ele.color) {
const index = this.hotWaterEnquireIdsList.findIndex((v) => v == ele.enquireId)
if(index == -1) {
this.hotWaterEnquireIdsList = list.map((item)=> {
if(ele.enquireId == item.enquireId) {
return item.noId
}
return item.enquireId
})
this.useSearch.hotWaterEnquireIds = this.hotWaterEnquireIdsList.join(',')
const elseItem = this.searchList.find((ele)=> ele.type == '2')
this.useSearch.hotWaterEnquireDevIds = elseItem.child.map((ele)=> {
if(ele.color) {
return ele.enquireId
} else {
return ele.noId
}
}).join(',')
ele.color = false
} else {
this.hotWaterEnquireIdsList.splice(index, 1, ele.noId)
this.useSearch.hotWaterEnquireIds = this.hotWaterEnquireIdsList.join(',')
const elseItem = this.searchList.find((ele)=> ele.type == '2')
this.useSearch.hotWaterEnquireDevIds = elseItem.child.map((ele)=> {
if(ele.color) {
return ele.enquireId
} else {
return ele.noId
}
}).join(',')
ele.color = false
}
}
this.$store.commit('search/SET_HOT', this.useSearch)
},
//点击改造方式确认
onConfirmCheckbox(data) {
this.modifyYearShow = false
this.intellectModifyYearShow = false
data.delList.forEach((v)=> {
if(!v.checked && v.value == 1) {
this.form.modifyYear = ''
}
if(!v.checked && v.value == 2) {
this.form.intellectModifyYear = ''
}
})
data.id.forEach((v) => {
if (v == 1) {
this.modifyYearShow = true
}
if (v == 2) {
this.intellectModifyYearShow = true
}
})
this.formColumns.modifyModeName = data.name.join(',')
this.form.modifyMode = data.id.join(',')
},
// 设定水温添加方法
inputForSetWaterWarm() {
let warm = Number(this.form.setWaterWarm)
if(warm&&(warm < 35 || warm > 100)){
this.tips0 = true
}else{
this.tips0 = false
}
},
handleClickInput() {
this.$router.push({ path: '/facilityManage/list' })
},
},
}
</script>
<style lang="less" scoped>
@import '../common-vue/common.less';
@import '../common-vue/checkbox.less';
.focusAir {
padding: 0 15px;
.bottom {
margin-top: 20px;
border-radius: 10px;
overflow: auto;
}
}
.focusItem {
border-radius: 8px;
overflow: auto;
.addTitleLeft {
flex: 0 0 220px;
}
}
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
/deep/ .van-field__error-message {
text-align: right;
}
.tips {
padding: 0 16px;
display: flex;
justify-content: flex-end;
color: #ee0a24;
font-size: 12px;
}
</style>