smart-power-ui/src/views/iot/alarm/record/index.vue

400 lines
10 KiB
Vue

<template>
<!-- 告警记录功能 -->
<div class="app-container alarm-record">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="报警时间" prop="alarmTime">
<el-date-picker
v-model="time"
size="small"
@change="queryTimeChange"
clearable
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="告警类型" prop="typeName">
<el-input
v-model="queryParams.typeName"
placeholder="请输入告警类型"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['iot:record:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="recordList"
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
@sort-change="sortChange"
>
<el-table-column
type="index"
label="序号"
align="center"
:index="indexFormatter"
width="80px"
></el-table-column>
<el-table-column
label="设备名称"
align="left"
width="200px"
prop="deviceName"
/>
<!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
<template slot-scope="scope">
<span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
</template>
</el-table-column>-->
<el-table-column label="推送内容" align="left" prop="alarmContent" />
<el-table-column
label="报警时间"
align="center"
sortable="custom"
prop="alarmTime"
width="150"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="处理状态"
width="100px"
align="center"
prop="processState"
:formatter="stateFormatter"
/>
<el-table-column
label="处理结果"
align="left"
width="150px"
prop="processResult"
/>
<el-table-column
label="处理时间"
align="center"
prop="processTime"
sortable="custom"
width="150"
>
<template slot-scope="scope">
<span>{{
parseTime(scope.row.processTime, "{y}-{m}-{d} {h}:{i}:{s}")
}}</span>
</template>
</el-table-column>
<el-table-column
label="告警类型"
align="left"
width="150px"
prop="typeName"
/>
<!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
<el-table-column
label="操作"
width="150"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-show="scope.row.processStatus === '0'"
@click="handleUpdate(scope.row)"
>处理</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document-add"
@click="handleWork(scope.row)"
>创建工单</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<dialog-template :title="title" :visible="open" @close="open = false"
class="eldialog-wrap"
width="600px"
>
<el-form
ref="dialogForm"
:model="form"
slot="dialog-center"
:rules="rules"
label-width="100px"
>
<el-form-item label="处理结果:" prop="processResult">
<el-input
type="textarea"
:rows="2"
v-model="form.processResult"
placeholder="请输入处理结果"
/>
</el-form-item>
</el-form>
<div slot="dialog-footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="submitForm"
>确 定</el-button
>
<el-button size="mini" @click="open = false"> </el-button>
</div>
</dialog-template>
</div>
</template>
<script>
import { listRecord, getRecord, exportRecord, addAlarmRecord, updateRecord, handlerRecord } from "@/api/alarm/record";
import DialogTemplate from "@/components/DialogTemplate";
import Editor from "@/components/Editor";
export default {
name: "Record",
components: {
Editor,
DialogTemplate
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 报警记录表格数据
recordList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
typeName: null,
typeCode: null,
beginTime: null,
endTime: null,
alarmDivide: "ALARM",
},
// 表单参数
form: {},
// 表单校验
rules: {},
time: [],
};
},
created() {
this.getList();
},
methods: {
submitForm() {
this.$refs["dialogForm"].validate((v) => {
if (v) {
this.form.processTime = this.parseTime(
new Date(),
"{y}-{m}-{d} {h}:{i}:{s}"
);
this.form.processStatus = "2";
updateRecord(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
});
},
// 处理告警
handleUpdate(row) {
const recordId = row.recordId || this.ids;
this.$confirm('是否设置此告警为已处理状态?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return handlerRecord({ 'recordIds': recordId.split(',') });
}).then(() => {
this.getList();
this.msgSuccess("处理成功");
})
},
// 转工单处理
handleWork(row) {
console.log('addWork:', row)
this.$confirm("是否创建告警工单?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return addAlarmRecord({
recordId: row.recordId, //告警记录id
deviceId: row.deviceId,
deviceName: row.deviceName,
faultType: "3", //固定
maintenanceStatus: "-1", //固定(工单已生成)
tenantId: null,
faultTypeName: "告警工单", //固定
});
})
.then(() => {
this.msgSuccess("创建成功!");
// this.$router.push("/power/maintenance");
});
},
sortChange(column) {
const sort = {
isAsc: column.order === "descending" ? "desc" : "asc",
orderByColumn: column.prop,
};
this.queryParams = Object.assign(this.queryParams, sort);
this.handleQuery();
},
queryTimeChange(val) {
if (val) {
this.queryParams.beginTime = this.parseTime(
val[0],
"{y}-{m}-{d} {h}:{i}:{s}"
);
this.queryParams.endTime = this.parseTime(
val[1],
"{y}-{m}-{d} {h}:{i}:{s}"
);
} else {
this.queryParams.beginTime = null;
this.queryParams.endTime = null;
}
},
stateFormatter(val) {
switch (val.processStatus) {
case "1":
return "已处理";
case "0":
return "未处理";
case "2":
return "误报";
default:
return "未处理";
}
},
indexFormatter(val) {
return (
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
/** 查询报警记录列表 */
getList() {
this.loading = true;
listRecord(this.queryParams).then((response) => {
this.recordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 根据id获取记录详情
getRecordInfo(id) {
getRecord(id).then((res) => {
this.form = res.data;
this.open = true;
this.title = `告警记录详情`;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.time = [];
this.queryParams.beginTime = null;
this.queryParams.endTime = null;
this.handleQuery();
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有报警记录数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportRecord(queryParams);
})
.then((response) => {
this.download(response.msg);
});
},
},
};
</script>