<!--
* @Description: 报警等级列表
* @Author: 王晓颖
* @Date: 2021-08-09 11:32:10
-->
<template>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :fullscreen="false" append-to-body>
<div style="margin-bottom: 12px;">
<el-button size="small" v-if="hasPerm('/environment/alarmLevel/add')" icon="el-icon-plus" :disabled="list.length>=alarmLevelList.length" @click="addRow">新增</el-button>
</div>
<normal-table :data="list" :head="tableOption.head" :query="listQuery" :pagination="false" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small">
<template slot="columns">
<el-table-column label="报警等级" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.alarmLevel" :disabled="!scope.row.edit" size="small">
<el-option
v-for="item in alarmLevelList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="报警阈值" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.percent" type="number" size="small" :min="0" :max="120" :disabled="!scope.row.edit" placeholder="请输入百分比值">
<template slot="append">%</template>
</el-input>
</template>
</el-table-column>
<el-table-column label="报警开关" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.alarmOpen"
active-text="开"
active-value="1"
inactive-text="关"
inactive-value="0"
:disabled="!scope.row.edit"
size="small"
>
</el-switch>
</template>
</el-table-column>
<el-table-column v-show="hasPerm('/environment/alarmLevel/update')" label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button v-show="hasPerm('/environment/alarmLevel/update')&&!scope.row.edit" type="text" size="small" @click.stop="editRow(scope.row)">编辑</el-button>
<el-button v-show="hasPerm('/environment/alarmLevel/delete')&&!scope.row.edit" type="text" size="small" @click.stop="deleteRow(scope.row)">删除</el-button>
<el-button v-show="hasPerm('/environment/alarmLevel/update')&&scope.row.edit" type="text" size="small" @click.stop="saveRow(scope.row)">保存</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</el-dialog>
</template>
<script>
import { getSensorAlarmLevel, addAlarmLevel, updateAlarmLevel, deleteAlarmLevel } from '@/api/environment/alarmLevel'
import { getDictByCode } from '@/api/system/dict'
export default {
name: "sensorLevel",
data(){
return {
dialogFormVisible: false, // 对话框是否显示
dialogTitle:'报警等级',
listQuery: {
keywords: '',
startTime: '', // 开始时间
endTime: '', // 结束时间
offset: 1,
limit: 20
}, // 筛选条件
alarmLevelList:[], // 报警等级列表
timeRange: [], // 时间范围
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
tableOption: {
head: {
show: false, // 是否需要标题栏，
text: '报警等级' // 标题名称
},
options: {
needIndex: true, // 是否需要序号列
border: false
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false // 是否需要刷新按钮
}
} // 表格属性
}
},
created(){
this.fetchAlarmLevelType()
},
methods: {
// 初始化弹窗
initDialog(row){
this.dialogFormVisible = true
this.sensor = row.sensor
this.dialogTitle = row.name +'报警等级设置'
this.fetchData()
},
addRow(){
if(this.list.length>=this.alarmLevelList.length){
this.$message.warning('超出允许设置条数')
}else{
this.list.push({
alarmLevel: '', percent: '', alarmOpen: '1', edit: true
})
}
},
// 编辑行
editRow(row){
row.edit = true
},
// 删除行
deleteRow(row){
this.$confirm(
'确定要删除该行设置吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteAlarmLevel(row.id).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.list.splice(this.list.findIndex(item=>row.id==item.id),1)
}
})
})
},
//保存行数据
saveRow(row){
if(this.validateRow(row)){
// 有id执行编辑操作
if(row.id){
const params = {
id: row.id,
sensor: this.sensor,
percent: row.percent,
alarmLevel: row.alarmLevel,
alarmOpen: row.alarmOpen
}
updateAlarmLevel(params).then(res=>{
this.$message.success('保存成功')
})
}else{ // 执行新增操作
const params = {
sensor: this.sensor,
percent: row.percent,
alarmLevel: row.alarmLevel,
alarmOpen: row.alarmOpen
}
addAlarmLevel(params).then(res=>{
row.id = res.data
this.$message.success('保存成功')
})
}
row.edit = false
}
},
// 验证输入
validateRow(row){
if(!row.alarmLevel){
this.$message.warning('请选择报警等级')
return false
}
if(!row.percent){
this.$message.warning('请选择报警阈值')
return false
}
if(row.percent>120 || row.percent<=0){
this.$message.warning('报警阈值不能小于等于0或大于120')
return false
}
// 校验是否与其他项报警等级重复
const findList = this.list.filter(item=>item.alarmLevel===row.alarmLevel)
if(findList.length>1){
this.$message.warning('报警等级重复')
return false
}
return true
},
// 获取数据
fetchData() {
this.listLoading = true
getSensorAlarmLevel({sensor: this.sensor}).then(res =>{
this.list = res.data.map(item=>{
return {...item, edit:false}
})
this.total = res.data.length
// this.list = [
// { id:'1', alarmLevel: '1', percent: '80', alarmOpen: true, edit: false},
// { id:'2', alarmLevel: '2', percent: '60', alarmOpen: true, edit: false},
// { id:'3', alarmLevel: '3', percent: '50', alarmOpen: true, edit: false}
// ]
// this.total = 4
this.listLoading = false
})
},
// 获取报警等级类别
fetchAlarmLevelType() {
getDictByCode('envAlarmLevel').then(response => {
this.alarmLevelList = response.data
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
