<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-input
|
v-model="listQuery.keyword"
|
size="small"
|
placeholder="请输入设备ID/设备名称"
|
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 size="small" type="primary" icon="el-icon-edit" @click="recordsall">
|
全部处理
|
</el-button>
|
<el-button size="small" type="primary" icon="el-icon-delete" @click="deleteall">
|
全部删除
|
</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="70">
|
<template slot-scope="scope">
|
{{ scope.row.id }}
|
</template>
|
</el-table-column>
|
<el-table-column label="设备ID" width="70">
|
<template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template>
|
</el-table-column>
|
<el-table-column label="设备名称" width="150">
|
<template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</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="报警类型" width="90">
|
<template slot-scope="scope">
|
{{ scope.row.alarmtype }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="设备点位坐标">
|
<template slot-scope="scope">
|
{{ scope.row.tagcoordinate }}
|
</template>
|
</el-table-column>
|
<el-table-column label="报警时间" width="180">
|
<template slot-scope="scope">
|
{{ scope.row.alarmtime }}
|
</template>
|
</el-table-column>
|
<el-table-column label="处理情况" width="90">
|
<template slot-scope="scope">
|
{{ scope.row.status }}
|
</template>
|
</el-table-column>
|
<el-table-column label="处理情况" width="90">
|
<template slot-scope="scope">
|
{{ scope.row.records }}
|
</template>
|
</el-table-column>
|
<el-table-column label="处理时间" width="180">
|
<template slot-scope="scope">
|
{{ scope.row.delltime }}
|
</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="dataForm" :model="temp" label-width="120px" label-position="right">
|
<el-form-item label="序号" v-if="dialogType != 'modifyall'">
|
<el-input v-model="temp.id" />
|
</el-form-item>
|
<el-form-item label="快速处理">
|
<div style="display: flex">
|
<div v-for="option in options" :key="option.value" style="margin-right: 15px">
|
<input
|
type="radio"
|
:id="option.value"
|
:value="option.value"
|
v-model="radio"
|
style="
|
margin-right: 5px;
|
width: 15px;
|
height: 15px;
|
-webkit-appearance: auto;
|
"
|
/>
|
<label :for="option.value">{{ option.text }}</label>
|
</div>
|
</div>
|
|
<!-- <el-radio-group v-model="radio" class="logradio">
|
<input type="radio" v-model="radio1" style="width: 10px;">无需处理
|
<input type="radio" v-model="radio2">误报
|
<input type="radio" v-model="radio3">已联系
|
<el-radio :label="2" class="logradio">无需处理</el-radio>
|
<el-radio :label="4" class="logradio">误报</el-radio>
|
<el-radio :label="8" class="logradio">已联系</el-radio>
|
</el-radio-group> -->
|
</el-form-item>
|
<el-form-item label="处理记录">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
placeholder="请输入处理记录"
|
v-model="temp.records"
|
>
|
</el-input>
|
<!-- <el-input v-model="temp.records
|
" placeholder="请输入处理记录" /> -->
|
</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 {
|
getAlarmrecordPage,
|
delAlarmrecord,
|
addorupAlarmrecord,
|
searchAlarmrecord,
|
addSystemOperationLog,
|
recordsall,
|
delAlarmrecordAll,
|
} from "@/api/Alarmrecord";
|
import { deepClone } from "@/utils";
|
|
const _temp = {
|
id: "",
|
status: "已处理",
|
records: "",
|
};
|
|
export default {
|
components: {
|
Pagination,
|
},
|
data() {
|
return {
|
selectedOption: "",
|
options: [
|
{ text: "无需处理", value: "无需处理" },
|
{ text: "误报", value: "误报" },
|
{ text: "已联系", value: "已联系" },
|
],
|
uadd: "",
|
udelete: "",
|
uupdate: "",
|
radio: "无需处理",
|
total: 0,
|
list: [],
|
menus: [],
|
listLoading: true,
|
listQuery: {
|
username: localStorage.getItem("username") || "",
|
current: 1,
|
size: 20,
|
keyword: undefined,
|
type: 1,
|
},
|
uploadUrl: "",
|
temp: Object.assign({}, _temp),
|
dialogVisible: false,
|
dialogType: "create",
|
loading: false,
|
};
|
},
|
|
created() {
|
this.fetchData();
|
},
|
methods: {
|
deleteall() {
|
if (this.list.length > 0) {
|
this.$prompt("输入删除密码", "确认全部删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
|
inputErrorMessage: "密码错误",
|
inputValidator: (value) => {
|
//input校验
|
if (value != 20151102) {
|
return "密码错误";
|
}
|
},
|
})
|
.then(({ value }) => {
|
delAlarmrecordAll(this.temp).then((response) => {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '删除了全部告警日志'};
|
addSystemOperationLog(params).then(response => {
|
|
})
|
this.fetchData();
|
});
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消删除",
|
});
|
});
|
} else {
|
this.$message({
|
type: "info",
|
message: "当前已无告警记录",
|
});
|
}
|
},
|
recordsall() {
|
this.dialogVisible = true;
|
this.dialogType = "modifyall";
|
},
|
// 搜索
|
search() {
|
this.listLoading = true;
|
searchAlarmrecord(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;
|
getAlarmrecordPage(this.listQuery).then((response) => {
|
this.list = response.data.records;
|
this.total = response.data.total;
|
this.listLoading = false;
|
});
|
},
|
resetTemp() {
|
this.temp = Object.assign({}, _temp);
|
},
|
add() {
|
this.resetTemp();
|
this.dialogVisible = true;
|
this.dialogType = "create";
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
edit(scope) {
|
if (scope.row.status == "已处理") {
|
this.$message.error("该告警已处理");
|
} else {
|
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);
|
delAlarmrecord(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;
|
}
|
if (!this.temp.records) {
|
this.temp.records = this.radio;
|
}
|
if (this.dialogType == "modifyall") {
|
this.loading = true;
|
recordsall(this.temp).then(() => {
|
this.temp.adminname = localStorage.getItem("username") || "";
|
const params = {
|
name: this.temp.adminname,
|
content: "处理了全部告警日志，处理情况为：" + this.temp.records,
|
};
|
addSystemOperationLog(params).then((response) => {});
|
this.fetchData();
|
setTimeout(() => {
|
this.$message({
|
message: "提交成功",
|
type: "success",
|
});
|
this.dialogVisible = false;
|
this.loading = false;
|
}, 300);
|
});
|
} else {
|
this.loading = true;
|
addorupAlarmrecord(this.temp).then(() => {
|
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);
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.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;
|
}
|
}
|
|
.aui-checkbox,
|
input[type="radio"] {
|
width: 15px;
|
height: 15px;
|
/* -webkit-appearance: none; */
|
/* -webkit-user-select: none; */
|
|
/* user-select: none; */
|
/* -webkit-transition: background-color .1s ease; */
|
/* transition: background-color .1s ease; */
|
-ms-flex-negative: 0;
|
/* flex-shrink: 0; */
|
/* border-radius: 0; */
|
/* margin: 0 3px 0 0 !important; */
|
/* position: relative; */
|
}
|
input[type="radio"]:checked:after,
|
input[type="radio"]:checked:before {
|
content: "";
|
}
|
.avatar-uploader {
|
height: 128px;
|
|
img {
|
width: 128px;
|
height: 128px;
|
}
|
}
|
</style>
|
