<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-input v-model="listQuery.keyword" size="small" placeholder="请输入编号/名称" clearable class="filter-item w-200" />
|
<el-button-group class="filter-item">
|
<el-button size="small" type="primary" icon="el-icon-search" @click="search">
|
搜索
|
</el-button>
|
<el-button size="small" type="primary" icon="el-icon-refresh" @click="refresh">
|
刷新
|
</el-button>
|
<el-button v-if="uadd == 'Yes'" size="small" type="primary" icon="el-icon-plus" @click="add">
|
新增
|
</el-button>
|
</el-button-group>
|
</div>
|
|
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit height="100%"
|
class="table-container" highlight-current-row>
|
<el-table-column fixed label="序号" width="80">
|
<template slot-scope="scope">
|
{{ scope.row.id }}
|
</template>
|
</el-table-column>
|
<el-table-column label="设备ID">
|
<template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template>
|
</el-table-column>
|
<el-table-column label="名称">
|
<template slot-scope="scope">
|
{{ scope.row.alarmname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="公司" width="180">
|
<template slot-scope="scope">
|
{{ scope.row.company }}
|
</template>
|
</el-table-column>
|
<el-table-column label="天阈值（毫米）">
|
<template slot-scope="scope">
|
{{ scope.row.hdsv }}
|
</template>
|
</el-table-column>
|
<el-table-column label="北阈值（毫米）">
|
<template slot-scope="scope">
|
{{ scope.row.ndsv }}
|
</template>
|
</el-table-column>
|
<el-table-column label="东阈值（毫米）">
|
<template slot-scope="scope">
|
{{ scope.row.edsv }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="报警电话">
|
<template slot-scope="scope">
|
{{ scope.row.phone }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="应急广播名称">
|
<template slot-scope="scope">
|
{{ scope.row.guangboname }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" v-if="uupdate == 'Yes' || udelete == 'Yes'">
|
<template slot-scope="scope">
|
<el-button-group>
|
<el-button v-if="uupdate == 'Yes'" type="primary" icon="el-icon-edit" size="mini" @click="edit(scope)">
|
修改
|
</el-button>
|
<el-button v-if="udelete == 'Yes'" type="danger" icon="el-icon-delete" size="mini" @click="del(scope)">
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
|
@pagination="fetchData" />
|
|
<el-dialog :visible.sync="dialogVisible" :title="dialogType === 'modify' ? '修改' : '新增'">
|
<el-form :ref="temp" :model="temp" label-width="120px" label-position="right" :rules="rules">
|
<el-form-item label="设备ID" prop="tagid">
|
<!-- <el-input v-model="temp.tagid
|
" placeholder="请输入设备ID" @change="secode" /> -->
|
<el-select style="width: 100%;" v-model="temp.tagid" filterable remote placeholder="请选择设备ID"
|
:remote-method="jzsearchMethod" :loading="searchloading" @change="secode">
|
<el-option v-for="item in tagidList" :key="item.tagid" :label="item.tagid" :value="item.tagid">
|
</el-option>
|
</el-select>
|
|
<!-- <el-select style="width: 100%;" v-model="temp.tagid" filterable remote placeholder="请选择设备ID"
|
:remote-method="jzsearchMethod" :loading="searchloading">
|
<el-option v-for="item in tagidList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select> -->
|
</el-form-item>
|
<el-form-item label="名称" prop="alarmname">
|
<el-input v-model="temp.alarmname
|
" :disabled="true" placeholder="请输入名称" />
|
</el-form-item>
|
<el-form-item label="公司" prop="companyid">
|
<!-- <el-select style="width: 100%;" :disabled="true" v-model="temp.companyid" filterable remote placeholder="请输入关键词"
|
:remote-method="searchMethod" :loading="searchloading">
|
<el-option v-for="item in options" :key="item.id" :label="item.companyname" :value="item.id">
|
</el-option>
|
</el-select> -->
|
<el-input v-model="company
|
" :disabled="true" placeholder="请输入公司" />
|
</el-form-item>
|
<el-form-item label="东位移预警值" prop="hdsv">
|
<el-input v-model="temp.edsv
|
" placeholder="请输入东位移预警值（单位毫米）" type="number" />
|
|
</el-form-item>
|
<el-form-item label="北位移预警值" prop="ndsv">
|
<el-input v-model="temp.ndsv
|
" placeholder="请输入北位移预警值（单位毫米）" type="number" />
|
</el-form-item>
|
<el-form-item label="天位移预警值" prop="edsv">
|
<el-input v-model="temp.hdsv
|
" placeholder="请输入天位移预警值（单位毫米）" type="number" />
|
</el-form-item>
|
|
<el-form-item label="告警电话" prop="phone">
|
|
<el-select style="width: 100%;" v-model="temp.phone" filterable remote placeholder="请选择报警人电话"
|
:remote-method="searchphMethod" :loading="searchloading">
|
<el-option v-for="item in phopneoptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <el-select style="width: 100%;" v-model="temp.phone" placeholder="请选择">
|
<el-option v-for="item in phopneoptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select> -->
|
</el-form-item>
|
|
<el-form-item label="应急广播" >
|
<el-select style="width: 100%;" v-model="temp.guangboid" filterable remote placeholder="请选择播放应急广播编号"
|
:remote-method="searchgbMethod" :loading="searchloading">
|
<el-option v-for="item in gaungboList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <el-select style="width: 100%;" v-model="temp.guangboid" placeholder="请选择">
|
<el-option v-for="item in gaungboList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select> -->
|
</el-form-item>
|
</el-form>
|
<div class="text-right">
|
<el-button type="danger" @click="dialogVisible = false">
|
取消
|
</el-button>
|
<el-button type="primary" @click="submit">
|
确定
|
</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import { getAlarmsystemPage, delAlarmsystem, addorupAlarmsystem, search, searchAlarmsystem, addSystemOperationLog, getGuangbo, getdevicestate,getDuanxin,getDuanxinfive,getGuangbofive,jzsearchfive,jzsearch } from '@/api/threshold'
|
import { deepClone } from '@/utils'
|
|
const _temp = {
|
id: '',
|
hdsv: '',
|
tagid: '',
|
ndsv: '',
|
edsv: '',
|
companyid: '',
|
alarmname: '',
|
}
|
|
export default {
|
components: {
|
Pagination
|
},
|
data() {
|
return {
|
tagidList:[],
|
company: '',
|
uadd: '',
|
udelete: '',
|
uupdate: '',
|
total: 0,
|
list: [],
|
menus: [],
|
phopneoptions: [],
|
gaungboList: [],
|
options: [],
|
searchloading: false,
|
listLoading: true,
|
listQuery: {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
},
|
uploadUrl: '',
|
temp: Object.assign({}, _temp),
|
dialogVisible: false,
|
dialogType: 'create',
|
loading: false,
|
rules: {
|
tagid: [
|
{ required: true, message: '请输入设备ID', trigger: 'blur' },
|
],
|
alarmname: [
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
],
|
companyid: [
|
{ required: true, message: '请选择公司', trigger: 'change' }
|
],
|
hdsv: [
|
{ required: true, message: '请输入东位移预警值', trigger: 'blur' }
|
],
|
edsv: [
|
{ required: true, message: '请输入天位移预警值', trigger: 'change' }
|
],
|
ndsv: [
|
{ required: true, message: '请输入北位移预警值', trigger: 'blur' }
|
],
|
guangboid: [
|
{ required: true, message: '请输入应急广播编号', trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '请输入告警电话', trigger: 'blur' }
|
]
|
},
|
}
|
},
|
created() {
|
this.fetchData()
|
},
|
methods: {
|
|
secode(event) {
|
if (event !== '') {
|
this.loading = true;
|
var params = { tagid: event }
|
getdevicestate(params).then(response => {
|
if (response.data.dataList2 == null || response.data.dataList2.type != 1) {
|
this.$message({
|
message: '编号错误',
|
type: 'error'
|
})
|
} else {
|
this.temp.alarmname = response.data.dataList2.anchorname
|
this.temp.companyid = response.data.dataList2.companyid
|
this.company = response.data.dataList2.company
|
}
|
})
|
} else {
|
// this.options = [];
|
}
|
},
|
|
searchgbMethod(query) {
|
if (query !== '') {
|
var params = { query: query }
|
this.gaungboList=[]
|
getGuangbo(params).then(response => {
|
for (let index = 0; index < response.data.length; index++) {
|
var json = {
|
value: '',
|
label: '',
|
}
|
const element = response.data[index];
|
json.value = element
|
json.label = element
|
this.gaungboList.push(json)
|
}
|
|
})
|
} else {
|
this.gaungboList = [];
|
}
|
},
|
|
searchphMethod(query) {
|
if (query !== '') {
|
this.phopneoptions=[]
|
var params = { query: query }
|
|
getDuanxin(params).then(response => {
|
for (let index = 0; index < response.data.length; index++) {
|
var json = {
|
value: '',
|
label: '',
|
}
|
const element = response.data[index];
|
json.value = element
|
json.label = element
|
this.phopneoptions.push(json)
|
}
|
|
})
|
} else {
|
this.phopneoptions = [];
|
}
|
},
|
|
// 远程搜索
|
jzsearchMethod(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { type: '1' }
|
jzsearch(params).then(response => {
|
this.tagidList = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.tagidList = [];
|
}
|
},
|
// 远程搜索
|
jzsearchMethodfive() {
|
|
this.loading = true;
|
var params = { type: '1' }
|
jzsearchfive(params).then(response => {
|
this.tagidList = response.data;
|
this.loading = false;
|
})
|
|
},
|
|
searchgbMethodfive(query) {
|
if (query !== '') {
|
var params = { query: query }
|
this.gaungboList=[]
|
getGuangbofive(params).then(response => {
|
for (let index = 0; index < response.data.length; index++) {
|
var json = {
|
value: '',
|
label: '',
|
}
|
const element = response.data[index];
|
json.value = element
|
json.label = element
|
this.gaungboList.push(json)
|
}
|
|
})
|
} else {
|
this.gaungboList = [];
|
}
|
},
|
|
searchphMethodfive(query) {
|
if (query !== '') {
|
this.phopneoptions=[]
|
var params = { query: query }
|
|
getDuanxinfive(params).then(response => {
|
for (let index = 0; index < response.data.length; index++) {
|
var json = {
|
value: '',
|
label: '',
|
}
|
const element = response.data[index];
|
json.value = element
|
json.label = element
|
this.phopneoptions.push(json)
|
}
|
|
})
|
} else {
|
this.phopneoptions = [];
|
}
|
},
|
// 远程搜索
|
searchMethod(query) {
|
if (query !== '') {
|
this.loading = true;
|
var params = { query: query }
|
search(params).then(response => {
|
this.options = response.data;
|
this.loading = false;
|
})
|
} else {
|
this.options = [];
|
}
|
},
|
// 搜索
|
search() {
|
this.listLoading = true
|
searchAlarmsystem(this.listQuery).then(response => {
|
if (response.data != null) {
|
this.list = response.data.records
|
this.total = response.data.total
|
} else {
|
this.$message({
|
message: '未搜索到数据',
|
type: 'error'
|
})
|
}
|
|
this.listLoading = false
|
})
|
},
|
refresh() {
|
this.listQuery = {
|
username: localStorage.getItem('username') || '',
|
current: 1,
|
size: 20,
|
keyword: undefined
|
}
|
this.fetchData()
|
},
|
// 分页数据
|
fetchData() {
|
this.uadd = localStorage.getItem('uadd') || '';
|
this.udelete = localStorage.getItem('udelete') || '';
|
this.uupdate = localStorage.getItem('uupdate') || '';
|
this.listLoading = true
|
getAlarmsystemPage(this.listQuery).then(response => {
|
this.list = response.data.records
|
this.total = response.data.total
|
this.listLoading = false
|
})
|
|
this.searchphMethodfive()
|
|
this.jzsearchMethodfive()
|
this.searchgbMethodfive()
|
|
},
|
resetTemp() {
|
this.temp = Object.assign({}, _temp)
|
},
|
add() {
|
this.resetTemp()
|
this.dialogVisible = true
|
this.dialogType = 'create'
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
edit(scope) {
|
this.resetTemp()
|
this.dialogVisible = true
|
this.dialogType = 'modify'
|
this.temp = deepClone(scope.row)
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
changeStatus(value, scope) {
|
setTimeout(() => {
|
this.list[scope.$index].status = value
|
this.$message({
|
message: '更新成功',
|
type: 'success'
|
})
|
}, 300)
|
},
|
// 删除
|
del(scope) {
|
this.$confirm('确认删除该条数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
setTimeout(() => {
|
const params = { id: scope.row.id };
|
this.list.splice(scope.$index, 1)
|
delAlarmsystem(params).then(response => {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '删除了一个报警阈值，该设备id为：' + scope.row.tagid };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.fetchData()
|
})
|
}, 300)
|
})
|
},
|
submit() {
|
// if (this.loading) {
|
// return
|
// }
|
this.loading = true
|
this.$refs[this.temp].validate((valid) => {
|
if (valid) {
|
addorupAlarmsystem(this.temp).then((response) => {
|
if (response.data==-1) {
|
this.$message({
|
message: '当前设备id已存在，请重新输入！',
|
type: 'error'
|
})
|
return
|
}
|
|
if (this.temp.id == "") {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '新增了一个报警阈值，该设备id为：' + this.temp.tagid };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
} else {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '修改了一个报警阈值，该设备id为：' + this.temp.tagid };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
}
|
this.fetchData()
|
|
setTimeout(() => {
|
this.$message({
|
message: '提交成功',
|
type: 'success'
|
})
|
this.dialogVisible = false
|
this.loading = false
|
}, 300)
|
})
|
} else {
|
this.$message({
|
message: '提交失败，请检查表单必填项是否为空',
|
type: 'error'
|
})
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-upload {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
.el-icon-plus.avatar-uploader-icon {
|
border: 1px dashed #d9d9d9 !important;
|
border-radius: 6px;
|
font-size: 28px;
|
color: #8c939d;
|
width: 128px;
|
height: 128px;
|
line-height: 128px;
|
text-align: center;
|
}
|
}
|
|
.avatar-uploader {
|
height: 128px;
|
|
img {
|
width: 128px;
|
height: 128px;
|
}
|
}
|
</style>
|
