362 lines
14 KiB
Vue

<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<el-button type="warning" plain size="medium" @click="refresh">{{ $t('message.alarmValueSet.refresh') }}</el-button>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="List">
<el-table-column width="200" prop="deviceName" align="center" :label="$t('message.alarmValueSet.deviceName')"></el-table-column>
<el-table-column prop="deviceId" :label="$t('message.alarmValueSet.deviceId')" align="center"></el-table-column>
<el-table-column prop="devOnline" :label="$t('message.alarmValueSet.isClosed')" align="center">
<template slot-scope="scope">{{ scope.row.devOnline == 1 ? '在线' : '离线' }}</template>
</el-table-column>
<el-table-column prop="address" width="100" :label="$t('message.alarmValueSet.address')" align="center"></el-table-column>
<el-table-column prop="realTime" width="200" :label="$t('message.alarmValueSet.createTime')" align="center"></el-table-column>
<el-table-column :label="$t('message.alarmValueSet.operation')" align="center">
<template slot-scope="scope">
<div class="tableBtns">
<div @click="yu(scope.row, 2)" class="operationText">
<img src="@/assets/images/yu.png" alt="" />{{ $t('message.alarmValueSet.yjz') }}
</div>
<div @click="bao(scope.row, 1)" class="operationText">
<img src="@/assets/images/bao.png" alt="" />{{ $t('message.alarmValueSet.bjz') }}
</div>
<div @click="edit(scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span>{{ $t('message.alarmValueSet.edit') }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
:modal-append-to-body="false"
:title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
:visible.sync="Popup.show"
width="667px"
@closed="closeDialog"
>
<div class="dialog_content">
<el-form
v-show="Popup.type === 'edit'"
size="medium"
ref="addEditForm"
:model="addEditForm"
:rules="addEditRules"
label-width="120px"
class="dialogFormBox"
>
<!--<el-form-item :label="$t('message.alarmValueSet.dialog_edit.contactNumber')" >
<el-input v-model="addEditForm.devName"
:placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>-->
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.deviceId')" prop="deviceId">
<el-input v-model="addEditForm.deviceId" disabled :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>
<!--<el-form-item label="接收时间" prop="realTime">
<el-date-picker
v-model="addEditForm.realTime"
type="datetime"
value-format="yyyy-MM-dd hh:mm:ss"
placeholder="选择日期">
&lt;!&ndash;value-format="yyyy-MM-dd hh:mm:ss"&ndash;&gt;
</el-date-picker>
</el-form-item>-->
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.isEnable')" prop="isEnable">
<el-radio-group v-model="addEditForm.isEnable">
<el-radio :label="0">{{ $t('message.alarmValueSet.dialog_edit.isEnableArr')[0] }}</el-radio>
<el-radio :label="1">{{ $t('message.alarmValueSet.dialog_edit.isEnableArr')[1] }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.name')" prop="deviceName">
<el-input v-model="addEditForm.deviceName" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.address')">
<el-input v-model="addEditForm.address" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.lng')">
<el-input v-model="addEditForm.lng" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.lat')">
<el-input v-model="addEditForm.lat" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.pusher')">
<el-select
v-model="addEditForm.alarmPushWorkerId"
multiple
filterable
:placeholder="$t('message.alarmValueSet.placeholder_select')"
>
<el-option v-for="item in options" :key="item.workerId" :label="item.workerName" :value="item.workerId"> </el-option>
</el-select>
</el-form-item>
<div class="dialog-footer">
<el-button class="cancleBtn" @click="Popup.show = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.alarmValueSet.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
>{{ $t('message.alarmValueSet.save') }}
</el-button>
</div>
</el-form>
<el-form
v-if="Popup.type === 'ybj' || Popup.type === 'bjz'"
size="medium"
ref="warningForm"
label-width="140px"
class="dialogFormBox yj-dialogFormBox"
>
<el-form-item :label="$t('message.alarmValueSet.early.pm25')" prop="pm25Warning">
<el-input
v-model="warningInfo.pm25Warning"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.pm10')" prop="pm10Warning">
<el-input
v-model="warningInfo.pm10Warning"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.tis')" prop="realTimeTsp">
<el-input
v-model="warningInfo.realTimeTsp"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.windSpeed')" prop="windSpeed">
<el-input
v-model="warningInfo.windSpeed"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.noise')" prop="noiseWarning">
<el-input
v-model="warningInfo.noiseWarning"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.humidity')" prop="realTimeHumidity">
<el-input
v-model="warningInfo.realTimeHumidity"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.MinTemperature')" prop="minTemperature">
<el-input
v-model="warningInfo.minTemperature"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.alarmValueSet.early.maxTemperature')" prop="maxTemperature">
<el-input
v-model="warningInfo.maxTemperature"
:placeholder="$t('message.alarmValueSet.placeholder')"
type="number"
oninput="if(value.length>20)value=value.slice(0,20)"
>
</el-input>
</el-form-item>
<!-- pm2.5预警是否推送 pm2.5报警是否推送-->
<el-form-item :label="type == 2 ? $t('message.projectInfo.PM25warning') : $t('message.projectInfo.PM25alarm')">
<el-radio-group v-model="warningInfo.isNotPush">
<el-radio :label="1">{{ $t('message.alarmValueSet.early.isNotPushArr')[0] }}</el-radio>
<el-radio :label="2">{{ $t('message.alarmValueSet.early.isNotPushArr')[1] }}</el-radio>
</el-radio-group>
</el-form-item>
<div class="dialog-footer">
<el-button class="cancleBtn" @click="Popup.show = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.alarmValueSet.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
>{{ $t('message.alarmValueSet.save') }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
environmentDevEdit,
environmentDevList,
environmentWarningEdit,
getEnvironmentWarningInfo
} from '../../../assets/js/api/environmentManage'
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
export default {
mounted() {
this.getList()
this.getLaborManagementList()
},
data() {
return {
props: {
multiple: true
},
addEditRules: {
deviceName: [
{ required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'blur' },
{ required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'change' }
]
},
options: [
/*{realName: "曾祥万", value: 1},
{realName: "李先生", value: 2},*/
],
warningInfo: {},
addEditForm: {},
List: [],
Popup: {
type: 'edit',
show: false
},
type: ''
}
},
methods: {
closeDialog() {
console.log("关闭弹窗")
this.warningInfo = {}
this.addEditForm = {}
},
handle(type, show) {
//打开弹窗前的统一处理
this.Popup = {
type: type,
show: show
}
},
setWarningType(warningType) {
this.warningInfo.warningType = warningType
environmentWarningEdit(this.warningInfo).then(result => {
if (result.success) {
this.$message.success(result.message)
console.log('预警值/报警值设置成功', result)
}
})
},
submit() {
if (this.Popup.type === 'ybj') {
console.log('打印预警设置', this.warningInfo)
this.setWarningType(2)
this.Popup.show = false
} else if (this.Popup.type === 'bjz') {
this.setWarningType(1)
this.Popup.show = false
} else if (this.Popup.type === 'edit') {
this.$refs.addEditForm.validate(valid => {
if (valid) {
let params = this.addEditForm
if (this.addEditForm.alarmPushWorkerId) {
params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',')
}
params.projectSn = this.$store.state.projectSn
console.log('编辑信息', this.addEditForm)
environmentDevEdit(params).then(result => {
if (result.success) {
// console.log('信息编辑成功', result);
this.$message.success(result.message)
this.getList()
this.Popup.show = false
}
})
} else {
return false
}
})
}
},
Change() {},
yu(obj, type) {
console.log('预警', obj)
this.handle('ybj', true)
obj.warningType = 2
this.type = type
this.getWarningInfo(obj)
// this.warningInfo.id = obj.id;
// this.warningInfo.deviceId = obj.deviceId;
// this.warningInfo.projectSn = obj.projectSn;
},
bao(obj, type) {
this.type = type
console.log('报警', obj)
// this.warningInfo.id = obj.id;
/*this.warningInfo.deviceId = obj.deviceId;
this.warningInfo.projectSn = obj.projectSn;*/
this.handle('bjz', true)
obj.warningType = 1
this.getWarningInfo(obj)
},
edit(obj) {
console.log('编辑', obj)
this.addEditForm = JSON.parse(JSON.stringify(obj))
if (typeof obj.alarmPushWorkerId === 'string' && obj.alarmPushWorkerId != '') {
this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId.split(',')
}
this.handle('edit', true)
},
getList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
if (result.success) {
this.List = result.result
console.log('列表', result)
}
})
},
refresh() {
this.getList()
},
getWarningInfo(obj) {
let { deviceId, projectSn, warningType } = obj
getEnvironmentWarningInfo({
deviceId: deviceId,
projectSn: projectSn,
warningType: warningType
}).then(result => {
if (result.result) {
this.warningInfo = result.result
console.log('预警信息', result)
}
})
},
getLaborManagementList() {
getProjectChilderSystemUserListApi({ projectSn: this.$store.state.projectSn }).then(result => {
this.options = result.result
})
}
}
}
</script>
<style lang="less" scoped>
.tableBtns {
display: flex;
justify-content: center;
}
.yj-dialogFormBox {
width: 462px;
}
::v-deep .el-input__inner {
line-height: 1px !important;
}
</style>