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
Split 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>
<el-row>
<el-col :span="3">
<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="3"> </el-col>
<el-col :span="21">
<basic-container>
<avue-crud :option="option" :table-loading="loading" :data="data" 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">
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
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">
<el-select v-model="area">
<el-option label="业务区" value="1"></el-option>
@ -23,6 +32,15 @@
</el-select>
</template>
<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
v-model="startDate"
type="date"
@ -41,78 +59,254 @@
format="yyyy-MM-dd"
>
</el-date-picker>
</template>
</template> -->
</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>
</el-col>
</el-row>
</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>
import {
import {
getLazyList,
remove,
update,
add,
getDept,
getDeptTree
} from "@/api/system/dept";
import {
mapGetters
} from "vuex";
import website from '@/config/website';
import {getAlarmList,getDeptLazyTree} from '@/api/equipment'
getDeptTree,
} from "@/api/system/dept";
import { mapGetters } from "vuex";
import website from "@/config/website";
import { getAlarmList, getDeptLazyTree } from "@/api/equipment";
var DIC = {
alarmType: [{
label: '未知',
value: -1
},{
label: '事件报警',
value: 1
}, {
label: '设备报警',
value: 2
}],
statusType:[{
label:'报警中',
value:1
},{
label:'已恢复',
value:2
}],
aereaType:[{
label:'业务区',
value:'1'
},{
label:'塔台',
value:'2'
}],
recoveryType:[{
label: ' ',
value: -1
},{
label: '手动',
value: 1
}, {
label: '自动',
value: 0
}]
}
export default {
var DIC = {
alarmType: [
{
label: "未知",
value: -1,
},
{
label: "事件报警",
value: 1,
},
{
label: "设备报警",
value: 2,
},
],
statusType: [
{
label: "报警中",
value: 1,
},
{
label: "已恢复",
value: 2,
},
],
aereaType: [
{
label: "业务区",
value: "1",
},
{
label: "塔台",
value: "2",
},
],
recoveryType: [
{
label: " ",
value: -1,
},
{
label: "手动",
value: 1,
},
{
label: "自动",
value: 0,
},
],
};
export default {
data() {
return {
area:this.$route.query.area ? this.$route.query.area : '1',
classCode:this.$route.query.classCode ? this.$route.query.classCode : '',
startDate:'',
endDate:'',
myList: [
{
time: "2019-08-07 15:36:48",
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: {},
selectionList: [],
query: {},
loading: false,
parentId: 0,
page: {
pageSize: 10,
pageSize: 6,
currentPage: 1,
total: 0,
},
@ -129,129 +323,126 @@
viewBtn: true,
menuWidth: 80,
dialogClickModal: false,
addBtn:false,
delBtn:false,
editBtn:false,
addBtn: false,
delBtn: false,
editBtn: false,
column: [
{
label:'设备名称',
prop:'equipName',
align:'center'
label: "通讯状态",
prop: "equipName",
align: "center",
},
{
label: "设备位置",
label: "业务类别",
prop: "location",
align:'center'
align: "center",
},
{
label: "报警信息",
prop: "warnContent",
align:'center'
align: "center",
},
{
label:'报警区域',
prop:'area',
searchslot:true,
search:true,
type:"select",
dicData: DIC.aereaType,
// hide:true,
row: false,
display: false,
viewDisplay:false,
align:'center',
label: "业务类型",
prop: "warnType",
search: true,
type: "select",
dicData: DIC.alarmType,
align: "center",
},
{
label: "报警类型",
label: "状态",
prop: "warnType",
search: true,
type:"select",
type: "select",
dicData: DIC.alarmType,
align:'center',
align: "center",
},
{
label: "报警状态",
prop: "status",
type:"select",
type: "select",
dicData: DIC.statusType,
align:'center',
align: "center",
},
{
label: "报警时间",
prop: "warnDate",
type:'datetime',
width:"140",
type: "datetime",
width: "140",
// format:'yyyy-MM-dd',
// valueFormat:'yyyy-MM-dd',
align:'center',
align: "center",
},
{
label: "开始时间",
label: "",
prop: "startDate",
align:'center',
searchslot:true,
hide:true,
search:true,
row: false,
display: false,
viewDisplay:false
},
{
label: "结束时间",
prop: "endDate",
align:'center',
searchslot:true,
hide:true,
search:true,
align: "center",
searchslot: true,
hide: true,
search: true,
row: 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: "恢复方式",
prop: "recoveryType",
dicData: DIC.recoveryType,
type:"select",
align:'center',
type: "select",
align: "center",
},
{
label: "恢复人",
prop: "recoveryPerson",
align:'center',
align: "center",
},
{
label: "恢复时间",
prop: "recoveryDate",
type:'datetime',
align:'center',
type: "datetime",
align: "center",
},
]
],
},
data: [],
treeData:[],
treeData: [],
treeOption: {
nodeKey: 'id',
nodeKey: "id",
lazy: true,
treeLoad: function(node, resolve) {
const parentId = (node.level === 0) ? 0 : node.data.id;
getDeptLazyTree(parentId).then(res => {
resolve(res.data.data.map(item => {
treeLoad: function (node, resolve) {
const parentId = node.level === 0 ? 0 : node.data.id;
getDeptLazyTree(parentId).then((res) => {
resolve(
res.data.data.map((item) => {
return {
...item,
leaf: !item.hasChildren
}
}))
leaf: !item.hasChildren,
};
})
);
});
},
addBtn: false,
menu: false,
size: 'small',
size: "small",
props: {
labelText: '标题',
label: 'title',
value: 'value',
children: 'children'
}
labelText: "标题",
label: "title",
value: "value",
children: "children",
},
},
};
},
@ -262,26 +453,26 @@
addBtn: this.vaildData(this.permission.dept_add, false),
viewBtn: this.vaildData(this.permission.dept_view, 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() {
let ids = [];
this.selectionList.forEach(ele => {
this.selectionList.forEach((ele) => {
ids.push(ele.id);
});
return ids.join(",");
}
},
},
methods: {
nodeClick(data){
nodeClick(data) {
this.classCode = data.key;
this.page.currentPage = 1;
this.onLoad(this.page)
this.onLoad(this.page);
},
initData() {
getDeptTree().then(res => {
getDeptTree().then((res) => {
const column = this.findObject(this.option.column, "parentId");
column.dicData = res.data.data;
});
@ -294,7 +485,8 @@
this.$refs.crud.rowAdd();
},
rowSave(row, done, loading) {
add(row).then((res) => {
add(row).then(
(res) => {
// 获取新增数据的相关字段
const data = res.data.data;
row.id = data.id;
@ -302,33 +494,38 @@
row.tenantId = data.tenantId;
this.$message({
type: "success",
message: "操作成功!"
message: "操作成功!",
});
// 数据回调进行刷新
done(row);
}, error => {
},
(error) => {
window.console.log(error);
loading();
});
}
);
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
update(row).then(
() => {
this.$message({
type: "success",
message: "操作成功!"
message: "操作成功!",
});
// 数据回调进行刷新
done(row);
}, error => {
},
(error) => {
window.console.log(error);
loading();
});
}
);
},
rowDel(row, index, done) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(() => {
return remove(row.id);
@ -336,7 +533,7 @@
.then(() => {
this.$message({
type: "success",
message: "操作成功!"
message: "操作成功!",
});
// 数据回调进行刷新
done(row);
@ -350,7 +547,7 @@
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(() => {
return remove(this.ids);
@ -365,15 +562,15 @@
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
message: "操作成功!",
});
});
},
searchReset() {
this.query.warnType = '';
this.query.area = '1';
this.startDate = '';
this.page.currentPage = 1
this.query.warnType = "";
this.query.area = "1";
this.startDate = "";
this.page.currentPage = 1;
this.onLoad(this.page);
},
searchChange(params, done) {
@ -395,7 +592,6 @@
this.initData();
}
if (["edit", "view"].includes(type)) {
// getDept(this.form.id).then(res => {
// this.form = res.data.data;
// });
@ -420,13 +616,20 @@
},
onLoad() {
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.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.selectionClear();
@ -437,9 +640,8 @@
// resolve(res.data.data);
// });
// }
}
};
},
};
</script>
<style>
</style>

Write Preview
Loading…
Cancel
Save