543 lines
19 KiB
Vue
543 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 align="center" prop="devName" :label="$t('message.devManage.devName')"></el-table-column>
|
||
<el-table-column align="center" prop="devSn" label="设备id"></el-table-column>
|
||
<!-- 监控点位数（个） -->
|
||
<el-table-column align="center" prop="pointNum" :label="$t('message.devManage.montorLocation')"></el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.safeMangeCheck.operate')" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="flex">
|
||
<div @click="showPlanConfig(scope.row)" class="operationText">
|
||
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
|
||
<!-- 编辑 -->
|
||
<span>测点分布</span>
|
||
</div>
|
||
<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"
|
||
onKeyUp="value=value.replace(/[\W]/g,'')"
|
||
></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.userId" :label="item.workerName" :value="item.userId"></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.userId" :label="item.workerName" :value="item.userId"></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.userId" :label="item.workerName" :value="item.userId"></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.userId" :label="item.workerName" :value="item.userId"></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
|
||
type="number"
|
||
oninput="if(value.length>5)value=value.slice(0,5)"
|
||
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>
|
||
|
||
<el-dialog
|
||
v-if="showDialog"
|
||
:modal-append-to-body="false"
|
||
title="测点分布"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="showDialog"
|
||
width="1300px"
|
||
style="height: 900px"
|
||
:destroy-on-close="true"
|
||
>
|
||
<div class="formDialog">
|
||
<formDialog :pointConfig="pointConfig"> </formDialog>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
addConcreteMonitorDevApi,
|
||
getConcreteMonitorDevListApi,
|
||
getDevDetailApi,
|
||
editConcreteMonitorDevApi,
|
||
deleteConcreteMonitorDevApi
|
||
} from '@/assets/js/api/concreteMonitoring.js'
|
||
import formDialog from '@/views/projectFront/concreteMonitoring/planConfig.vue'
|
||
|
||
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
|
||
export default {
|
||
components: {
|
||
formDialog
|
||
},
|
||
data() {
|
||
return {
|
||
pointConfig: [],
|
||
showDialog: false,
|
||
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: {
|
||
// 打开测点分布弹窗
|
||
showPlanConfig(item) {
|
||
this.showDialog = true
|
||
this.pointConfig = item.devSn
|
||
},
|
||
//获取设备列表
|
||
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;
|
||
margin-left: 155px;
|
||
}
|
||
.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>
|