2024-02-03 17:55:26 +08:00

739 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<!-- 智能张拉设备管理 -->
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
<el-form-item label="设备名称">
<el-input v-model="searchForm.devName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="getList">{{ $t('message.energyManage.waybill.query') }}</el-button>
<el-button type="warning" plain @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button>
<el-button type="primary" size="medium" @click="add">新增</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="List">
<el-table-column prop="devName" align="center" label="设备名称"></el-table-column>
<el-table-column prop="devSn" align="center" label="设备编码"></el-table-column>
<el-table-column prop="devModel" align="center" label="设备型号"></el-table-column>
<el-table-column prop="manufacturerName" align="center" label="厂家名称"></el-table-column>
<!-- <el-table-column prop="uploadImage" align="center" label="设备图片">
<template slot-scope="scope">
<div class="devImage">
<el-image
v-if="JSON.parse(scope.row.uploadImage)[0]"
:preview-src-list="JSON.parse(scope.row.uploadImage) ? [JSON.parse(scope.row.uploadImage)[0].url] : []"
:src="JSON.parse(scope.row.uploadImage)[0] ? JSON.parse(scope.row.uploadImage)[0].url : []"
alt=""
></el-image>
</div>
</template>
</el-table-column> -->
<el-table-column prop="createDate" align="center" label="创建时间"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="tableBtns">
<div @click="edit(scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span style="white-space: nowrap;">编辑</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
<span style="white-space: nowrap;">删除</span>
</div>
<!-- <div @click="setYu(scope.row)" class="operationText">
<img src="@/assets/images/yu.png" width="15px" height="15px" />
<span style="white-space: nowrap;">预警值设置</span>
</div>
<div @click="setBao(scope.row)" class="operationText">
<img src="@/assets/images/bao.png" width="15px" height="15px" />
<span style="white-space: nowrap;">报警值设置</span>
</div> -->
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagerBox"
@size-change="SizeChange"
@current-change="CurrentChange"
:current-page="pagInfo.pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pagInfo.pageSize"
layout="total, sizes, prev, pager, next"
:total="Number(pagInfo.total)"
background
></el-pagination>
</div>
<el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="667px">
<div class="dialog_content">
<el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="120px" class="dialogFormBox">
<el-form-item label="设备名称" prop="devName">
<el-input :disabled="isDetail" v-model="addEditForm.devName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备编码" prop="devSn">
<el-input :disabled="isDetail" v-model="addEditForm.devSn" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备型号" prop="devModel">
<el-input :disabled="isDetail" v-model="addEditForm.devModel" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="厂家名称" prop="manufacturerName">
<el-input :disabled="isDetail" v-model="addEditForm.manufacturerName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="下拉选择司机" prop="selectDriver">
<el-select collapse-tags multiple v-model="driverSelect" placeholder="请选择" :disabled="isDetail" @change="driverChange">
<el-option v-for="(item, index) in driverList" :key="index" :label="item.workerName" :value="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item prop="selectVideo" label="下拉选择视频">
<el-select
v-model="videoSelect"
multiple
collapse-tags
placeholder="请输入"
@change="videoChange"
>
<el-option v-for="item in videoList" :key="item.itemId" :label="item.videoName" :value="item.itemId"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
:disabled="isDetail"
:action="$store.state.UPLOADURL"
list-type="picture-card"
multiple
name="files"
:limit="1"
accept=".png, .jpg, .jpeg"
:file-list="fileUplodList"
:on-exceed="(file, fileList) => handleExceed(file, fileList)"
:on-success="(res, file) => handleSuccess(res, file)"
:on-remove="(file, fileList) => handleRemove(file, fileList)"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<!-- <el-form-item label="备注" prop="remark">
<el-input :disabled="isDetail" v-model="addEditForm.remark" placeholder="请输入"></el-input>
</el-form-item> -->
<div class="dialog-footer">
<el-button class="cancleBtn" @click="dialogShow = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.deviceManage.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
>{{ $t('message.deviceManage.save') }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
<el-dialog
:modal-append-to-body="false"
@close="dialogSetShow = false"
title="编辑预警值设置"
:visible.sync="dialogSetShow"
width="667px"
>
<div class="dialog_content">
<el-form size="medium" ref="setEditForm" :model="setEditForm" label-width="120px" class="dialogFormBox">
<el-form-item label="PH值">
<div class="form-flex">
<el-input v-model="setEditForm.phValueLowWarn" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
<div class="center-line"></div>
<el-input v-model="setEditForm.phValueHighWarn" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
</div>
</el-form-item>
<el-form-item label="电导率(μS/cm)">
<div class="form-flex">
<el-input
v-model="setEditForm.conductivityLowWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setEditForm.conductivityHighWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="水温()">
<div class="form-flex">
<el-input
v-model="setEditForm.waterTemperatureLowWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setEditForm.waterTemperatureHighWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="溶解氧(mg/L)">
<div class="form-flex">
<el-input
v-model="setEditForm.dissolvedOxygenLowWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setEditForm.dissolvedOxygenHighWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="浊度值(NTU)">
<div class="form-flex">
<el-input
v-model="setEditForm.turbidityValueLowWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setEditForm.turbidityValueHighWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="流速(m/s)">
<div class="form-flex">
<el-input
v-model="setEditForm.flowVelocityLowWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setEditForm.flowVelocityHighWarn"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="水位(m)">
<div class="form-flex">
<el-input v-model="setEditForm.waterLevelLowWarn" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
<div class="center-line"></div>
<el-input v-model="setEditForm.waterLevelHighWarn" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
</div>
</el-form-item>
<div class="dialog-footer">
<el-button class="cancleBtn" @click="dialogSetShow = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.deviceManage.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submitSet('编辑预警值设置')" size="me'dium"
>{{ $t('message.deviceManage.save') }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
<el-dialog
:modal-append-to-body="false"
@close="dialogBaoSetShow = false"
title="编辑报警值设置"
:visible.sync="dialogBaoSetShow"
width="667px"
>
<div class="dialog_content">
<el-form size="medium" ref="setBaoEditForm" :model="setBaoEditForm" label-width="120px" class="dialogFormBox">
<el-form-item label="PH值">
<div class="form-flex">
<el-input v-model="setBaoEditForm.phValueLowAlarm" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.phValueHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="电导率(μS/cm)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.conductivityLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.conductivityHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="水温(℃)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.waterTemperatureLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.waterTemperatureHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="溶解氧(mg/L)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.dissolvedOxygenLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.dissolvedOxygenHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="浊度值(NTU)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.turbidityValueLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.turbidityValueHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="流速(m/s)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.flowVelocityLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.flowVelocityHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<el-form-item label="水位(m)">
<div class="form-flex">
<el-input
v-model="setBaoEditForm.waterLevelLowAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
<div class="center-line"></div>
<el-input
v-model="setBaoEditForm.waterLevelHighAlarm"
placeholder="请输入"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</div>
</el-form-item>
<div class="dialog-footer">
<el-button class="cancleBtn" @click="dialogBaoSetShow = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.deviceManage.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submitSet('编辑报警值设置')" size="medium"
>{{ $t('message.deviceManage.save') }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
bridgeErectMachineDevAdd,
bridgeErectMachineDevDelete,
bridgeErectMachineDevEdit,
bridgeErectMachineDevPage,
getCrewListDataApi,
sewageThresholdDetail,
sewageThresholdEdit
} from '@/assets/js/api/bridgeMachineMonitor'
import { getWorkerInfoListApi,getVideoItemListApi } from '@/assets/js/api/towerCrane'
export default {
mounted() {},
created() {
this.getList()
this.getDutyPerson()
this.getWorkerInfoList()
this.getVideoItemList()
},
data() {
return {
isDetail: false, //是否详情
dutyList: [], // 负责人
fileUplodList: [],
title: '',
dialogBaoSetShow: false,
dialogSetShow: false,
dialogShow: false,
pagInfo: {
pageNo: 1, //页数
pageSize: 10, //条数
total: 0 //总条数
},
List: [],
setEditForm: {
phValueLowWarn: 0,
phValueHighWarn: 100,
conductivityLowWarn: 0,
conductivityHighWarn: 100,
waterTemperatureLowWarn: 0,
waterTemperatureHighWarn: 100,
dissolvedOxygenLowWarn: 0,
dissolvedOxygenHighWarn: 100,
turbidityValueLowWarn: 0,
turbidityValueHighWarn: 100,
flowVelocityLowWarn: 0,
flowVelocityHighWarn: 100,
waterLevelLowWarn: 0,
waterLevelHighWarn: 100
},
setBaoEditForm: {
phValueLowAlarm: 0,
phValueHighAlarm: 100,
conductivityLowAlarm: 0,
conductivityHighAlarm: 100,
waterTemperatureLowAlarm: 0,
waterTemperatureHighAlarm: 100,
dissolvedOxygenLowAlarm: 0,
dissolvedOxygenHighAlarm: 100,
turbidityValueLowAlarm: 0,
turbidityValueHighAlarm: 100,
flowVelocityLowAlarm: 0,
flowVelocityHighAlarm: 100,
waterLevelLowAlarm: 0,
waterLevelHighAlarm: 100
},
addEditForm: {
createTime: '',
devSn: '',
installLocation: '',
devName: '',
personInChargeName: '',
personInCharge: '',
phoneNumber: '',
personInCharge: '',
uploadImage: '',
remark: '',
projectSn: '',
updateTime: ''
},
addEditRules: {
devName: [
{
required: true,
message: '必填',
trigger: 'blur'
}
],
devSn: [
{
required: true,
message: '必填',
trigger: 'blur'
}
],
phoneNumber: [
{
message: '请输入正确的手机号码',
trigger: 'blur',
pattern: /^1(3|4|5|6|7|8|9)\d{9}$/
}
]
},
searchForm: {
devName: ''
},
videoList: [],
driverList: [],
videoSelect: [],
driverSelect: [],
}
},
methods: {
//获取摄像机列表
getVideoItemList() {
let data = {
projectSn: this.$store.state.projectSn,
};
console.log(data);
getVideoItemListApi(data).then((res) => {
console.log('摄像头列表',res);
if (res.code == 200) {
this.videoList = res.result.list;
}
});
},
// 获取司机列表
getWorkerInfoList() {
getWorkerInfoListApi({ projectSn: this.$store.state.projectSn }).then(res => {
this.driverList = res.result
console.log('司机列表', res.result)
})
},
// 设置报警值
async setBao(obj) {
const res = await sewageThresholdDetail({ devSn: obj.devSn })
let initForm = JSON.parse(JSON.stringify(this.setBaoEditForm))
this.setBaoEditForm = { ...this.setBaoEditForm, ...res.result }
for (let i in initForm) {
if (!this.setBaoEditForm[i]) {
this.setBaoEditForm[i] = 0
}
}
this.dialogBaoSetShow = true
},
// 设置阈值
async setYu(obj) {
const res = await sewageThresholdDetail({ devSn: obj.devSn })
let initForm = JSON.parse(JSON.stringify(this.setEditForm))
this.setEditForm = { ...this.setEditForm, ...res.result }
for (let i in initForm) {
if (!this.setEditForm[i]) {
this.setEditForm[i] = 0
}
}
this.dialogSetShow = true
},
// 司机下拉
driverChange(e) {
// const arr = ["123", "456", "789"];
if (e.length > 0) {
const result = e.join(",");
this.addEditForm.selectDriver = result;
} else {
this.addEditForm.selectDriver = "";
}
console.log('司机下拉', e)
},
// 视频下拉
videoChange(e) {
if (e.length > 0) {
const result = e.join(",");
this.addEditForm.selectVideo = result;
} else {
this.addEditForm.selectVideo = "";
}
console.log('视频下拉', e)
},
//查询负责人下拉
getDutyPerson() {
let data = {
projectSn: this.$store.state.projectSn
}
getCrewListDataApi(data).then(res => {
if (res.code == 200) {
this.dutyList = res.result
console.log('获取负责人下拉', this.dutyList)
} else {
this.$message.error(res.message)
}
})
},
//查询列表
getList() {
bridgeErectMachineDevPage({
pageNo: this.pagInfo.pageNo,
pageSize: this.pagInfo.pageSize,
projectSn: this.$store.state.projectSn,
devName: this.searchForm.devName
}).then(result => {
if (result.success) {
this.List = result.result.records
this.pagInfo.total = result.result.total
}
})
},
add() {
this.title = '新增'
this.dialogShow = true
this.fileUplodList = []
this.close()
},
edit(obj) {
this.title = '编辑'
this.dialogShow = true
this.addEditForm = JSON.parse(JSON.stringify(obj))
this.fileUplodList = JSON.parse(obj.uploadImage)
if (obj.selectVideo) {
this.videoSelect = obj.selectVideo.split(",")
}
if (obj.selectDriver) {
this.driverSelect = obj.selectDriver.split(",")
}
},
submitSet(title) {
let params
if (title == '编辑预警值设置') {
params = JSON.parse(JSON.stringify(this.setEditForm))
} else if (title == '编辑报警值设置') {
params = JSON.parse(JSON.stringify(this.setBaoEditForm))
}
sewageThresholdEdit(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
this.dialogSetShow = false
this.dialogBaoSetShow = false
}
})
},
submit() {
let params = JSON.parse(JSON.stringify(this.addEditForm))
params.projectSn = this.$store.state.projectSn
params.uploadImage = JSON.stringify(this.fileUplodList)
// if (this.fileUplodList.length > 0) {
// this.$message.error('请上传照片')
// return false
// }
this.$refs.addEditForm.validate(valid => {
if (valid) {
if (this.title == '新增') {
bridgeErectMachineDevAdd(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
} else if (this.title == '编辑') {
bridgeErectMachineDevEdit(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
}
this.dialogShow = false
} else {
return false
}
})
},
deleteDev(obj) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
bridgeErectMachineDevDelete({ id: obj.id }).then(res => {
if (res.success) {
this.getList()
this.$message({
type: 'success',
message: '删除成功!'
})
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 删除
handleRemove(file, fileList) {
this.fileUplodList = fileList
},
handleExceed(file, fileList) {
console.log('超出限制', file)
this.$message.warning('只能上传一张图片')
},
handleSuccess(res, file, type) {
if (res.status == 'SUCCESS') {
console.log(res)
this.fileUplodList.push({
name: file.name,
url: this.$store.state.FILEURL + file.response.data[0].imageUrl
})
}
},
close() {
this.isDetail = false
this.addEditForm = {}
this.fileUplodList = []
this.driverSelect = []
this.videoSelect = []
this.$nextTick(() => {
this.$refs.addEditForm.clearValidate()
})
},
SizeChange(val) {
this.pagInfo.pageSize = val
this.getList()
},
CurrentChange(val) {
this.pagInfo.pageNo = val
this.getList()
},
refresh() {
this.searchForm = {}
this.pagInfo.pageNo = 1 //页数
this.pagInfo.pageSize = 10 //条数
this.getList()
}
}
}
</script>
<style lang="less" scoped>
.flex {
display: flex;
align-items: center;
}
.devImage {
/deep/ .el-image {
width: 80px;
height: 50px;
}
}
.dialogFormBox {
.form-flex {
.flex();
justify-content: space-between;
.center-line {
height: 36px;
line-height: 36px;
margin: 0 10px;
}
}
/deep/.el-form-item__content {
line-height: 0px;
}
}
</style>