|
|
@@ -0,0 +1,600 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ :visible="visible"
|
|
|
+ :title="title"
|
|
|
+ width="1000px"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ @update:visible="updateVisible"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <!-- 第一行:测点编码 + 测点代码 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="测点编码" prop="code">
|
|
|
+ <el-input v-model="form.code" placeholder="系统生成" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="测点代码" prop="measuringPointCode">
|
|
|
+ <el-input
|
|
|
+ v-model="form.measuringPointCode"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第二行:测点名称 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="测点名称" prop="name" required>
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第三行:测点类型 + 排序号 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="测点类型" prop="itemType" required>
|
|
|
+ <el-radio-group v-model="form.itemType" :disabled="title == '详情'">
|
|
|
+ <el-radio :label="0">数值</el-radio>
|
|
|
+ <el-radio :label="1">状态</el-radio>
|
|
|
+ <el-radio :label="2">颜色</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排序号" prop="indexNo" required>
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.indexNo"
|
|
|
+ :min="1"
|
|
|
+ :max="999"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 状态设置区域 - 当测点类型为状态或颜色时显示 -->
|
|
|
+ <template v-if="form.itemType == '1'">
|
|
|
+ <div class="section-title">状态设置</div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="正常" prop="statusNormalText">
|
|
|
+ <el-select
|
|
|
+ v-model="form.statusNormalText"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="开" value="1"></el-option>
|
|
|
+ <el-option label="关" value="2"></el-option>
|
|
|
+ <el-option label="闭" value="3"></el-option>
|
|
|
+ <el-option label="合" value="3"></el-option>
|
|
|
+ <el-option label="断" value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="异常" prop="statusAbnormalText">
|
|
|
+ <el-select
|
|
|
+ v-model="form.statusAbnormalText"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="开" value="1"></el-option>
|
|
|
+ <el-option label="关" value="2"></el-option>
|
|
|
+ <el-option label="闭" value="3"></el-option>
|
|
|
+ <el-option label="合" value="3"></el-option>
|
|
|
+ <el-option label="断" value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否告警" prop="statusAlarmFlag">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="form.statusAlarmFlag"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="告警等级" prop="statusAlarmLevel">
|
|
|
+ <el-select
|
|
|
+ v-model="form.statusAlarmLevel"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label="一般" :value="1"></el-option>
|
|
|
+ <el-option label="严重" :value="2"></el-option>
|
|
|
+ <el-option label="危急" :value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.itemType == '2'">
|
|
|
+ <div class="section-title">状态设置</div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="正常" prop="lightNormalText">
|
|
|
+ <el-select
|
|
|
+ v-model="form.lightNormalText"
|
|
|
+ placeholder="请选择"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="红色" value="1"></el-option>
|
|
|
+ <el-option label="黄色" value="2"></el-option>
|
|
|
+ <el-option label="蓝色" value="3"></el-option>
|
|
|
+ <el-option label="绿色" value="4"></el-option>
|
|
|
+ <el-option label="白色" value="5"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="异常" prop="lightAbnormalText">
|
|
|
+ <el-select
|
|
|
+ v-model="form.lightAbnormalText"
|
|
|
+ placeholder="请选择"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="红色" value="1"></el-option>
|
|
|
+ <el-option label="黄色" value="2"></el-option>
|
|
|
+ <el-option label="蓝色" value="3"></el-option>
|
|
|
+ <el-option label="绿色" value="4"></el-option>
|
|
|
+ <el-option label="白色" value="5"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否告警" prop="statusAlarmFlag">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="form.statusAlarmFlag"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="告警等级" prop="statusAlarmLevel">
|
|
|
+ <el-select
|
|
|
+ v-model="form.statusAlarmLevel"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label="一般" value="1"></el-option>
|
|
|
+ <el-option label="严重" value="2"></el-option>
|
|
|
+ <el-option label="危急" value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <!-- 告警阀值区域 - 仅当测点类型为数值时显示 -->
|
|
|
+ <template v-if="form.itemType == '0'">
|
|
|
+ <div class="section-title">告警阀值</div>
|
|
|
+
|
|
|
+ <!-- 一般告警 -->
|
|
|
+ <el-row :gutter="10" class="alarm-row">
|
|
|
+ <el-col :span="3" class="alarm-label">一般告警</el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm1MaxValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm1MaxSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm1Type"
|
|
|
+ style="width: 80px"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label="或" value="or"></el-option>
|
|
|
+ <el-option label="且" value="and"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm1MinSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm1MinValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 严重告警 -->
|
|
|
+ <el-row :gutter="10" class="alarm-row">
|
|
|
+ <el-col :span="3" class="alarm-label">严重告警</el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm2MaxValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm2MaxSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm2Type"
|
|
|
+ style="width: 80px"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label="或" value="or"></el-option>
|
|
|
+ <el-option label="且" value="and"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm2MinSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm2MinValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 危急告警 -->
|
|
|
+ <el-row :gutter="10" class="alarm-row">
|
|
|
+ <el-col :span="3" class="alarm-label">危急告警</el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm3MaxValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm3MaxSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm3Type"
|
|
|
+ style="width: 80px"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label="或" value="or"></el-option>
|
|
|
+ <el-option label="且" value="and"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-select
|
|
|
+ v-model="form.alarm3MinSymbol"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ >
|
|
|
+ <el-option label=">" value=">"></el-option>
|
|
|
+ <el-option label="<" value="<"></el-option>
|
|
|
+ <el-option label="=" value="="></el-option>
|
|
|
+ <el-option label=">=" value=">="></el-option>
|
|
|
+ <el-option label="<=" value="<="></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.alarm3MinValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 单位 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="单位" prop="unitCode">
|
|
|
+ <el-select
|
|
|
+ v-model="form.unitCode"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="℃" value="℃"></el-option>
|
|
|
+
|
|
|
+ <el-option label="V" value="V"></el-option>
|
|
|
+ <el-option label="A" value="A"></el-option>
|
|
|
+ <el-option label="mA" value="mA"></el-option>
|
|
|
+ <el-option label="kW" value="kW"></el-option>
|
|
|
+ <el-option label="w" value="w"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 算法区域 -->
|
|
|
+ <div class="section-title">算法</div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="算法名称" prop="unitName">
|
|
|
+ <el-select
|
|
|
+ v-model="form.unitName"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="值索引" prop="valueIndex">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.valueIndex"
|
|
|
+ :min="1"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="延时设置" prop="algDelayTimes">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.algDelayTimes"
|
|
|
+ :min="0"
|
|
|
+ :disabled="title == '详情'"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: calc(100% - 40px)"
|
|
|
+ />
|
|
|
+ <span style="margin-left: 10px">s</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template slot="footer">
|
|
|
+ <el-button size="small" @click="handleCancel">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleSubmit"
|
|
|
+ v-if="title != '详情'"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const defaultForm = {
|
|
|
+ id: null,
|
|
|
+ code: '',
|
|
|
+ measuringPointCode: '',
|
|
|
+ name: '',
|
|
|
+ itemType: 0,
|
|
|
+ indexNo: 100,
|
|
|
+ // 状态设置(状态类型)
|
|
|
+ statusNormalText: '',
|
|
|
+ statusAbnormalText: '',
|
|
|
+ // 状态设置(颜色类型)
|
|
|
+ lightNormalText: '',
|
|
|
+ lightAbnormalText: '',
|
|
|
+ // 告警设置
|
|
|
+ statusAlarmFlag: 0,
|
|
|
+ statusAlarmLevel: '',
|
|
|
+ // 一般告警
|
|
|
+ alarm1MaxValue: null,
|
|
|
+ alarm1MaxSymbol: '>',
|
|
|
+ alarm1Type: 'or',
|
|
|
+ alarm1MinSymbol: '>',
|
|
|
+ alarm1MinValue: null,
|
|
|
+ // 严重告警
|
|
|
+ alarm2MaxValue: null,
|
|
|
+ alarm2MaxSymbol: '>',
|
|
|
+ alarm2Type: 'or',
|
|
|
+ alarm2MinSymbol: '>',
|
|
|
+ alarm2MinValue: null,
|
|
|
+ // 危急告警
|
|
|
+ alarm3MaxValue: null,
|
|
|
+ alarm3MaxSymbol: '>',
|
|
|
+ alarm3Type: 'or',
|
|
|
+ alarm3MinSymbol: '>',
|
|
|
+ alarm3MinValue: null,
|
|
|
+ // 单位
|
|
|
+ unitCode: '',
|
|
|
+ // 算法
|
|
|
+ unitName: '',
|
|
|
+ valueIndex: 1,
|
|
|
+ algDelayTimes: 15
|
|
|
+ };
|
|
|
+ export default {
|
|
|
+ name: 'MeasurePointForm',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '新增测点',
|
|
|
+ form: {
|
|
|
+ ...defaultForm
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ // code: [
|
|
|
+ // { required: true, message: '请输入测点编码', trigger: 'blur' }
|
|
|
+ // ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入测点名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ itemType: [
|
|
|
+ { required: true, message: '请选择测点类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ indexNo: [
|
|
|
+ { required: true, message: '请输入排序号', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(row, type = 'add') {
|
|
|
+ if (row && (type === 'edit' || type === 'view')) {
|
|
|
+ this.title = type === 'edit' ? '编辑测点' : '详情';
|
|
|
+ this.form = { ...this.form, ...row };
|
|
|
+ } else {
|
|
|
+ this.title = '新增测点';
|
|
|
+ this.resetForm();
|
|
|
+ }
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ updateVisible(val) {
|
|
|
+ this.visible = val;
|
|
|
+ if (!val) {
|
|
|
+ this.resetForm();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ ...defaultForm
|
|
|
+ };
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.formRef && this.$refs.formRef.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ this.$refs.formRef.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$emit('submit', this.form);
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .section-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #606266;
|
|
|
+ margin: 20px 0 15px 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 4px solid #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alarm-row {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alarm-label {
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+</style>
|