报警菜单和大屏修改

This commit is contained in:
zhangjunwen 2024-04-12 10:29:42 +08:00
parent d19de99ff4
commit c7db1f18c9
7 changed files with 1139 additions and 232 deletions

View File

@ -5,15 +5,25 @@
</template>
<script>
export default {
name: 'App',
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
}
export default {
name: "App",
metaInfo() {
return {
title:
this.$store.state.settings.dynamicTitle &&
this.$store.state.settings.title,
titleTemplate: (title) => {
return title
? `${title} - ${process.env.VUE_APP_TITLE}`
: process.env.VUE_APP_TITLE;
},
};
},
};
</script>
<style>
.el-picker-panel__sidebar,
.el-picker-panel__footer {
background-color: #001129;
}
</style>

View File

@ -9,6 +9,14 @@ export function listInfo(query) {
});
}
export function listAllInfo(query) {
return request({
url: "/equip/info/listAll",
method: "get",
params: query,
});
}
// 查询设备信息详细
export function getInfo(id) {
return request({

View File

@ -0,0 +1,52 @@
import request from "@/utils/request";
// 查询报警记录列表
export function listRecord(query) {
return request({
url: "/alarm/record/list",
method: "get",
params: query,
});
}
// 查询报警记录详细
export function getRecord(id) {
return request({
url: "/alarm/record/" + id,
method: "get",
});
}
// 新增报警记录
export function addRecord(data) {
return request({
url: "/alarm/record",
method: "post",
data: data,
});
}
// 修改报警记录
export function updateRecord(data) {
return request({
url: "/alarm/record",
method: "put",
data: data,
});
}
export function batchUpdateAlarmRecord(data) {
return request({
url: "/alarm/record/batchUpdate",
method: "post",
data: data,
});
}
// 删除报警记录
export function delRecord(id) {
return request({
url: "/alarm/record/" + id,
method: "delete",
});
}

View File

@ -14,7 +14,7 @@
</div>
<el-tabs
v-model="activeName"
type="card"
type="border-card"
@tab-click="handleTabClick"
>
<el-tab-pane

View File

@ -297,11 +297,11 @@
<script>
import {
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
listMonitorInfo,
getMonitorInfo,
delMonitorInfo,
addMonitorInfo,
updateMonitorInfo,
} from "@/api/industrial/monitorData";
export default {
@ -350,7 +350,7 @@ export default {
/** 查询监控数据信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
listMonitorInfo(this.queryParams).then((response) => {
this.infoList = response.rows;
this.total = response.total;
this.loading = false;
@ -405,7 +405,7 @@ export default {
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getInfo(id).then((response) => {
getMonitorInfo(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改监控数据信息";
@ -416,13 +416,13 @@ export default {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateInfo(this.form).then((response) => {
updateMonitorInfo(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then((response) => {
addMonitorInfo(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -437,7 +437,7 @@ export default {
this.$modal
.confirm('是否确认删除监控数据信息编号为"' + ids + '"的数据项?')
.then(function () {
return delInfo(ids);
return delMonitorInfo(ids);
})
.then(() => {
this.getList();

View File

@ -0,0 +1,655 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
style="text-align:right"
>
<el-form-item
label="监测设备"
prop="equipId"
>
<el-select
v-model="queryParams.equipId"
placeholder="请选择监测设备"
clearable
@change="equipChange"
>
<el-option
v-for="field in equipList"
:key="field.value"
:label="field.label"
:value="field.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="参数名称"
prop="alarmRulesId"
>
<el-select
v-model="queryParams.alarmRulesId"
placeholder="请选择监测部位"
:disabled="queryParams.equipId == null"
clearable
>
<el-option
v-for="field in rulesList"
:key="field.value"
:label="field.label"
:value="field.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="报警等级"
prop="alarmLevel"
>
<el-select
v-model="queryParams.alarmLevel"
placeholder="请选择报警等级"
clearable
>
<el-option
v-for="dict in dict.type.alarm_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="报警时间"
prop="alarmTime"
>
<el-date-picker
class="picker"
v-model="queryParams.datetimerange"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="状态"
prop="alarmStatus"
>
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
>
<el-option
v-for="dict in dict.type.alarm_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</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="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="multiple"
@click="handleUpdate"
>批量处理</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="recordList"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
/>
<el-table-column
label="监测设备名称"
align="center"
prop="equipInfo.equipName"
/>
<el-table-column
label="参数名称"
align="center"
prop="alarmRules.alarmName"
/>
<el-table-column
label="报警值"
align="center"
prop="alarmValue"
/>
<el-table-column
label="单位"
align="center"
prop="alarmRules.alarmInfoUnit"
/>
<el-table-column
label="报警内容"
align="center"
prop="content"
/>
<el-table-column
label="报警等级"
align="center"
prop="alarmLevel"
/>
<el-table-column
label="报警时间"
align="center"
prop="alarmTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column
label="报警记录的状态"
align="center"
prop="status"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.alarm_status"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column
label="处理结果"
align="center"
prop="result"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(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"
/>
<!-- 添加或修改报警记录对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="500px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
>
<el-row v-if="!isBatchUpdate">
<el-col :span="12">
<el-form-item
label="监测设备名称"
prop="part"
>
<span class="color-green">{{ form.equipInfo.equipName }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="参数名称"
prop="alarmName"
>
<span class="color-green">{{ form.alarmRules.alarmName }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="!isBatchUpdate">
<el-col :span="12">
<el-form-item
label="报警值"
prop="alarmValue"
>
<span class="color-green">{{ form.alarmValue }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="参数单位"
prop="unit"
>
<span class="color-green">{{ form.alarmRules.alarmInfoUnit }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="!isBatchUpdate">
<el-col :span="12">
<el-form-item
label="报警等级"
prop="alarmLevel"
>
<dict-tag
:options="dict.type.alarm_level"
:value="form.alarmLevel"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="报警时间"
prop="alarmTime"
>
<span class="color-green">{{ parseTime(form.alarmTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="!isBatchUpdate">
<el-col :span="24">
<el-form-item
label="报警内容"
prop="content"
>
<span class="color-green">{{ form.content }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="!isBatchUpdate">
<el-col :span="24">
<el-form-item label="状态">
<dict-tag
:options="dict.type.alarm_status"
:value="form.status"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="处理结果"
prop="result"
>
<el-input
v-if="isUpdate"
v-model="form.result"
type="textarea"
placeholder="请输入处理结果"
/>
<span
v-if="!isUpdate"
class="color-green"
>{{ form.result }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div
slot="footer"
class="dialog-footer"
>
<el-button
v-if="isUpdate"
type="primary"
@click="submitForm"
> </el-button>
<el-button
@click="cancel"
v-if="isUpdate"
> </el-button>
<el-button
@click="cancel"
v-if="!isUpdate"
> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listRecord,
getRecord,
delRecord,
addRecord,
updateRecord,
batchUpdateAlarmRecord,
} from "@/api/industrial/record";
import { listAllRules } from "@/api/industrial/rules";
import { listAllInfo } from "@/api/equip/equip";
export default {
name: "Record",
dicts: ["alarm_level", "alarm_status"],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
recordList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
alarmRulesId: null,
equipId: null,
sensorId: null,
content: null,
alramValue: null,
alarmTime: null,
result: null,
status: null,
operator: null,
params: {},
},
//
form: {},
pickerOptions: {
shortcuts: [
{
text: "最近一小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
//
rules: {},
//
equipList: [],
//
rulesList: [],
//
isBatchUpdate: true,
//
isUpdate: true,
selections: [],
};
},
created() {
this.getEquipInfo();
this.getList();
},
methods: {
//
equipChange() {
this.rulesList = [];
let query = {
equipId: this.queryParams.equipId,
};
listAllRules(query).then((response) => {
let list = response.data;
if (list.length <= 0) {
return;
}
list.forEach((element) => {
this.rulesList.push({
value: element.id,
label: element.alarmName,
});
});
});
},
//
getEquipInfo() {
listAllInfo().then((response) => {
let list = response.data;
if (list.length <= 0) {
return;
}
list.forEach((element) => {
this.equipList.push({
value: element.id,
label: element.equipName,
});
});
});
},
/** 查询报警记录列表 */
getList() {
this.loading = true;
if (this.queryParams.datetimerange && this.queryParams.datetimerange[0]) {
this.queryParams.params.startTime = this.dateToStr(
this.queryParams.datetimerange[0]
);
this.queryParams.params.endTime = this.dateToStr(
this.queryParams.datetimerange[1]
);
}
listRecord(this.queryParams).then((response) => {
this.recordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
alarmRulesId: null,
equipId: null,
sensorId: null,
content: null,
alramValue: null,
alarmTime: null,
result: null,
status: 0,
operator: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.selections = selection;
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加报警记录";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.isUpdate = true;
if (row && row.id) {
const id = row.id;
getRecord(id).then((response) => {
this.form = response.data;
this.isBatchUpdate = false;
this.open = true;
this.title = "修改报警记录";
});
} else {
//
if (this.selections.find((item) => item.status == 1)) {
this.$modal.msgError("存在已处理的报警记录,请重新选择!");
return;
}
this.isBatchUpdate = true;
this.open = true;
this.title = "批量处理报警记录";
}
},
/** 查看按钮操作 */
handleView(row) {
this.reset();
this.isUpdate = false;
this.isBatchUpdate = false;
const id = row.id;
getRecord(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "处理报警记录";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
const ids = this.form.id ? [this.form.id] : this.ids;
if (valid) {
batchUpdateAlarmRecord({
ids: ids,
result: this.form.result,
}).then((response) => {
this.$modal.msgSuccess("处理成功");
this.open = false;
this.getList();
});
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除报警记录编号为"' + ids + '"的数据项?')
.then(function () {
return delRecord(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/record/export",
{
...this.queryParams,
},
`record_${new Date().getTime()}.xlsx`
);
},
},
};
</script>

File diff suppressed because it is too large Load Diff