需求:点击一个按钮,弹出一个模态框,这个模态框有两个tab,tab中是各种报警条件,这些报警条件是从数据库中动态取出的,数据库中数据变更后,这个界面也要变更,我们可以查看和编辑这些报警条件。底部“确定”按钮点击的时候,会同时将这两个tab中的内容都保存到数据库中去,数据录入要验证输入的格式。
对于熟练的人来说,实现其实很简单,但是对于没有经验的人来说,如果按照官网给的那些简单实例来做,你会发现,出现一些奇怪的问题,诸如,文本框不能编辑内容,表单验证无效等。感觉elementUI官网的示例太过于粗浅,无法适应实际工作中的许多需求场景。
界面效果如下图所示:
分析:用到的组件:el-dialog、el-tabs
AlarmSet.vue代码:
if="alarmTmplData.length>0"> <ColdSet ref="coldSet" :alarmTmplData="alarmTmplData" @onSubmit="coldSetSummit" :showAlarmSetWin.sync="showAlarmSetWin" > <EndSet ref="endSet" :alarmTmplData="alarmTmplData" @onSubmit="endSetSummit" :showAlarmSetWin.sync="showAlarmSetWin" >
重写elementUI组件样式,可以使用/deep/ 进行样式穿透覆写。
关于表单验证:由于是动态生成的表单,所以不能按照官网提供的示例来做。
el-form中不指定验证规则,而是在el-form-item中指定,如下:
:prop="`list.${rowIndex}.${fieldArr[2*index+index+1]}`" :rules="rules.numberRule"
表单数据ruleForm中要对数据进行初始化,否则会无法自动识别数据变化,建议采用深拷贝的形式
考虑到冷站和末端这两个组件中的代码可以复用,抽取公共js文件set-mixin.js,然后通过mixins引入,这个类似于组合,还有一种继承是通过extends来实现。
分析界面虽然是动态的,但是总共只有几种类型,分别是:1个文本框,2个文本框,没有文本框。他们都带有建议信息这一行,所以可以用几个v-if来区分。
import { alarmLevelOptions, fieldArr } from '@/enum/alarm-enum.js'; import Regexps from '@/utils/regexp.js'; import mixinsOption from '@/mixins/mixin-options'; export default { props: { alarmTmplData: { type: Array, default: () => { return []; }, }, showAlarmSetWin: { type: Boolean, default: false, }, }, mixins: [mixinsOption], data() { return { levelOptions: alarmLevelOptions(), ruleForm: { list: [], }, rules: { numberRule: [ { pattern: Regexps.commonNumber, message: '仅支持3位数和带1位小数', trigger: 'blur', }, ], suggestion: [ { max: 10, message: '长度不能超过10个字符', trigger: 'blur' }, ], }, fieldArr, tmplData: [], }; }, computed: { activeNames() { let activeNames = this.tmplData .filter((f) => f.descParamType != 0) .map((n) => { return n.id; }); console.log('activeNames :>> ', activeNames); return activeNames; }, }, methods: { initData(type) { console.log('initData', type); if (this.alarmTmplData.length > 0) { this.tmplData = this.alarmTmplData.filter((n) => n.sys == type); this.ruleForm.list = JSON.parse(JSON.stringify(this.tmplData)); // console.log('条件设置initData :>> ', this.ruleForm.list); } }, }, };
ColdSet.vue代码:
for="(item,rowIndex) in ruleForm.list" :key="item.id"> true-label="0" :false-label="1">{{item.name}} option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" > if="item.descParamType==1">if="item.descParamType==2">for="(subItem,index) in item.descr" :key="index">item label="大于" :prop="`list.${rowIndex}.${fieldArr[index]}`" :rules="rules.numberRule" > for="(subItem,index) in item.descr" :key="index">item label="大于" :prop="`list.${rowIndex}.${fieldArr[2*index+index]}`" :rules="rules.numberRule" > input v-model="item[`${fieldArr[2*index+index]}`]" size="small" > item label="或小于" :prop="`list.${rowIndex}.${fieldArr[2*index+index+1]}`" :rules="rules.numberRule" > input v-model="item[`${fieldArr[2*index+index+1]}`]" size="small" > item label="建议信息" :prop="`list.${rowIndex}.suggestion`" :rules="rules.suggestion" > input v-model="item.suggestion" class="max-width" size="small" placeholder="请尽快处理" >
EndSet.vue:
for="(item,rowIndex) in ruleForm.list" :key="item.id"> true-label="0" :false-label="1">{{item.name}} option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" > if="item.descParamType==1">for="(subItem,index) in item.descr" :key="index">item label="大于" :prop="`list.${rowIndex}.${fieldArr[index]}`" :rules="rules.numberRule" v-if="index==0" > if="item.descParamType==2">for="(subItem,index) in item.descr" :key="index">item label="大于" :prop="`list.${rowIndex}.${fieldArr[2*index+index]}`" :rules="rules.numberRule" > item label="或小于" :prop="`list.${rowIndex}.${fieldArr[2*index+index+1]}`" :rules="rules.numberRule" > if="item.descParamType==3">if="item.descParamType==4">item :label="subItem" :prop="`list.${rowIndex}.${fieldArr[index]}`" :rules="rules.numberRule" v-for="(subItem,index) in item.descr" :key="index" > for="(subItem,index) in item.descr" :key="index">{{subItem}}item :label="index==0?'小于':'大于'" :prop="`list.${rowIndex}.${fieldArr[index]}`" :rules="rules.numberRule" > item label="建议信息" :prop="`list.${rowIndex}.suggestion`" :rules="rules.suggestion" > input v-model="item.suggestion" class="max-width" size="small" placeholder="请尽快处理" >
由于要两个tab中都验证通过时,才提交表单,所以两个表单都要验证,只有都验证通过时在提交表单,提交表单之前,要合并表单数据再统一提交。父组件调用子组件的方法 this.$refs["coldSet"].onSubmit();
考虑到弹窗组件的性能问题,我们可以通过将显示标识以 :showAlarmSetWin.sync="showAlarmSetWin"这样的形式传递给子组件,(注意,要加sync关键字)子组件监听showAlarmSetWin,当弹窗显示时,加载数据并初始化,并设置属性:immediate: true,让弹窗第一次执行时也加载数据。
{ "data": [{ "id": 246, "tempId": "1", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 247, "tempId": "2", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 248, "tempId": "3", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 249, "tempId": "4", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 250, "tempId": "5", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 251, "tempId": "6", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 252, "tempId": "7", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 253, "tempId": "8", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 254, "tempId": "9", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 255, "tempId": "10", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 256, "tempId": "11", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 257, "tempId": "12", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 258, "tempId": "13", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 259, "tempId": "14", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 260, "tempId": "15", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 261, "tempId": "16", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 262, "tempId": "50", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 263, "tempId": "51", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 264, "tempId": "52", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 265, "tempId": "53", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 266, "tempId": "54", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 267, "tempId": "55", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 268, "tempId": "56", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 269, "tempId": "57", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 270, "tempId": "58", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 271, "tempId": "59", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 272, "tempId": "60", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 273, "tempId": "61", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 274, "tempId": "62", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 275, "tempId": "63", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 276, "tempId": "64", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 277, "tempId": "65", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 278, "tempId": "66", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 279, "tempId": "67", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 280, "tempId": "68", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 281, "tempId": "69", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 282, "tempId": "101", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 283, "tempId": "102", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 84.0, "secondVal": 16.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 284, "tempId": "103", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 59.0, "secondVal": 49.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 285, "tempId": "104", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 34.0, "secondVal": 22.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 286, "tempId": "105", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 92.0, "secondVal": 66.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 287, "tempId": "106", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 55.0, "secondVal": 29.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 288, "tempId": "107", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 86.0, "secondVal": 81.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 289, "tempId": "108", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 67.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 290, "tempId": "109", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 85.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 291, "tempId": "110", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 16.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 292, "tempId": "111", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 92.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 293, "tempId": "112", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": "请尽快安排人检查", "firstVal": 10.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 294, "tempId": "113", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 44.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 295, "tempId": "114", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": "请尽快安排人检查", "firstVal": 61.0, "secondVal": 35.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 296, "tempId": "115", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 48.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 297, "tempId": "116", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 298, "tempId": "117", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 299, "tempId": "118", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 76.0, "secondVal": 23.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 300, "tempId": "119", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 64.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 301, "tempId": "120", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 302, "tempId": "121", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 73.0, "secondVal": 15.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 303, "tempId": "122", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 90.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 304, "tempId": "201", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 305, "tempId": "202", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 306, "tempId": "203", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 307, "tempId": "204", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 32.0, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 308, "tempId": "205", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 309, "tempId": "206", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 310, "tempId": "207", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 311, "tempId": "208", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 312, "tempId": "209", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 313, "tempId": "210", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 314, "tempId": "211", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 315, "tempId": "212", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 316, "tempId": "213", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 317, "tempId": "214", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 318, "tempId": "215", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 319, "tempId": "216", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 320, "tempId": "217", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 321, "tempId": "218", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 322, "tempId": "219", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 323, "tempId": "220", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 36.0, "secondVal": 11.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 324, "tempId": "221", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": 66.0, "secondVal": 59.0, "thirdVal": null, "fourthVal": null, "status": 0 }, { "id": 325, "tempId": "222", "projectNumber": "440300A088", "groupNumber": "G1", "alarmLevel": 1, "suggestion": null, "firstVal": null, "secondVal": null, "thirdVal": null, "fourthVal": null, "status": 0 }], "code": 200, "msg": "成功", "errors": null }
模板数据列表格式:
{ "data": [{ "id": "1", "name": "制冷机启动失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "10", "name": "冷冻泵故障", "sys": 1, "type": 1, "descr": "[\"冷冻水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "101", "name": "冷冻水供水温度不在合理范围", "sys": 1, "type": 3, "descr": "[\"冷冻水供水温度\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "102", "name": "冷却塔出水温度温度不在合理范围", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却水回水温度-室外湿球温度(℃)\",\"或当室外湿球温度<17℃时,冷却水回水温度设定值(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "103", "name": "冷冻供回水温差(压差)不在合理范围", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷冻水温差(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "104", "name": "冷却供回水温差不在合理范围", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却水温差(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "105", "name": "电流负载限制", "sys": 1, "type": 3, "descr": "[\"冷水机组电流负载率\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "106", "name": "冷凝温度限制", "sys": 1, "type": 3, "descr": "[\"冷凝器出水温度(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "107", "name": "蒸发温度限制", "sys": 1, "type": 3, "descr": "[\"蒸发器出水温度(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "108", "name": "蒸发器内水压力超限", "sys": 1, "type": 3, "descr": "[\"蒸发器冷媒压力(Mpa)\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "109", "name": "蒸发器内水流量超限", "sys": 1, "type": 3, "descr": "[\"冷冻水流量/当前制冷机的额定流量*制冷剂运行台数\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "11", "name": "冷却泵启动失败", "sys": 1, "type": 1, "descr": "[\"冷却水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "110", "name": "冷凝器内水压力超限", "sys": 1, "type": 3, "descr": "[\"冷机冷凝器冷媒压力(Mpa)\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "111", "name": "冷凝器内水流量超限", "sys": 1, "type": 3, "descr": "[\"冷却水流量/当前制冷机的额定流量*制冷机运行台数\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "112", "name": "冷冻水侧小温差过高", "sys": 1, "type": 3, "descr": "[\"正常运行时段,蒸发器出水温度-冷媒温度(℃)\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "113", "name": "冷却水侧小温差过高", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷凝器冷媒温度-出水温度(℃)\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "114", "name": "冷冻水流量超限", "sys": 1, "type": 3, "descr": "[\"冷冻泵流量/额定流量\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "115", "name": "冷冻泵功率超限", "sys": 1, "type": 3, "descr": "[\"冷冻泵功率/额定功率\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "116", "name": "冷冻泵频率超限", "sys": 1, "type": 3, "descr": "[\"冷冻泵运行频率不在配置的上下限范围内\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "117", "name": "冷冻水温差超限", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷冻水温差在(3,7)范围内\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "118", "name": "冷却泵流量超限", "sys": 1, "type": 3, "descr": "[\"冷却泵流量/额定流量\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "119", "name": "冷却泵功率超限", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却泵功率/额定功率\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "12", "name": "冷却泵停止失败", "sys": 1, "type": 1, "descr": "[\"冷却水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "120", "name": "冷却塔频率超限", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却塔频率不在配置的上下限范围\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "121", "name": "冷却回水温度超限", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却回水温度\"]", "descParamType": 2, "hasSuge": 1, "runTime": 0 }, { "id": "122", "name": "冷却塔功率超限", "sys": 1, "type": 3, "descr": "[\"正常运行时段,冷却塔功率/额定功率\"]", "descParamType": 1, "hasSuge": 1, "runTime": 0 }, { "id": "13", "name": "冷却泵故障", "sys": 1, "type": 1, "descr": "[\"冷却水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "14", "name": "冷却塔启动失败", "sys": 1, "type": 1, "descr": "[\"冷却塔风机故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "15", "name": "冷却塔停止失败", "sys": 1, "type": 1, "descr": "[\"冷却塔风机故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "16", "name": "冷却塔故障", "sys": 1, "type": 1, "descr": "[\"冷却塔风机故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "2", "name": "制冷机停止失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "201", "name": "室内温度传感器需要校核", "sys": 2, "type": 4, "descr": "[\"每日6点,当前末端温度反馈值与其他末端温度反馈值相差2℃以上\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "202", "name": "工作时间前过早开启空调末端", "sys": 2, "type": 2, "descr": "[\"工作时间前过早开启空调末端\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "203", "name": "室外温度高而新风阀未关闭", "sys": 2, "type": 2, "descr": "[\"室外温度高而新风阀未关闭\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "204", "name": "室外温度低而新风阀未开启", "sys": 2, "type": 2, "descr": "[\"非营业时间,风柜设定温度-室外湿球温度(℃)\",\"新风阀未开启\"]", "descParamType": 1, "hasSuge": 1, "runTime": 3 }, { "id": "205", "name": "空调风机变频器自动控制未启用", "sys": 2, "type": 2, "descr": "[\"当前时间<关机时间,室外湿球温度>24且风柜温度人工设定\",\"或室外湿球温度在[5,24]且风柜温度人工设定\",\"或室外湿球温度<5且风柜(风盘)温度人工设定\"]", "descParamType": 4, "hasSuge": 1, "runTime": 2 }, { "id": "206", "name": "室内CO2过高", "sys": 2, "type": 3, "descr": "[\"室内CO2(PPM)\",\"持续时间(min)\"]", "descParamType": 3, "hasSuge": 1, "runTime": 2 }, { "id": "207", "name": "空调末端风机故障", "sys": 2, "type": 1, "descr": "[\"空调末端风机故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "208", "name": "空调末端新风阀故障", "sys": 2, "type": 1, "descr": "[\"空调末端新风阀故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "209", "name": "空调末端回风阀故障", "sys": 2, "type": 1, "descr": "[\"空调末端回风阀故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "210", "name": "空调末端水阀故障", "sys": 2, "type": 1, "descr": "[\"空调末端水阀故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "211", "name": "风柜开启失败", "sys": 2, "type": 1, "descr": "[\"风柜开启失败\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "212", "name": "风柜停止失败", "sys": 2, "type": 1, "descr": "[\"风柜停止失败\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "213", "name": "风盘开启失败", "sys": 2, "type": 1, "descr": "[\"风盘开启失败\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "214", "name": "风盘停止失败", "sys": 2, "type": 1, "descr": "[\"风盘停止失败\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "215", "name": "时序配置异常", "sys": 2, "type": 2, "descr": "[\"时序配置异常\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "216", "name": "末端设备为手动模式", "sys": 2, "type": 2, "descr": "[\"末端设备为手动模式\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "217", "name": "风柜故障报警", "sys": 2, "type": 1, "descr": "[\"风柜故障报警\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "218", "name": "风盘故障报警", "sys": 2, "type": 1, "descr": "[\"风盘故障报警\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "219", "name": "风柜频率超限", "sys": 2, "type": 3, "descr": "[\"风柜频率超限\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "220", "name": "室内温度不在合理范围", "sys": 2, "type": 3, "descr": "[\"风柜回风温度(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 2 }, { "id": "221", "name": "末端水力不平衡", "sys": 2, "type": 2, "descr": "[\"营业时间内,风柜回风温度(℃)\"]", "descParamType": 2, "hasSuge": 1, "runTime": 2 }, { "id": "222", "name": "风柜频率超限", "sys": 2, "type": 3, "descr": "[\"风柜频率CAB_FRQ不在配置的上下限范围\"]", "descParamType": 0, "hasSuge": 1, "runTime": 2 }, { "id": "3", "name": "制冷机故障", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "4", "name": "制冷机冷冻侧阀门启动失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "5", "name": "制冷机冷冻侧阀门停止失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "50", "name": "水力不平衡", "sys": 1, "type": 2, "descr": "[\"触发冰爽模式\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "51", "name": "非变频自动运行", "sys": 1, "type": 2, "descr": "[\"设备工频启停或频率手动设定\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "52", "name": "全自动或一键启动失败", "sys": 1, "type": 2, "descr": "[\"全自动模式、一键启动模式无法生效\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "53", "name": "过早开制冷站设备", "sys": 1, "type": 2, "descr": "[\"营业时间前过早开制冷站设备\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "54", "name": "停业后未及时停止制冷站设备", "sys": 1, "type": 2, "descr": "[\"停业后未及时停止制冷站设备\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "55", "name": "低温未启用全新风策略", "sys": 1, "type": 2, "descr": "[\"天气温度低而制冷站运行\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "56", "name": "制冷机加减载不合理", "sys": 1, "type": 2, "descr": "[\"手动模式下,执行制冷机的加减载\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "57", "name": "制冷机加减载失败", "sys": 1, "type": 2, "descr": "[\"制冷机加减载失败\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "58", "name": "冷水机组冷冻水旁通", "sys": 1, "type": 2, "descr": "[\"正常运行时段,运行状态-停止状态的冷机蒸发器进水温度<1\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "59", "name": "冷水机组冷却水旁通", "sys": 1, "type": 2, "descr": "[\"正常运行时段,运行状态-停止状态的冷机冷凝器进水温度<1\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "6", "name": "制冷机冷却侧阀门启动失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "60", "name": "制冷机频繁启停机", "sys": 1, "type": 2, "descr": "[\"设备启停记录中,同一设备的启动和停止时间间隔<30min\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "61", "name": "冷却泵频繁启停机", "sys": 1, "type": 2, "descr": "[\"设备启停记录中,同一设备的启动和停止时间间隔<30min\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "62", "name": "冷冻泵频繁启停机", "sys": 1, "type": 2, "descr": "[\"设备启停记录中,同一设备的启动和停止时间间隔<30min\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "63", "name": "冷却塔频繁启停机", "sys": 1, "type": 2, "descr": "[\"设备启停记录中,同一设备的启动和停止时间间隔<30min\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "64", "name": "未启用控制模式", "sys": 1, "type": 2, "descr": "[\"冷冻泵运行频率为手动设定或工频运行\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "65", "name": "冷却塔集水盘溢流", "sys": 1, "type": 2, "descr": "[\"冷却塔液位COT1_WL>后台配置中的液位上限\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "66", "name": "冷却塔集水盘干涸", "sys": 1, "type": 2, "descr": "[\"冷却塔液位COT1_WL<后台配置中的液位下限\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "67", "name": "冷却塔启停机不及时", "sys": 1, "type": 2, "descr": "[\"冷却塔在主机停机后5min以外关闭\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "68", "name": "冷却塔未启用控制模式", "sys": 1, "type": 2, "descr": "[\"冷却塔运行频率为手动设定或工频运行\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "69", "name": "冷却泵启停机不及时", "sys": 1, "type": 2, "descr": "[\"冷却泵在主机启动前2min以外启动,或冷却泵在主机停机后5min以外关闭\"]", "descParamType": 0, "hasSuge": 1, "runTime": 1 }, { "id": "7", "name": "制冷机冷却侧阀门停止失败", "sys": 1, "type": 1, "descr": "[\"制冷机组设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "8", "name": "冷冻泵启动失败", "sys": 1, "type": 1, "descr": "[\"冷冻水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }, { "id": "9", "name": "冷冻泵停止失败", "sys": 1, "type": 1, "descr": "[\"冷冻水泵设备故障\"]", "descParamType": 0, "hasSuge": 1, "runTime": 0 }], "code": 200, "msg": "成功", "errors": null }
总共两个接口,一个加载模板,一个加载数据,模板数据只第一次进入到页面的时候调用,数据是每次打开弹窗都要调用。