suojin
/
smartpark-front
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

业务数据监控 - 报警信息记录

Browse Source
main
sunjianxi 1 year ago
parent 157f4a96ad
commit 38a982436d
1 changed files with 621 additions and 419 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 526
      src/views/opsVisualization/warnHistory.vue

526
src/views/opsVisualization/warnHistory.vue
Unescape View File

@ -1,21 +1,30 @@
<template> <template>
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3"> </el-col>
<div class="box">
<el-scrollbar>
<basic-container>
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
</basic-container>
</el-scrollbar>
</div>
</el-col>
<el-col :span="21"> <el-col :span="21">
<basic-container> <basic-container>
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" <avue-crud
:permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel" :option="option"
@row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset" :table-loading="loading"
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" :data="data"
@refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad" :page.sync="page"> ref="crud"
v-model="form"
:permission="permissionList"
:before-open="beforeOpen"
:before-close="beforeClose"
@row-del="rowDel"
@row-update="rowUpdate"
@row-save="rowSave"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
@tree-load="treeLoad"
:page.sync="page"
>
<template slot-scope="scope" slot="areaSearch"> <template slot-scope="scope" slot="areaSearch">
<el-select v-model="area"> <el-select v-model="area">
<el-option label="业务区" value="1"></el-option> <el-option label="业务区" value="1"></el-option>
@ -23,6 +32,15 @@
</el-select> </el-select>
</template> </template>
<template slot-scope="scope" slot="startDateSearch"> <template slot-scope="scope" slot="startDateSearch">
<el-input
v-model="startDate"
placeholder=""
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
>
</el-input>
</template>
<!-- <template slot-scope="scope" slot="startDateSearch">
<el-date-picker <el-date-picker
v-model="startDate" v-model="startDate"
type="date" type="date"
@ -41,78 +59,254 @@
format="yyyy-MM-dd" format="yyyy-MM-dd"
> >
</el-date-picker> </el-date-picker>
</template> </template> -->
</avue-crud> </avue-crud>
<div class="box">
<div>
<span class="box_tab" style="margin-right: 50px">报警详情信息</span>
<span class="box_tab" style="color: #2b8ee5">报警信息记录</span>
</div>
<el-select placeholder="按报警时间查询" class="box_select">
</el-select>
<div class="timelineBox">
<div>
<div class="timelineBoxTitle">dtu报警信息记录</div>
<div class="timelineBoxContent">
<div
v-for="(item, index) in myList"
:key="item.time"
style="display: flex; align-items: center; line-height: 50px"
>
{{ item.time }}
<div
style="
width: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
"
>
<div
style="
width: 10px;
height: 10px;
border-radius: 50%;
background: #e1e1e1;
"
></div>
<div
v-if="index < myList.length - 1"
style="
border-right: 1px dashed #d1d1d1;
height: 45px;
position: absolute;
left: 19px;
top: 9px;
"
></div>
</div>
{{ item.content }}dtu编号:{{ item.id }}
</div>
</div>
</div>
<div>
<div class="timelineBoxTitle">设备报警信息详情</div>
<div class="timelineBoxContent">
<div
v-for="(item, index) in myList"
:key="item.time"
style="display: flex; align-items: center; line-height: 50px"
>
{{ item.time }}
<div
style="
width: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
"
>
<div
style="
width: 10px;
height: 10px;
border-radius: 50%;
background: #e1e1e1;
"
></div>
<div
v-if="index < myList.length - 1"
style="
border-right: 1px dashed #d1d1d1;
height: 45px;
position: absolute;
left: 19px;
top: 9px;
"
></div>
</div>
{{ item.content }}dtu编号:{{ item.id }}
</div>
</div>
</div>
</div>
</div>
</basic-container> </basic-container>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<style lang="scss" scoped>
.box {
width: 100%;
height: 26vh;
}
.tab_btn {
cursor: pointer;
}
.box_select {
width: 183px;
height: 30px;
margin-top: 20px;
}
.timelineBox {
margin-top: 30px;
width: 100%;
height: 19vh;
display: flex;
justify-content: space-around;
border: 1px solid #d1d1d1;
> div {
width: 50%;
}
> :nth-child(1) {
border-right: 1px solid #d1d1d1;
}
}
.timelineBoxTitle {
text-align: center;
height: 40px;
line-height: 40px;
background: #e5e5e5;
}
.timelineBoxContent {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
height: 132px;
}
</style>
<script> <script>
import { import {
getLazyList, getLazyList,
remove, remove,
update, update,
add, add,
getDept, getDept,
getDeptTree getDeptTree,
} from "@/api/system/dept"; } from "@/api/system/dept";
import { import { mapGetters } from "vuex";
mapGetters import website from "@/config/website";
} from "vuex"; import { getAlarmList, getDeptLazyTree } from "@/api/equipment";
import website from '@/config/website';
import {getAlarmList,getDeptLazyTree} from '@/api/equipment'
var DIC = { var DIC = {
alarmType: [{ alarmType: [
label: '未知', {
value: -1 label: "未知",
},{ value: -1,
label: '事件报警', },
value: 1 {
}, { label: "事件报警",
label: '设备报警', value: 1,
value: 2 },
}], {
statusType:[{ label: "设备报警",
label:'报警中', value: 2,
value:1 },
},{ ],
label:'已恢复', statusType: [
value:2 {
}], label: "报警中",
aereaType:[{ value: 1,
label:'业务区', },
value:'1' {
},{ label: "已恢复",
label:'塔台', value: 2,
value:'2' },
}], ],
recoveryType:[{ aereaType: [
label: ' ', {
value: -1 label: "业务区",
},{ value: "1",
label: '手动', },
value: 1 {
}, { label: "塔台",
label: '自动', value: "2",
value: 0 },
}] ],
} recoveryType: [
export default { {
label: " ",
value: -1,
},
{
label: "手动",
value: 1,
},
{
label: "自动",
value: 0,
},
],
};
export default {
data() { data() {
return { return {
area:this.$route.query.area ? this.$route.query.area : '1', myList: [
classCode:this.$route.query.classCode ? this.$route.query.classCode : '', {
startDate:'', time: "2019-08-07 15:36:48",
endDate:'', content: "dtu1002报警",
id: 1,
},
{
time: "2019-08-07 15:36:48",
content: "dtu1002报警",
id: 2,
},
{
time: "2019-08-07 15:36:48",
content: "dtu1002报警",
id: 2,
},
{
time: "2019-08-07 15:36:48",
content: "dtu1002报警",
id: 2,
},
{
time: "2019-08-07 15:36:48",
content: "dtu1002报警",
id: 2,
},
{
time: "2019-08-07 15:36:48",
content: "dtu1002报警",
id: 2,
},
],
area: this.$route.query.area ? this.$route.query.area : "1",
classCode: this.$route.query.classCode ? this.$route.query.classCode : "",
startDate: "",
endDate: "",
form: {}, form: {},
selectionList: [], selectionList: [],
query: {}, query: {},
loading: false, loading: false,
parentId: 0, parentId: 0,
page: { page: {
pageSize: 10, pageSize: 6,
currentPage: 1, currentPage: 1,
total: 0, total: 0,
}, },
@ -129,129 +323,126 @@
viewBtn: true, viewBtn: true,
menuWidth: 80, menuWidth: 80,
dialogClickModal: false, dialogClickModal: false,
addBtn:false, addBtn: false,
delBtn:false, delBtn: false,
editBtn:false, editBtn: false,
column: [ column: [
{ {
label:'设备名称', label: "通讯状态",
prop:'equipName', prop: "equipName",
align:'center' align: "center",
}, },
{ {
label: "设备位置", label: "业务类别",
prop: "location", prop: "location",
align:'center' align: "center",
}, },
{ {
label: "报警信息", label: "报警信息",
prop: "warnContent", prop: "warnContent",
align:'center' align: "center",
}, },
{ {
label:'报警区域', label: "业务类型",
prop:'area', prop: "warnType",
searchslot:true, search: true,
search:true, type: "select",
type:"select", dicData: DIC.alarmType,
dicData: DIC.aereaType, align: "center",
// hide:true,
row: false,
display: false,
viewDisplay:false,
align:'center',
}, },
{ {
label: "报警类型", label: "状态",
prop: "warnType", prop: "warnType",
search: true, search: true,
type:"select", type: "select",
dicData: DIC.alarmType, dicData: DIC.alarmType,
align:'center', align: "center",
}, },
{ {
label: "报警状态", label: "报警状态",
prop: "status", prop: "status",
type:"select", type: "select",
dicData: DIC.statusType, dicData: DIC.statusType,
align:'center', align: "center",
}, },
{ {
label: "报警时间", label: "报警时间",
prop: "warnDate", prop: "warnDate",
type:'datetime', type: "datetime",
width:"140", width: "140",
// format:'yyyy-MM-dd', // format:'yyyy-MM-dd',
// valueFormat:'yyyy-MM-dd', // valueFormat:'yyyy-MM-dd',
align:'center', align: "center",
}, },
{ {
label: "开始时间", label: "",
prop: "startDate", prop: "startDate",
align:'center', align: "center",
searchslot:true, searchslot: true,
hide:true, hide: true,
search:true, search: true,
row: false,
display: false,
viewDisplay:false
},
{
label: "结束时间",
prop: "endDate",
align:'center',
searchslot:true,
hide:true,
search:true,
row: false, row: false,
display: false, display: false,
viewDisplay:false viewDisplay: false,
}, },
// {
// label: "结束时间",
// prop: "endDate",
// align:'center',
// searchslot:true,
// hide:true,
// search:true,
// row: false,
// display: false,
// viewDisplay:false
// },
{ {
label: "恢复方式", label: "恢复方式",
prop: "recoveryType", prop: "recoveryType",
dicData: DIC.recoveryType, dicData: DIC.recoveryType,
type:"select", type: "select",
align:'center', align: "center",
}, },
{ {
label: "恢复人", label: "恢复人",
prop: "recoveryPerson", prop: "recoveryPerson",
align:'center', align: "center",
}, },
{ {
label: "恢复时间", label: "恢复时间",
prop: "recoveryDate", prop: "recoveryDate",
type:'datetime', type: "datetime",
align:'center', align: "center",
}, },
] ],
}, },
data: [], data: [],
treeData:[], treeData: [],
treeOption: { treeOption: {
nodeKey: 'id', nodeKey: "id",
lazy: true, lazy: true,
treeLoad: function(node, resolve) { treeLoad: function (node, resolve) {
const parentId = (node.level === 0) ? 0 : node.data.id; const parentId = node.level === 0 ? 0 : node.data.id;
getDeptLazyTree(parentId).then(res => { getDeptLazyTree(parentId).then((res) => {
resolve(res.data.data.map(item => { resolve(
res.data.data.map((item) => {
return { return {
...item, ...item,
leaf: !item.hasChildren leaf: !item.hasChildren,
} };
})) })
);
}); });
}, },
addBtn: false, addBtn: false,
menu: false, menu: false,
size: 'small', size: "small",
props: { props: {
labelText: '标题', labelText: "标题",
label: 'title', label: "title",
value: 'value', value: "value",
children: 'children' children: "children",
} },
}, },
}; };
}, },
@ -262,26 +453,26 @@
addBtn: this.vaildData(this.permission.dept_add, false), addBtn: this.vaildData(this.permission.dept_add, false),
viewBtn: this.vaildData(this.permission.dept_view, false), viewBtn: this.vaildData(this.permission.dept_view, false),
delBtn: this.vaildData(this.permission.dept_delete, false), delBtn: this.vaildData(this.permission.dept_delete, false),
editBtn: this.vaildData(this.permission.dept_edit, false) editBtn: this.vaildData(this.permission.dept_edit, false),
}; };
}, },
ids() { ids() {
let ids = []; let ids = [];
this.selectionList.forEach(ele => { this.selectionList.forEach((ele) => {
ids.push(ele.id); ids.push(ele.id);
}); });
return ids.join(","); return ids.join(",");
} },
}, },
methods: { methods: {
nodeClick(data){ nodeClick(data) {
this.classCode = data.key; this.classCode = data.key;
this.page.currentPage = 1; this.page.currentPage = 1;
this.onLoad(this.page) this.onLoad(this.page);
}, },
initData() { initData() {
getDeptTree().then(res => { getDeptTree().then((res) => {
const column = this.findObject(this.option.column, "parentId"); const column = this.findObject(this.option.column, "parentId");
column.dicData = res.data.data; column.dicData = res.data.data;
}); });
@ -294,7 +485,8 @@
this.$refs.crud.rowAdd(); this.$refs.crud.rowAdd();
}, },
rowSave(row, done, loading) { rowSave(row, done, loading) {
add(row).then((res) => { add(row).then(
(res) => {
// 获取新增数据的相关字段 // 获取新增数据的相关字段
const data = res.data.data; const data = res.data.data;
row.id = data.id; row.id = data.id;
@ -302,33 +494,38 @@
row.tenantId = data.tenantId; row.tenantId = data.tenantId;
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!",
}); });
// 数据回调进行刷新 // 数据回调进行刷新
done(row); done(row);
}, error => { },
(error) => {
window.console.log(error); window.console.log(error);
loading(); loading();
}); }
);
}, },
rowUpdate(row, index, done, loading) { rowUpdate(row, index, done, loading) {
update(row).then(() => { update(row).then(
() => {
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!",
}); });
// 数据回调进行刷新 // 数据回调进行刷新
done(row); done(row);
}, error => { },
(error) => {
window.console.log(error); window.console.log(error);
loading(); loading();
}); }
);
}, },
rowDel(row, index, done) { rowDel(row, index, done) {
this.$confirm("确定将选择数据删除?", { this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
return remove(row.id); return remove(row.id);
@ -336,7 +533,7 @@
.then(() => { .then(() => {
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!",
}); });
// 数据回调进行刷新 // 数据回调进行刷新
done(row); done(row);
@ -350,7 +547,7 @@
this.$confirm("确定将选择数据删除?", { this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
return remove(this.ids); return remove(this.ids);
@ -365,15 +562,15 @@
this.onLoad(this.page); this.onLoad(this.page);
this.$message({ this.$message({
type: "success", type: "success",
message: "操作成功!" message: "操作成功!",
}); });
}); });
}, },
searchReset() { searchReset() {
this.query.warnType = ''; this.query.warnType = "";
this.query.area = '1'; this.query.area = "1";
this.startDate = ''; this.startDate = "";
this.page.currentPage = 1 this.page.currentPage = 1;
this.onLoad(this.page); this.onLoad(this.page);
}, },
searchChange(params, done) { searchChange(params, done) {
@ -395,7 +592,6 @@
this.initData(); this.initData();
} }
if (["edit", "view"].includes(type)) { if (["edit", "view"].includes(type)) {
// getDept(this.form.id).then(res => { // getDept(this.form.id).then(res => {
// this.form = res.data.data; // this.form = res.data.data;
// }); // });
@ -420,13 +616,20 @@
}, },
onLoad() { onLoad() {
this.loading = true; this.loading = true;
getAlarmList(this.query.warnType,this.startDate,this.endDate,this.page.currentPage,this.page.pageSize,this.area,this.classCode).then(res => { getAlarmList(
this.query.warnType,
this.startDate,
this.endDate,
this.page.currentPage,
this.page.pageSize,
this.area,
this.classCode
).then((res) => {
this.data = res.data.data.records; this.data = res.data.data.records;
// this.page.total = res.data.data.total // this.page.total = res.data.data.total
this.page.total = res.data.data.total; this.page.total = res.data.data.total;
console.log(this.page) console.log(this.page);
this.loading = false; this.loading = false;
}); });
// this.selectionClear(); // this.selectionClear();
@ -437,9 +640,8 @@
// resolve(res.data.data); // resolve(res.data.data);
// }); // });
// } // }
} },
}; };
</script> </script>
<style>
</style>

Write Preview
Loading…
Cancel
Save