nkClient/src/views/biz/energy/threshold/index.vue

<template>
	<a-card title="预警责任人" :bordered="false" style="margin-bottom: 10px">
		<template #extra>
			<a-space :size="10">
				<a-button type="primary" @click="savePerson">保存</a-button>
			</a-space>
		</template>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="inline">
			<div style="width: 100%">
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="3">
						<span>第一责任人</span>
					</a-col>
					<a-col :span="4">
						<a-form-item label="姓名" name="firstId">
							<a-select v-model:value="formData.firstId" placeholder="请选择人员" @change="firstChange">
								<a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="手机号" name="firstPhone">
							<a-input type="number" disabled v-model:value="formData.firstPhone" placeholder="请输入手机号"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="3">
						<span>第二责任人</span>
					</a-col>
					<a-col :span="4">
						<a-form-item label="姓名" name="twoId">
							<a-select v-model:value="formData.twoId"  @change="twoChange" placeholder="请选择人员">
								<a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="手机号" name="twoPhone">
							<a-input disabled v-model:value="formData.twoPhone" type="number" placeholder="请输入手机号"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="row_bottom" :gutter="5" align="middle">
					<a-col :span="2">
						<a-form-item name="warningUpgradeTime">
							<a-input v-model:value="formData.warningUpgradeTime" type="number"></a-input>
						</a-form-item>
					</a-col>
					<a-col>分钟内预警未排除，将自动转任务给一级责任人</a-col>
				</a-row>
			</div>
		</a-form>
	</a-card>
	<a-collapse v-model:activeKey="active" expand-icon-position="right" accordion>
		<a-collapse-panel v-for="item in thresholdList" :key="item.buildingId" :header="item.buildingName">
			<template #extra>
				<div @click.stop>
					<a-switch @change="checkedChange($event, item)" v-model:checked="item.checked">
						<template #checkedChildren><check-outlined /></template>
						<template #unCheckedChildren><close-outlined /></template>
					</a-switch>
				</div>
			</template>
			<template v-for="(i, k) in item.list">
				<a-collapse v-model:activeKey="activeKey" accordion style="margin-bottom: 10px" @change="changeKey($event, i, k)">
					<a-collapse-panel :key="i.unitId" :header="i.unitName" accordion>
						<template #extra>
							<a-space>
								<a-button type="primary" @click.stop="sync(i, k, item)">同步</a-button>
								<a-button type="primary" @click.stop="saveForm(i, k)">保存</a-button>
							</a-space>
						</template>
						<a-form :ref="'myForm' + k" :model="formSle" :rules="formRuleSle" :label-col="{ style: { width: '120px'} }">
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="用水下限" name="waterLower">
										<a-input v-model:value="formSle.waterLower" type="number">
											<template #addonAfter>
												<span>吨</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="用水上限" name="waterUpper">
										<a-input v-model:value="formSle.waterUpper" type="number">
											<template #addonAfter>
												<span>吨</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="用电下限" name="electricityLower">
										<a-input v-model:value="formSle.electricityLower" type="number">
											<template #addonAfter>
												<span>kw·h</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="用电上限" name="electricityUpper">
										<a-input v-model:value="formSle.electricityUpper" type="number">
											<template #addonAfter>
												<span>kw·h</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="七日用水下限" name="sevenDayWaterLower">
										<a-input v-model:value="formSle.sevenDayWaterLower" type="number">
											<template #addonAfter>
												<span>吨</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="七日用水上限" name="sevenDayWaterUpper">
										<a-input v-model:value="formSle.sevenDayWaterUpper" type="number">
											<template #addonAfter>
												<span>吨</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="七日用电上限" name="sevenDayElectricityLower">
										<a-input v-model:value="formSle.sevenDayElectricityLower" type="number">
											<template #addonAfter>
												<span>kw·h</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="七日用电下限" name="sevenDayElectricityUpper">
										<a-input v-model:value="formSle.sevenDayElectricityUpper" type="number">
											<template #addonAfter>
												<span>kw·h</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
						</a-form>
					</a-collapse-panel>
				</a-collapse>
			</template>
		</a-collapse-panel>
	</a-collapse>
</template>

<script setup name="energyThreshold">
	import bizEnergyThresholdApi from "@/api/biz/energy/bizEnergyThresholdApi"
	import bizWarnApi from "@/api/biz/bizWarnApi"
	import {required, rules} from "@/utils/formRules";
	import {message} from "ant-design-vue";

	const { proxy } = getCurrentInstance()
	const formRef = ref()
	const formData = ref({
		firstId: '',
		firstPhone: '',
		twoId: '',
		twoPhone: '',
		warningUpgradeTime: ''
	})
	const formRules = ref({
		firstId: [required('请选择姓名')],
		twoId: [required('请选择姓名')],
		warningUpgradeTime: [required('请输入时间'), rules.integer]
	})
	const personList = ref([])
	const initCrew = async () => {
		await bizWarnApi.getPersonList().then((res) => {
			personList.value = res
		})
	}

	const initPerson = async () => {
		let params = {
			type: 1
		}
		await bizWarnApi.getWarnPerson(params).then((res) => {
			formData.value = {
				firstId: res.firstManager[0]?.userId ? res.firstManager[0]?.userId : '',
				firstPhone: res.firstManager[0]?.phone ? res.firstManager[0]?.phone : '',
				twoId: res.secondManager[0]?.userId ? res.secondManager[0]?.userId : '',
				twoPhone: res.secondManager[0]?.phone ? res.secondManager[0]?.phone : '',
				warningUpgradeTime: res.warningUpgradeTime ? res.warningUpgradeTime : ''
			}
		})
	}

	const firstChange = (val) => {
		personList.value.forEach((item) => {
			if (item.id === val) {
				formData.value.firstPhone = item.phone
			}
		})
	}

	const twoChange = (val) => {
		personList.value.forEach((item) => {
			if (item.id === val) {
				formData.value.twoPhone = item.phone
			}
		})
	}

	const savePerson = () => {
		formRef.value.validate().then(() => {
			let params = {
				firstManagerId: formData.value.firstId,
				secondManagerId: formData.value.twoId,
				type: 1,
				warningUpgradeTime: formData.value.warningUpgradeTime
			}
			bizWarnApi.saveWarnPerson(params).then(() => {
				message.success('保存成功')
			})
		})
	}

	const active = ref('')
	const activeKey = ref('')
	const thresholdList = ref([])
	const initThreshold = () => {
		bizEnergyThresholdApi.getThresholdList().then((res) => {
			res.forEach(item => {
				item.checked = item.isEnable ? true : false
			})
			thresholdList.value = res
			if (res.length > 0) {
				active.value = res[0].buildingId
			}
		})
	}

	const checked = ref(true)

	const formSle = ref({})
	const myForm = ref()
	const changeKey = (val, item) => {
		if (val) {
			formSle.value = item
		}
	}
	const formRuleSle = ref({
		waterLower: [required('请输入用水下限'), rules.price],
		waterUpper: [required('请输入用水上限'), rules.price],
		electricityLower: [required('请输入用电下限'), rules.price],
		electricityUpper: [required('请输入用电上限'), rules.price],
		sevenDayWaterLower: [required('请输入七日用水下限'), rules.price],
		sevenDayWaterUpper: [required('请输入七日用水上限'), rules.price],
		sevenDayElectricityLower: [required('请输入七日用电上限'), rules.price],
		sevenDayElectricityUpper: [required('请输入七日用电下限'), rules.price]
	})
	const saveForm = (i, k) => {
		if (activeKey.value !== i.unitId) {
			message.error('请先打开在保存')
			return false
		} else {
			proxy.$refs['myForm' + k][0].validate().then(() => {
				let params = {
					unitId: formSle.value.unitId,
					waterLower: formSle.value.waterLower,
					waterUpper: formSle.value.waterUpper,
					electricityLower: formSle.value.electricityLower,
					electricityUpper: formSle.value.electricityUpper,
					sevenDayWaterLower: formSle.value.sevenDayWaterLower,
					sevenDayWaterUpper: formSle.value.sevenDayWaterUpper,
					sevenDayElectricityLower: formSle.value.sevenDayElectricityLower,
					sevenDayElectricityUpper: formSle.value.sevenDayElectricityUpper
				}
				bizEnergyThresholdApi.saveThreshold(params).then((res) => {
					message.success('保存成功')
				})
			})
		}
	}

	const checkedChange = (val, item) => {
		let params = {
			unitId: item.buildingId,
			isEnable: val ? 1 : 0
		}
		bizEnergyThresholdApi.updateThreshold(params).then(res => {
			message.success('修改成功')
		})
	}

	// 同步
	const sync = (i, k, item) => {
		if (activeKey.value !== i.unitId) {
			message.error('请先打开在同步')
			return false
		} else {
			proxy.$refs['myForm' + k][0].validate().then(() => {
				let params = {
					unitId: item.buildingId,
					waterLower: formSle.value.waterLower,
					waterUpper: formSle.value.waterUpper,
					electricityLower: formSle.value.electricityLower,
					electricityUpper: formSle.value.electricityUpper,
					sevenDayWaterLower: formSle.value.sevenDayWaterLower,
					sevenDayWaterUpper: formSle.value.sevenDayWaterUpper,
					sevenDayElectricityLower: formSle.value.sevenDayElectricityLower,
					sevenDayElectricityUpper: formSle.value.sevenDayElectricityUpper
				}
				bizEnergyThresholdApi.saveSync(params).then((res) => {
					message.success('同步成功')
					initThreshold()
				})
				// bizEnergyThresholdApi.saveThreshold(params).then((res) => {
				// 	message.success('保存成功')
				// })
			})
		}
	}

	onMounted(async () => {
		await initCrew()
		await initPerson()
		initThreshold()
	})
</script>

<style scoped>
	.row_bottom {
		margin-bottom: 10px;
	}
</style>