效果图:
代码:
<el-dialog :title="title" :visible.sync="open" center append-to-body width="1000px">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
<el-row>
<el-col :span="12">
<el-form-item label="告警名称:" prop="alarmName" label-width="80px">
<el-input v-model="form.alarmName" placeholder="请输入告警名"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="告警等级:" prop="alarmLevel" label-width="80px" style="margin-left: 10px">
<el-select v-model="form.alarmLevel" style="width: 100%" placeholder="请选择告警等级" clearable>
<el-option
v-for="dict in alarmLevelOption"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.alarm_setting_status"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="告警条件: 当" prop="compareDataTypeOne" label-width="108px">
<el-select v-model="form.compareDataTypeOne"
placeholder="请选择对比数据类型1"
>
<el-option
v-for="dict in dict.type.alarm_setting_compare_data_type_one"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="与" label-width="25px" style="margin-left: 5px">
<el-select v-model="form.compareDataTypeTwo"
placeholder="请选择对比数据类型2"
>
<el-option
v-for="dict in dict.type.alarm_setting_compare_data_type_two"
:key="dict.value"
:label="dict.label"
:value="dict.value"
:disabled="form.compareDataTypeOne === dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="相差" label-width="40px" style="margin-left: 5px">
<el-select v-model="form.compareSymbols" placeholder="请选择比较符">
<el-option
v-for="dict in dict.type.alarm_setting_compare_symbols"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" label-width="0px" style="margin-left: 5px">
<el-input v-model="form.diffPercent" placeholder="请输入差值百分比"/>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item label="%时,进行告警" label-width="120px" style="margin-left: 5px">
</el-form-item>
</el-col>
</el-row>
<el-form-item class="needSetting" label="计算公式: ABS((对比数据1-对比数据2)/额定容量)" label-width="100%">
</el-form-item>
<el-form-item label="生效电厂:" label-width="90px" prop="effectLedgerPowerStationIds">
<div id="myChart" style="height: 300px;width: 95%;margin-left: 2.5%;">
<el-transfer
:titles="['电厂列表', '已选电厂']"
@change="changeTranfer"
style="width: 100%;margin-top: 30px"
filterable
filter-placeholder="请输入厂站"
v-model="chooseStationIndexs"
:data="data"
>
</el-transfer>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>