608 lines
19 KiB
Vue
608 lines
19 KiB
Vue
<template>
|
||
<!-- 设备管理 -->
|
||
<div class="devManage">
|
||
<el-form
|
||
:inline="true"
|
||
size="medium"
|
||
class="demo-form-inline whiteBlock"
|
||
style="padding: 15px 0 15px 18px"
|
||
>
|
||
<el-form-item style="margin: 0">
|
||
<!-- 新增设备 -->
|
||
<el-button type="primary" @click="addDevice">{{
|
||
$t('message.devManage.addDev')
|
||
}}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="height: 12px; background: #f3f5fd; width: 100%"></div>
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="devListData"
|
||
style="width: 100%"
|
||
class="tables"
|
||
>
|
||
<!-- 设备名称 设备编号 -->
|
||
<el-table-column
|
||
prop="devName"
|
||
:label="$t('message.devManage.devName')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="devSn"
|
||
:label="$t('message.devManage.devNo')"
|
||
></el-table-column>
|
||
<!-- 监控点位数（个） -->
|
||
<el-table-column
|
||
prop="pointNum"
|
||
:label="$t('message.devManage.montorLocation')"
|
||
></el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.safeMangeCheck.operate')">
|
||
<template slot-scope="scope">
|
||
<div class="flex">
|
||
<div @click="editDevInfo(scope.row)" class="operationText">
|
||
<img
|
||
src="@/assets/images/icon-edit.png"
|
||
width="15px"
|
||
height="15px"
|
||
/>
|
||
<!-- 编辑 -->
|
||
<span>{{ $t('message.safeMangeCheck.edit') }}</span>
|
||
</div>
|
||
<div @click="deteleDev(scope.row)" class="operationText">
|
||
<img
|
||
src="@/assets/images/icon-delete.png"
|
||
width="15px"
|
||
height="15px"
|
||
/>
|
||
<!-- 删除 -->
|
||
<span>{{ $t('message.safeMangeCheck.delete') }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
style="margin-top: 10px"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
|
||
<!-- 新增 编辑 弹窗 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="dialogTitle"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="devFormDialog"
|
||
width="860px"
|
||
>
|
||
<div class="dialog_content" style="height: 600px">
|
||
<vue-scroll style="height: 88%">
|
||
<!-- 基本信息 -->
|
||
<div class="title">{{ '·' + $t('message.devManage.baseInfo') }}</div>
|
||
<el-form
|
||
size="small"
|
||
ref="devForm"
|
||
:model="devForm"
|
||
label-width="130px"
|
||
:inline="true"
|
||
class="devFormBox"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<!-- 设备ID -->
|
||
<el-form-item
|
||
prop="devSn"
|
||
:label="$t('message.devManage.deviceId')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeManage.placeholder'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-input
|
||
v-model="devForm.devSn"
|
||
style="width: 215px"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
:disabled="dialogType == 2"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<!-- 设备名称 -->
|
||
<el-form-item
|
||
prop="devName"
|
||
:label="$t('message.devManage.devName')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeManage.placeholder'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-input
|
||
v-model="devForm.devName"
|
||
style="width: 215px"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<!-- 紧急报警推送人 -->
|
||
<el-form-item
|
||
prop="urgentAlarmPushWorkerId"
|
||
:label="$t('message.devManage.emergencyAlarmPusher')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeMangeCheck.pleaseChoose'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-select
|
||
v-model="devForm.urgentAlarmPushWorkerId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changeWorkerType"
|
||
multiple
|
||
collapse-tags
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in workerInfoList"
|
||
:key="item.workerId"
|
||
:label="item.workerName"
|
||
:value="item.workerId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<!-- 重要报警推送人 -->
|
||
<el-form-item
|
||
prop="importantAlarmPushWorkerId"
|
||
:label="$t('message.devManage.imporentAlarmPusher')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeMangeCheck.pleaseChoose'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-select
|
||
multiple
|
||
collapse-tags
|
||
v-model="devForm.importantAlarmPushWorkerId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changeWorkerType"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in workerInfoList"
|
||
:key="item.workerId"
|
||
:label="item.workerName"
|
||
:value="item.workerId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<!-- 次要报警推送人 -->
|
||
<el-form-item
|
||
prop="secondaryAlarmPushWorkerId"
|
||
:label="$t('message.devManage.minorAlarmPusher')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeMangeCheck.pleaseChoose'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-select
|
||
multiple
|
||
collapse-tags
|
||
v-model="devForm.secondaryAlarmPushWorkerId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changeWorkerType"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in workerInfoList"
|
||
:key="item.workerId"
|
||
:label="item.workerName"
|
||
:value="item.workerId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<!-- 提示报警推送人 -->
|
||
<el-form-item
|
||
prop="promptAlarmPushWorkerId"
|
||
:label="$t('message.devManage.tipAlarmPusher')"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: $t('message.safeMangeCheck.pleaseChoose'),
|
||
trigger: 'blur'
|
||
}
|
||
]"
|
||
>
|
||
<el-select
|
||
multiple
|
||
collapse-tags
|
||
v-model="devForm.promptAlarmPushWorkerId"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changeWorkerType"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in workerInfoList"
|
||
:key="item.workerId"
|
||
:label="item.workerName"
|
||
:value="item.workerId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- ·监测点信息 -->
|
||
<el-row class="title">{{
|
||
'·' + $t('message.devManage.montorInfo')
|
||
}}</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<!-- 监测点位数量 -->
|
||
<el-form-item
|
||
:label="$t('message.devManage.montorLocationNum')"
|
||
prop="teamId"
|
||
>
|
||
<el-select
|
||
v-model="devForm.pointNum"
|
||
:placeholder="$t('message.laborMange.pleaseChoose')"
|
||
@change="changePointsNumber"
|
||
style="width: 100%"
|
||
:disabled="dialogType == 2"
|
||
>
|
||
<el-option label="8" :value="8"></el-option>
|
||
<el-option label="16" :value="16"></el-option>
|
||
<el-option label="32" :value="32"></el-option>
|
||
<el-option label="64" :value="64"></el-option>
|
||
<el-option label="128" :value="128"></el-option>
|
||
<el-option label="256" :value="256"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row
|
||
:gutter="24"
|
||
v-for="(item, index) in devForm.pointList"
|
||
:key="index"
|
||
>
|
||
<el-col :span="3">
|
||
<el-form-item prop="teamId">
|
||
{{ $t('message.devManage.serialNum') + '：'
|
||
}}{{ item.pointNo }}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<!-- 监测点名称 -->
|
||
<el-form-item
|
||
:label="$t('message.devManage.montorName')"
|
||
prop="teamId"
|
||
>
|
||
<el-input
|
||
v-model="item.pointName"
|
||
style="width: 160px"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<!-- 温度报警阈值 -->
|
||
<el-form-item
|
||
:label="$t('message.devManage.temperatureAlarm')"
|
||
prop="teamId"
|
||
>
|
||
<el-input
|
||
v-model="item.temperatureThreshold"
|
||
style="width: 120px"
|
||
:placeholder="$t('message.safeManage.placeholder')"
|
||
/>℃
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</vue-scroll>
|
||
<div class="dialog-footer">
|
||
<!-- 确认 取消 -->
|
||
<el-button
|
||
class="cancleBtn"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
@click="cancleBtn('devForm')"
|
||
>{{ $t('message.safeMangeCheck.dialog.cancel') }}</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
@click="submitForm('devForm')"
|
||
>{{ $t('message.safeMangeCheck.dialog.confirm') }}</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addConcreteMonitorDevApi,
|
||
getConcreteMonitorDevListApi,
|
||
getDevDetailApi,
|
||
editConcreteMonitorDevApi,
|
||
deleteConcreteMonitorDevApi
|
||
} from '@/assets/js/api/concreteMonitoring.js'
|
||
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: '',
|
||
page: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
devListData: [],
|
||
devFormDialog: false,
|
||
dialogTitle: this.$t('message.devManage.addDev'),
|
||
dialogType: 1,
|
||
workerInfoList: [], //推送人员列表
|
||
devForm: {
|
||
devName: '',
|
||
devSn: '',
|
||
pointNum: 8,
|
||
pointList: [],
|
||
importantAlarmPushWorkerId: [],
|
||
promptAlarmPushWorkerId: [],
|
||
secondaryAlarmPushWorkerId: [],
|
||
urgentAlarmPushWorkerId: []
|
||
}
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.getDevList()
|
||
},
|
||
|
||
methods: {
|
||
//获取设备列表
|
||
getDevList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}
|
||
getConcreteMonitorDevListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.devListData = res.result.records
|
||
this.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
|
||
//新增设备
|
||
addDevice() {
|
||
this.devFormDialog = true
|
||
this.dialogTitle = this.$t('message.devManage.addDev')
|
||
this.dialogType = 1
|
||
this.devForm.pointList = []
|
||
this.devForm = {
|
||
devName: '',
|
||
devSn: '',
|
||
pointNum: 8,
|
||
pointList: [],
|
||
importantAlarmPushWorkerId: [],
|
||
promptAlarmPushWorkerId: [],
|
||
secondaryAlarmPushWorkerId: [],
|
||
urgentAlarmPushWorkerId: []
|
||
}
|
||
//渲染点位
|
||
for (let i = 0; i < this.devForm.pointNum; i++) {
|
||
let obj = { pointName: '', pointNo: i + 1, temperatureThreshold: '' }
|
||
this.devForm.pointList.push(obj)
|
||
}
|
||
//获取通知人
|
||
this.getNotifierList()
|
||
},
|
||
//切换监控点数量
|
||
changePointsNumber(val) {
|
||
this.devForm.pointNum = val
|
||
this.devForm.pointList = []
|
||
for (let i = 0; i < val; i++) {
|
||
let obj = { pointName: '', pointNo: i + 1, temperatureThreshold: '' }
|
||
this.devForm.pointList.push(obj)
|
||
if (i == val - 1) {
|
||
this.$message.success({
|
||
// 切换点位数量成功
|
||
message: this.$t('message.devManage.numChangeSuccess')
|
||
})
|
||
}
|
||
}
|
||
},
|
||
//获取通知人员列表
|
||
getNotifierList() {
|
||
let data = {
|
||
projectSn: this.projectSn
|
||
}
|
||
getProjectChilderSystemUserListApi(data).then((res) => {
|
||
this.workerInfoList = res.result
|
||
})
|
||
},
|
||
|
||
//保存
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
let data = JSON.parse(JSON.stringify(this.devForm))
|
||
data.importantAlarmPushWorkerId =
|
||
data.importantAlarmPushWorkerId.join(',')
|
||
data.promptAlarmPushWorkerId = data.promptAlarmPushWorkerId.join(',')
|
||
data.secondaryAlarmPushWorkerId =
|
||
data.secondaryAlarmPushWorkerId.join(',')
|
||
data.urgentAlarmPushWorkerId = data.urgentAlarmPushWorkerId.join(',')
|
||
data.projectSn = this.projectSn
|
||
//新增
|
||
if (this.dialogType == 1) {
|
||
addConcreteMonitorDevApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
// 保存成功
|
||
this.$message.success(this.$t('message.devManage.saveSuccess'))
|
||
this.devFormDialog = false
|
||
this.$refs[formName].resetFields()
|
||
this.getDevList()
|
||
} else {
|
||
this.$message.success(res.message)
|
||
}
|
||
})
|
||
} else {
|
||
//编辑
|
||
editConcreteMonitorDevApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message.success(this.$t('message.devManage.editSuccess'))
|
||
this.devFormDialog = false
|
||
this.$refs[formName].resetFields()
|
||
this.getDevList()
|
||
} else {
|
||
this.$message.success(res.message)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
|
||
//取消按钮
|
||
cancleBtn(formName) {
|
||
this.$refs[formName].resetFields()
|
||
this.devFormDialog = false
|
||
},
|
||
|
||
//删除按钮
|
||
deteleDev(val) {
|
||
this.$confirm(
|
||
this.$t('message.devManage.tipText') + '?',
|
||
this.$t('message.devManage.tip'),
|
||
{
|
||
confirmButtonText: this.$t('message.safeMangeCheck.dialog.confirm'),
|
||
cancelButtonText: this.$t('message.safeMangeCheck.dialog.cancel'),
|
||
type: 'warning'
|
||
}
|
||
)
|
||
.then(() => {
|
||
let data = {
|
||
id: val.id
|
||
}
|
||
deleteConcreteMonitorDevApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.devManage.deleteSuccess') + '!'
|
||
})
|
||
this.getDevList()
|
||
} else {
|
||
this.$message.error(res.message)
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.devManage.cancelDeleteSuccess') + '!'
|
||
})
|
||
})
|
||
},
|
||
|
||
//编辑设备
|
||
editDevInfo(val) {
|
||
this.dialogTitle = this.$t('message.devManage.editDev')
|
||
this.dialogType = 2
|
||
this.getNotifierList()
|
||
this.getDevDetail(val.id)
|
||
this.devFormDialog = true
|
||
},
|
||
//获取单个设备详情
|
||
getDevDetail(id) {
|
||
let data = {
|
||
id
|
||
}
|
||
getDevDetailApi(data).then((res) => {
|
||
let val = res.result
|
||
this.devForm = {
|
||
devName: val.devName,
|
||
devSn: val.devSn,
|
||
pointNum: val.pointNum,
|
||
pointList: val.pointList,
|
||
importantAlarmPushWorkerId: val.importantAlarmPushWorkerId.split(','),
|
||
promptAlarmPushWorkerId: val.promptAlarmPushWorkerId.split(','),
|
||
secondaryAlarmPushWorkerId: val.secondaryAlarmPushWorkerId.split(','),
|
||
urgentAlarmPushWorkerId: val.urgentAlarmPushWorkerId.split(','),
|
||
id: id
|
||
}
|
||
})
|
||
},
|
||
|
||
//切换条数
|
||
handleSizeChange(e) {
|
||
this.pageSize = e
|
||
this.getDevList()
|
||
},
|
||
//切换分页
|
||
handleCurrentChange(e) {
|
||
this.page = e
|
||
this.getDevList()
|
||
},
|
||
changeWorkerType() {}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.title {
|
||
margin: 14px 0;
|
||
font-weight: 900;
|
||
}
|
||
.devManage {
|
||
background: #fff;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.operationText {
|
||
margin-right: 30px;
|
||
}
|
||
.devFormBox {
|
||
/deep/.el-select {
|
||
.el-input {
|
||
width: 215px;
|
||
}
|
||
}
|
||
}
|
||
</style> |