纵有疾风起
人生不言弃

通过一个vue+elementUI的小实例来讲解一下它们是如何使用的

  需求:点击一个按钮,弹出一个模态框,这个模态框有两个tab,tab中是各种报警条件,这些报警条件是从数据库中动态取出的,数据库中数据变更后,这个界面也要变更,我们可以查看和编辑这些报警条件。底部“确定”按钮点击的时候,会同时将这两个tab中的内容都保存到数据库中去,数据录入要验证输入的格式。

  对于熟练的人来说,实现其实很简单,但是对于没有经验的人来说,如果按照官网给的那些简单实例来做,你会发现,出现一些奇怪的问题,诸如,文本框不能编辑内容,表单验证无效等。感觉elementUI官网的示例太过于粗浅,无法适应实际工作中的许多需求场景。

  界面效果如下图所示:

通过一个vue+elementUI的小实例来讲解一下它们是如何使用的插图

通过一个vue+elementUI的小实例来讲解一下它们是如何使用的插图1

通过一个vue+elementUI的小实例来讲解一下它们是如何使用的插图2

  分析:用到的组件:el-dialog、el-tabs

   AlarmSet.vue代码:

<template>  <div>    <div class="alarm-set" v-loading="winLoading">      <el-tabs v-model="activeName" type="border-card" v-if="alarmTmplData.length>0">        <el-tab-pane label="制冷站" name="coldSet">          <ColdSet            ref="coldSet"            :alarmTmplData="alarmTmplData"            @onSubmit="coldSetSummit"            :showAlarmSetWin.sync="showAlarmSetWin"          ></ColdSet>        </el-tab-pane>        <el-tab-pane label="末端" name="endSet">          <EndSet            ref="endSet"            :alarmTmplData="alarmTmplData"            @onSubmit="endSetSummit"            :showAlarmSetWin.sync="showAlarmSetWin"          ></EndSet>        </el-tab-pane>      </el-tabs>    </div>    <div slot="footer" class="dialog-footer">      <div style="display: inline-block">        <el-button type="primary" @click="onSubmit" :loading="btnLoading">确 定</el-button>        <el-button @click="isHide">取 消</el-button>      </div>    </div>  </div></template><script>import ColdSet from "./ColdSet";import EndSet from "./EndSet";import mixinsOption from "@/mixins/mixin-options";import { alarmService } from "@/services/cold-station-service";// import { alarmConditionData } from "@/mock/json.js";export default {  mixins: [mixinsOption],  props: {    showAlarmSetWin: {      type: Boolean,      default: false    },    alarmTmpl: {      type: Object,      default: {}    }  },  components: {    ColdSet,    EndSet  },  data() {    return {      alarmConditionData: [], //报警条件数据      activeName: "coldSet",      alarmTmplData: [],      coldConditionData: [], //冷站报警条件数据      endConditionData: [], //末端报警条件数据      isColdValid: false,      isEndValid: false,      btnLoading: false    };  },  watch: {    showAlarmSetWin: {      handler(val) {        console.log("showAlarmSetWin", val);        if (val) {          this.initData();        }      },      immediate: true    }  },  methods: {    //初始化数据    initData() {      this.$store.commit("base/setWinLoading", true);      console.log("initData");      alarmService        .getConditionList({          groupNumber: this.groupNumber,          projectNumber: this.projectNumber        })        .then(res => {          if (res.code === 200) {            this.alarmConditionData = res.data;            this.createAlarmTmplData(res.data);          }          this.$store.commit("base/setWinLoading", false);        });    },    //构造报警模板数据    createAlarmTmplData(conditionData) {      let res = [];      this.alarmTmplData = this.alarmTmpl.data;      if (this.alarmTmpl) {        this.alarmTmplData.forEach(n => {          // debugger;          n.descr = eval(n.descr);          let item = conditionData.find(m => m.tempId == n.id);          if (item) {            n["alarmLevel"] = item.alarmLevel;            n["suggestion"] = item.suggestion;            n["firstVal"] = item.firstVal;            n["secondVal"] = item.secondVal;            n["fourthVal"] = item.fourthVal;            n["thirdVal"] = item.thirdVal;            n["status"] = item.status;          }        });      }      // console.log("this.alarmTmplData :>> ", this.alarmTmplData);    },    //确定操作    onSubmit() {      this.$refs["coldSet"].onSubmit();      this.$refs["endSet"].onSubmit();      if (this.isColdValid && this.isEndValid) {        this.btnLoading = true;        let list = this.coldConditionData          .concat(this.endConditionData)          .map(m => {            return {              tempId: m.id,              alarmLevel: m.alarmLevel,              firstVal: m.firstVal,              secondVal: m.secondVal,              thirdVal: m.thirdVal,              fourthVal: m.fourthVal,              status: m.status,              suggestion: m.suggestion            };          });        alarmService          .batchEdit({            projectNumber: this.projectNumber,            groupNumber: this.groupNumber,            list: list          })          .then(res => {            if (res.code === 200) {              this.$message({                message: "操作成功!",                type: "success",                duration: this.$baseConfig.messageDuration              });            }            this.btnLoading = false;          })          .catch(() => {            this.btnLoading = false;          });      }    },    coldSetSummit(val, isValid) {      if (isValid) {        this.isColdValid = isValid;        this.coldConditionData = val;      }    },    endSetSummit(val, isValid) {      if (isValid) {        this.isEndValid = isValid;        this.endConditionData = val;      }    },    //取消    isHide() {      this.$emit("update:showAlarmSetWin", false);    }  }};</script><style lang="scss" scoped>.alarm-set {  height: 600px;  /deep/ .el-tabs--border-card {    height: 100%;  }  /deep/ .el-tabs__content {    height: calc(100% - 60px);  }}</style>

重写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代码:

<template>  <div>    <el-form :model="ruleForm" ref="ruleForm">      <el-collapse v-model="activeNames">        <el-collapse-item :name="item.id" v-for="(item,rowIndex) in ruleForm.list" :key="item.id">          <template slot="title">            <div class="header">              <el-checkbox v-model="item.status" :true-label="0" :false-label="1">{{item.name}}</el-checkbox>              <el-select v-model="item.alarmLevel" size="small">                <el-option                  v-for="item in levelOptions"                  :key="item.value"                  :label="item.label"                  :value="item.value"                ></el-option>              </el-select>            </div>          </template>          <div class="content vertical">            <div class="row one" v-if="item.descParamType==1">              <div class="item" v-for="(subItem,index) in item.descr" :key="index">                <label>{{subItem}}</label>                <el-form-item                  label="大于"                  :prop="`list.${rowIndex}.${fieldArr[index]}`"                  :rules="rules.numberRule"                >                  <el-input v-model="item[`${fieldArr[index]}`]" size="small"></el-input>                </el-form-item>              </div>            </div>            <template v-if="item.descParamType==2">              <div class="row two" v-for="(subItem,index) in item.descr" :key="index">                <div class="item">                  <label>{{subItem}}</label>                  <el-form-item                    label="大于"                    :prop="`list.${rowIndex}.${fieldArr[2*index+index]}`"                    :rules="rules.numberRule"                  >                    <el-input                      v-model="item[`${fieldArr[2*index+index]}`]"                      size="small"                    ></el-input>                  </el-form-item>                  <el-form-item                    label="或小于"                    :prop="`list.${rowIndex}.${fieldArr[2*index+index+1]}`"                    :rules="rules.numberRule"                  >                    <el-input                      v-model="item[`${fieldArr[2*index+index+1]}`]"                      size="small"                    ></el-input>                  </el-form-item>                </div>              </div>            </template>            <div class="row one">              <el-form-item                label="建议信息"                :prop="`list.${rowIndex}.suggestion`"                :rules="rules.suggestion"              >                <el-input                  v-model="item.suggestion"                  class="max-width"                  size="small"                  placeholder="请尽快处理"                ></el-input>              </el-form-item>            </div>          </div>        </el-collapse-item>      </el-collapse>    </el-form>  </div></template><script>import { alarmLevelOptions, fieldArr } from "@/enum/alarm-enum.js";import Regexps from "@/utils/regexp.js";import { validateVal } from "@/utils/validate-utils.js";import { alarmService } from "@/services/cold-station-service";import setMixin from "./set-mixin";export default {  mixins: [setMixin],  watch: {    alarmTmplData: {      handler(val) {        console.log("showAlarmSetWin cold :>> ", val);        if (val) {          this.initData(1);        }
         else{
           this.$refs[“ruleForm”].resetFields();
        }
      },
deep:true, immediate:
true } }, methods: { onSubmit() { console.log("冷站确定 :>> "); this.$refs["ruleForm"].validate(valid => { if (valid) { console.log("验证成功"); this.$emit("onSubmit", this.ruleForm.list, true); } }); } }};</script><style lang="scss" scoped>@import "./set.scss";</style>

EndSet.vue:

<template>  <div>    <el-form :model="ruleForm" ref="ruleForm">      <el-collapse v-model="activeNames">        <el-collapse-item :name="item.id" v-for="(item,rowIndex) in ruleForm.list" :key="item.id">          <template slot="title">            <div class="header">              <el-checkbox v-model="item.status" :true-label="0" :false-label="1">{{item.name}}</el-checkbox>              <el-select v-model="item.alarmLevel" size="small">                <el-option                  v-for="item in levelOptions"                  :key="item.value"                  :label="item.label"                  :value="item.value"                ></el-option>              </el-select>            </div>          </template>          <div class="content vertical">            <div class="row two" v-if="item.descParamType==1">              <div class="item" v-for="(subItem,index) in item.descr" :key="index">                <label>{{subItem}}</label>                <el-form-item                  label="大于"                  :prop="`list.${rowIndex}.${fieldArr[index]}`"                  :rules="rules.numberRule"                  v-if="index==0"                >                  <el-input v-model="item[fieldArr[index]]" size="small"></el-input>                </el-form-item>              </div>            </div>            <div class="row two" v-if="item.descParamType==2">              <div class="item" v-for="(subItem,index) in item.descr" :key="index">                <label>{{subItem}}</label>                <el-form-item                  label="大于"                  :prop="`list.${rowIndex}.${fieldArr[2*index+index]}`"                  :rules="rules.numberRule"                >                  <el-input v-model="item[fieldArr[2*index+index]]" size="small"></el-input>                </el-form-item>                <el-form-item                  label="或小于"                  :prop="`list.${rowIndex}.${fieldArr[2*index+index+1]}`"                  :rules="rules.numberRule"                >                  <el-input v-model="item[fieldArr[2*index+index+1]]" size="small"></el-input>                </el-form-item>              </div>            </div>            <div class="row two" v-if="item.descParamType==3">              <div class="item">                <el-form-item                  :label="subItem"                  :prop="`list.${rowIndex}.${fieldArr[index]}`"                  :rules="rules.numberRule"                  v-for="(subItem,index) in item.descr"                  :key="index"                >                  <el-input v-model="item[fieldArr[index]]" size="small"></el-input>                </el-form-item>              </div>            </div>            <template v-if="item.descParamType==4">              <div class="row one" v-for="(subItem,index) in item.descr" :key="index">                <div class="item">{{subItem}}</div>                <div class="item">                  <el-form-item                    :label="index==0?'小于':'大于'"                    :prop="`list.${rowIndex}.${fieldArr[index]}`"                    :rules="rules.numberRule"                  >                    <el-input v-model="item[fieldArr[index]]" size="small"></el-input>                  </el-form-item>                </div>              </div>            </template>            <!-- <div class="row multi-row" v-if="item.descParamType==4">              multi-item                   </div>-->            <div class="row one">              <el-form-item                label="建议信息"                :prop="`list.${rowIndex}.suggestion`"                :rules="rules.suggestion"              >                <el-input                  v-model="item.suggestion"                  class="max-width"                  size="small"                  placeholder="请尽快处理"                ></el-input>              </el-form-item>            </div>          </div>        </el-collapse-item>      </el-collapse>    </el-form>  </div></template><script>import setMixin from "./set-mixin";import { alarmService } from "@/services/cold-station-service";export default {  mixins: [setMixin],  watch: {    alarmTmplData: {      handler(val) {        console.log("showAlarmSetWin end:>> ", val);        if (val) {          this.initData(2);        }
         else{
           this.$refs[“ruleForm”].resetFields();
        }
      },
deep:true, immediate:
true } }, methods: { onSubmit() { console.log("末端确定 :>> "); this.$refs["ruleForm"].validate(valid => { if (valid) { console.log("验证成功"); this.$emit("onSubmit", this.ruleForm.list, true); } }); } }};</script><style lang="scss" scoped>@import "./set.scss";</style>

由于要两个tab中都验证通过时,才提交表单,所以两个表单都要验证,只有都验证通过时在提交表单,提交表单之前,要合并表单数据再统一提交。父组件调用子组件的方法 this.$refs[“coldSet”].onSubmit();

考虑到弹窗组件的性能问题,我们可以通过将显示标识以 :showAlarmSetWin.sync=”showAlarmSetWin”这样的形式传递给子组件,(注意,要加sync关键字)子组件监听showAlarmSetWin,当弹窗显示时,加载数据并初始化,并设置属性:immediate: true,让弹窗第一次执行时也加载数据。

当窗体隐藏时,重置表单:

this.$refs[“ruleForm”].resetFields();为了防止同一时间多次点击操作按钮“确定”,可以给按钮加上loading
数据列表格式:
通过一个vue+elementUI的小实例来讲解一下它们是如何使用的插图3

{    "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}

View Code

模板数据列表格式:

通过一个vue+elementUI的小实例来讲解一下它们是如何使用的插图5

{    "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}

View Code

总共两个接口,一个加载模板,一个加载数据,模板数据只第一次进入到页面的时候调用,数据是每次打开弹窗都要调用。

文章转载于:https://www.cnblogs.com/jiekzou/p/12988660.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 通过一个vue+elementUI的小实例来讲解一下它们是如何使用的
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录