271 lines
7.5 KiB
Vue
271 lines
7.5 KiB
Vue
<template>
|
||
<div class="iot-child-device">
|
||
<div v-if="eventTypeList.length > 0" class="event-box">
|
||
<!-- 左侧事件类型列表 -->
|
||
<div :span="4" class="event-tabs">
|
||
<el-tabs v-model="activeEventType" style="min-height: 200px;width: 150px;height: 100%" tab-position="left" @tab-click="handleTabClick">
|
||
<el-tab-pane
|
||
v-for="item in eventTypeList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:name="item.id">
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="event-main">
|
||
<el-form
|
||
v-show="showSearch"
|
||
ref="queryForm"
|
||
:inline="true"
|
||
:model="queryParams"
|
||
label-width="68px"
|
||
>
|
||
<el-form-item label="时间">
|
||
<el-date-picker
|
||
v-model="pickerValue"
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
end-placeholder="结束日期"
|
||
range-separator="至"
|
||
size="small"
|
||
start-placeholder="开始日期"
|
||
type="datetimerange"
|
||
@change="pickerChange"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="eventList"
|
||
:default-sort="{ prop: 'timestamp', order: 'descending' }"
|
||
@sort-change="sortChange">
|
||
<el-table-column :index="indexFormatter" align="center" label="序号" type="index" width="80px"/>
|
||
<el-table-column
|
||
v-for="(item,index) in activeEventObj.valueType.properties"
|
||
:key="index"
|
||
:label="item.name"
|
||
:prop="item.id"
|
||
align="center"
|
||
/>
|
||
<el-table-column
|
||
:formatter="dateFormat"
|
||
align="center"
|
||
label="告警时间"
|
||
prop="timestamp"
|
||
sortable="custom"
|
||
width="160px"
|
||
/>
|
||
<el-table-column align="center" label="操作" width="100">
|
||
<template slot-scope="scope">
|
||
<el-button circle icon="el-icon-search" type="text" @click="openDetail(scope.row)"></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total > 0"
|
||
:limit.sync="queryParams.pageSize"
|
||
:page.sync="queryParams.pageNum"
|
||
:total="total"
|
||
@pagination="getDeviceLogList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-else style="padding: 100px;text-align: center">
|
||
<i class="el-icon-s-order" style="font-size: 50px;color: #999"></i>
|
||
<div style="color: #909399;margin-top: 10px">暂无事件</div>
|
||
</div>
|
||
<el-dialog
|
||
:visible.sync="eventContentShow"
|
||
class="params-eldialog"
|
||
title="详情"
|
||
top="5vh"
|
||
width="800px"
|
||
>
|
||
<json-viewer
|
||
:expand-depth="10"
|
||
:value="eventContent"
|
||
copyable
|
||
style="max-height: calc(100vh - 400px); overflow: auto"
|
||
>
|
||
</json-viewer>
|
||
<template #footer>
|
||
<el-button type="primary" @click="eventContentShow = false">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listDeviceEventLogList } from "@/api/iot/device";
|
||
import {formatDate} from "@/utils";
|
||
import JsonViewer from "vue-json-viewer";
|
||
import "vue-json-viewer/style.css";
|
||
|
||
export default {
|
||
name: 'EventLog',
|
||
props: ['sourceId', 'pDevcieInfo'],
|
||
components: {
|
||
JsonViewer
|
||
},
|
||
data() {
|
||
return {
|
||
// 查询参数
|
||
pickerValue: null,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
orderType: 2,
|
||
deviceId: null,
|
||
deviceName: null,
|
||
eventType: '',
|
||
beginTime: null,
|
||
endTime: null
|
||
},
|
||
showSearch: true,
|
||
// 设备表格数据
|
||
eventList: [],
|
||
total: 0,
|
||
eventTypeList: [],
|
||
activeEventType: '',
|
||
activeEventObj: {
|
||
id: '',
|
||
name: '',
|
||
valueType:{
|
||
type: 'object',
|
||
properties: []
|
||
}
|
||
},
|
||
eventContentShow:false,
|
||
eventContent:'',
|
||
}
|
||
},
|
||
created() {
|
||
this.getProdEventList();
|
||
},
|
||
methods: {
|
||
handleTabClick(tab) {
|
||
console.log("tab",tab)
|
||
this.eventTypeList.forEach(item => {
|
||
if (item.id === tab.name) {
|
||
this.activeEventObj = item;
|
||
}
|
||
});
|
||
this.handleQuery();
|
||
},
|
||
getProdEventList(){
|
||
this.eventTypeList = [];
|
||
let eventTypeList = [];
|
||
try {
|
||
let json = JSON.parse(this.pDevcieInfo.prodJson);
|
||
eventTypeList = json.events || [];
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
console.log("当前事件列表",eventTypeList);
|
||
this.eventTypeList = eventTypeList || [];
|
||
if(eventTypeList.length>0){
|
||
this.handleTabClick({name:eventTypeList[0].id});
|
||
this.activeEventType = eventTypeList[0].id;
|
||
}
|
||
},
|
||
indexFormatter(val) {
|
||
return val + 1 + ((this.queryParams.pageNum - 1) * this.queryParams.pageSize);
|
||
},
|
||
getDeviceLogList() {
|
||
this.loading = true;
|
||
this.queryParams.deviceId = this.sourceId;
|
||
|
||
// 如果activeEventType为空且有事件类型列表，则使用第一个事件类型
|
||
if (!this.activeEventType && this.eventTypeList.length > 0) {
|
||
this.activeEventType = this.eventTypeList[0].id;
|
||
this.activeEventObj = this.eventTypeList[0];
|
||
}
|
||
|
||
this.queryParams.eventType = this.activeEventType;
|
||
listDeviceEventLogList(this.queryParams).then(res => {
|
||
this.eventList = res.data.records;
|
||
this.total = res.data.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
handleQuery() {
|
||
let pickerValue = this.pickerValue
|
||
if (pickerValue != null) {
|
||
this.queryParams.beginTime = Date.parse(pickerValue[0]);
|
||
this.queryParams.endTime = Date.parse(pickerValue[1]);
|
||
}
|
||
this.queryParams.pageNum = 1;
|
||
this.getDeviceLogList();
|
||
},
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.resetPicker();
|
||
this.handleQuery();
|
||
},
|
||
resetPicker() {
|
||
this.pickerValue = null
|
||
this.queryParams.beginTime = null
|
||
this.queryParams.endTime = null
|
||
},
|
||
pickerChange(val) {
|
||
console.log("pickerChange", val)
|
||
if (val == null) {
|
||
this.resetPicker();
|
||
}
|
||
},
|
||
dateFormat(val) {
|
||
return formatDate(val.timestamp)
|
||
},
|
||
sortChange(column) {
|
||
const sort = {
|
||
orderType: column.order === "descending" ? 1 : 2,
|
||
};
|
||
this.queryParams = Object.assign(this.queryParams, sort);
|
||
this.handleQuery();
|
||
},
|
||
openDetail(item){
|
||
let eventContent = '';
|
||
try {
|
||
eventContent = JSON.parse(item.raw_data);
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
this.eventContent = eventContent;
|
||
this.eventContentShow = true;
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.iot-child-device {
|
||
.event-box{
|
||
display: flex;
|
||
.event-tabs {
|
||
width: 130px;
|
||
/* 调整标签栏样式 */
|
||
::v-deep .is-left.el-tabs__header {
|
||
width: 130px;
|
||
}
|
||
|
||
::v-deep .el-tabs--left .el-tabs__item {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
.event-main{
|
||
flex: 5;
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|