375 lines
8.9 KiB
Vue
375 lines
8.9 KiB
Vue
<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' }"
|
|
@change="selectObj"
|
|
clearable></el-cascader>
|
|
</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.labelName"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</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 tableNameList"
|
|
: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="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 { energyTableGet } from '@/api/base/energyQuantityManual';
|
|
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,
|
|
tableName: '',
|
|
},
|
|
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' },
|
|
],
|
|
},
|
|
tableNameList: [],
|
|
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.tableName = this.form.tableName
|
|
? this.form.tableName + ''
|
|
: '';
|
|
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();
|
|
}
|
|
if (this.form.energyTypeId) {
|
|
this.getTableNameList(this.form.energyTypeId);
|
|
}
|
|
}
|
|
});
|
|
} 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.method == 2) {
|
|
this.form.tableName = '';
|
|
this.getTableNameList(this.form.energyTypeId);
|
|
}
|
|
},
|
|
// 获取能源表名list
|
|
getTableNameList(id) {
|
|
energyTableGet({ energyTypeId: id }).then((res) => {
|
|
this.tableNameList = res.data.tableObjs || [];
|
|
if (this.tableNameList.length === 0) {
|
|
this.$modal.msgWarning(
|
|
'当前能源类型暂无配置表名，请先到《表名配置》页面配置'
|
|
);
|
|
}
|
|
});
|
|
},
|
|
// 递归处理分类回显问题
|
|
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;
|
|
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>
|