mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

能源需求修改

Browse Source
This commit is contained in:
朱菊兰
2024-04-02 16:54:36 +08:00
parent cea7fb622f
commit 94c7f803cc
20 changed files with 3816 additions and 3422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

624
src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue
View File

@@ -1,282 +1,360 @@
<template>
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
<el-row>
<el-col :span="12">
<el-form-item label="抄表方式" prop="method">
<el-select v-model="form.method" placeholder="请选择" style="width: 100%;" @change="changeMethod">
<el-option
v-for="item in getDictDatas(DICT_TYPE.METHOD)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if='form.method == 1'>
<el-form-item label="监控对象" prop="objectId">
<el-cascader
style='width: 100%;'
v-model="objIds"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
@change="selectObj"
clearable></el-cascader>
</el-form-item>
</el-col>
<el-col :span="12" v-if='form.method == 2'>
<el-form-item label="水/气表名" prop="tableName">
<el-select v-model="form.tableName" placeholder="请选择" style="width: 100%;">
<el-option
v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监控能源类型" prop="energyTypeId">
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" filterable @change="toggleType">
<el-option
v-for="item in this.energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if='form.method == 1'>
<el-form-item label="监控模式" prop="type">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
<el-option label="合并" :value= "1" ></el-option>
<el-option label="详细" :value= "2" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if='form.method == 1'>
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="指标类型" prop="limitType">
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;" :disabled='form.method == 2'>
<el-option
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="消耗量阈值">
<el-input-number v-model="form.minValue" placeholder="最小值" :max="9999999" style="width: 50%;"></el-input-number>
<el-input-number v-model="form.maxValue" placeholder="最大值" :max="9999999" style="width: 50%;"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form
ref="form"
:rules="rules"
label-width="110px"
:model="form">
<el-row>
<el-col :span="12">
<el-form-item
label="抄表方式"
prop="method">
<el-select
v-model="form.method"
placeholder="请选择"
style="width: 100%"
@change="changeMethod">
<el-option
v-for="item in getDictDatas(DICT_TYPE.METHOD)"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col
:span="12"
v-if="form.method == 1">
<el-form-item
label="监控对象"
prop="objectId">
<el-cascader
style="width: 100%"
v-model="objIds"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
@change="selectObj"
clearable></el-cascader>
</el-form-item>
</el-col>
<el-col
:span="12"
v-if="form.method == 2">
<el-form-item
label="能源表名"
prop="tableName">
<el-select
v-model="form.tableName"
placeholder="请选择"
style="width: 100%">
<el-option
v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="监控能源类型"
prop="energyTypeId">
<el-select
v-model="form.energyTypeId"
placeholder="请选择"
style="width: 100%"
filterable
@change="toggleType">
<el-option
v-for="item in this.energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col
:span="12"
v-if="form.method == 1">
<el-form-item
label="监控模式"
prop="type">
<el-select
v-model="form.type"
placeholder="请选择"
style="width: 100%"
@change="typeChange">
<el-option
label="合并"
:value="1"></el-option>
<el-option
label="详细"
:value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col
:span="12"
v-if="form.method == 1">
<el-form-item
label="监控详细参数"
prop="type"
v-if="form.type === 2">
<el-select
v-model="form.plcParamId"
placeholder="请选择"
style="width: 100%"
@change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="指标类型"
prop="limitType">
<el-select
v-model="form.limitType"
placeholder="请选择"
style="width: 100%"
:disabled="form.method == 2">
<el-option
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="消耗量阈值">
<el-input-number
v-model="form.minValue"
placeholder="最小值"
:max="9999999"
style="width: 50%"></el-input-number>
<el-input-number
v-model="form.maxValue"
placeholder="最大值"
:max="9999999"
style="width: 50%"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
import {
getEnergyLimit,
updateEnergyLimit,
createEnergyLimit,
getEnergyParamList,
} from '@/api/monitoring/energyLimit';
export default {
name: 'energyLimitAdd',
props: {
energyTypeList: {
type: Array,
required: true,
default: () => {
return []
}
},
objList: {
type: Array,
default: () => []
}
},
data() {
return {
form: {
id: '',
method: '1',
objectId: '',
objectType: '',
energyTypeId: '',
type: '',
plcParamId: '',
limitType: '',
minValue: 0,
maxValue: 0
},
objIds: [],// 回显数组
isEdit: false, //是否是编辑
rules: {
method: [{ required: true, message: '抄表方式不能为空', trigger: 'change' }],
objectId: [{ required: true, message: '监控对象不能为空', trigger: 'change' }],
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }],
limitType: [{ required: true, message: '指标类型不能为空', trigger: 'change' }]
},
detailList: []
}
},
methods: {
init(id) {
if (id) {
this.isEdit = true
this.form.id = id
getEnergyLimit( id ).then((res) => {
if (res.code === 0) {
this.form = res.data
this.form.plcParamId = res.data.plcParamId || ''
this.form.method = this.form.method ? this.form.method + '' : ''
this.form.limitType = this.form.limitType ? this.form.limitType + '' : ''
this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
if (this.form.type === 2) {
this.getDetailList()
}
}
})
} else {
this.isEdit = false
this.form.id = ''
}
},
// 切换方式
changeMethod() {
if(this.form.method === '2'){
this.form.limitType = "2"
}else{
this.form.limitType = ''
}
},
// 监控详细参数
getDetailList() {
getEnergyParamList({
objId: this.form.objectId,
energyTypeId: this.form.energyTypeId
}).then((res) => {
if (res.code === 0) {
this.detailList = res.data
} else {
this.detailList = []
}
})
},
typeChange(val) {
console.log(this.form)
this.form.plcParamId = ''
if (val === 2) {
if (this.form.objectId && this.form.energyTypeId) {
this.getDetailList()
}
}
},
toggleType() {
if (this.form.energyTypeId && this.form.type) {
this.getDetailList()
this.form.plcParamId = ''
}
},
// 递归处理分类回显问题
changeDetSelect(key, treeData) {
let arr = [] // 递归时操作的数组
let returnArr = [] // 存放结果的数组
let depth = 0 // 定义全局层级
// 定义递归函数
function childrenEach(childrendData, depthN) {
for (var j = 0; j < childrendData.length; j++) {
depth = depthN
arr[depthN] = childrendData[j].id
if (childrendData[j].id == key) {
returnArr = arr.slice(0, depthN + 1)
break
} else {
if (childrendData[j].children) {
depth++
childrenEach(childrendData[j].children, depth)
}
}
}
return returnArr
}
return childrenEach(treeData, depth)
},
selectObj(val) {
this.form.objectId = val[val.length-1]
this.form.objectType = val.length-1
if (this.form.energyTypeId && this.form.type) {
this.getDetailList()
this.form.plcParamId = ''
}
},
selectDetail() {
this.$forceUpdate()
},
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.type === 2 && !this.form.plcParamId) {
this.$modal.msgError("监控模式为详细时，详细参数为必填");
return false
}
if (this.form.minValue && this.form.maxValue) {
if (this.form.minValue > this.form.maxValue) {
this.$modal.msgError("消耗量阈值，最小值不能大于最大值");
return false
}
}
this.form.minValue = this.form.minValue || 0
this.form.maxValue = this.form.maxValue || 0
if (this.isEdit) {
// 编辑
updateEnergyLimit({...this.form}).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit')
}
})
} else {
createEnergyLimit({...this.form}).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit')
}
})
}
} else {
return false
}
})
},
formClear() {
this.$refs.form.resetFields()
this.form.type = ''
this.form.plcParamId = ''
this.form.minValue = null
this.form.maxValue = null
this.objIds = ''
this.detailList = []
this.isEdit = false
}
}
}
name: 'energyLimitAdd',
props: {
energyTypeList: {
type: Array,
required: true,
default: () => {
return [];
},
},
objList: {
type: Array,
default: () => [],
},
},
data() {
return {
form: {
id: '',
method: '1',
objectId: '',
objectType: '',
energyTypeId: '',
type: '',
plcParamId: '',
limitType: '',
minValue: 0,
maxValue: 0,
},
objIds: [], // 回显数组
isEdit: false, //是否是编辑
rules: {
method: [
{ required: true, message: '抄表方式不能为空', trigger: 'change' },
],
objectId: [
{ required: true, message: '监控对象不能为空', trigger: 'change' },
],
energyTypeId: [
{ required: true, message: '能源类型不能为空', trigger: 'change' },
],
type: [
{ required: true, message: '监控模式不能为空', trigger: 'change' },
],
limitType: [
{ required: true, message: '指标类型不能为空', trigger: 'change' },
],
},
detailList: [],
};
},
methods: {
init(id) {
if (id) {
this.isEdit = true;
this.form.id = id;
getEnergyLimit(id).then((res) => {
if (res.code === 0) {
this.form = res.data;
this.form.plcParamId = res.data.plcParamId || '';
this.form.method = this.form.method ? this.form.method + '' : '';
this.form.limitType = this.form.limitType
? this.form.limitType + ''
: '';
this.objIds = this.changeDetSelect(
this.form.objectId,
this.objList
);
if (this.form.type === 2) {
this.getDetailList();
}
}
});
} else {
this.isEdit = false;
this.form.id = '';
}
},
// 切换方式
changeMethod() {
if (this.form.method === '2') {
this.form.limitType = '2';
} else {
this.form.limitType = '';
}
},
// 监控详细参数
getDetailList() {
getEnergyParamList({
objId: this.form.objectId,
energyTypeId: this.form.energyTypeId,
}).then((res) => {
if (res.code === 0) {
this.detailList = res.data;
} else {
this.detailList = [];
}
});
},
typeChange(val) {
console.log(this.form);
this.form.plcParamId = '';
if (val === 2) {
if (this.form.objectId && this.form.energyTypeId) {
this.getDetailList();
}
}
},
toggleType() {
if (this.form.energyTypeId && this.form.type) {
this.getDetailList();
this.form.plcParamId = '';
}
},
// 递归处理分类回显问题
changeDetSelect(key, treeData) {
let arr = []; // 递归时操作的数组
let returnArr = []; // 存放结果的数组
let depth = 0; // 定义全局层级
// 定义递归函数
function childrenEach(childrendData, depthN) {
for (var j = 0; j < childrendData.length; j++) {
depth = depthN;
arr[depthN] = childrendData[j].id;
if (childrendData[j].id == key) {
returnArr = arr.slice(0, depthN + 1);
break;
} else {
if (childrendData[j].children) {
depth++;
childrenEach(childrendData[j].children, depth);
}
}
}
return returnArr;
}
return childrenEach(treeData, depth);
},
selectObj(val) {
this.form.objectId = val[val.length - 1];
this.form.objectType = val.length - 1;
if (this.form.energyTypeId && this.form.type) {
this.getDetailList();
this.form.plcParamId = '';
}
},
selectDetail() {
this.$forceUpdate();
},
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.type === 2 && !this.form.plcParamId) {
this.$modal.msgError('监控模式为详细时，详细参数为必填');
return false;
}
if (this.form.minValue && this.form.maxValue) {
if (this.form.minValue > this.form.maxValue) {
this.$modal.msgError('消耗量阈值，最小值不能大于最大值');
return false;
}
}
this.form.minValue = this.form.minValue || 0;
this.form.maxValue = this.form.maxValue || 0;
if (this.isEdit) {
// 编辑
updateEnergyLimit({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess('操作成功');
this.$emit('successSubmit');
}
});
} else {
createEnergyLimit({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess('操作成功');
this.$emit('successSubmit');
}
});
}
} else {
return false;
}
});
},
formClear() {
this.$refs.form.resetFields();
this.form.type = '';
this.form.plcParamId = '';
this.form.minValue = null;
this.form.maxValue = null;
this.objIds = '';
this.detailList = [];
this.isEdit = false;
},
},
};
</script>
<style>
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
display: none;
}
</style>