|
|
<!-- 驾驶舱同人同述事件 -->
|
|
|
<template>
|
|
|
<div class="L-ultimately-container">
|
|
|
<header>
|
|
|
驾驶舱同人同述事件
|
|
|
<span class="title-span">解释：同人同诉的情况，关注这件事情多次投诉未解决。规则：15天内、同一人、发生超过5次的。如果超过30天则创建新事件。如果当天再发生不再推送新事件，第二天再发生再推送新事件。</span>
|
|
|
</header>
|
|
|
<div class="tabs">
|
|
|
<el-tabs
|
|
|
v-model="activeName"
|
|
|
@tab-click="handleClick"
|
|
|
style="color: #edeef0"
|
|
|
>
|
|
|
<el-tab-pane label="待审核" name="first" />
|
|
|
<el-tab-pane label="已上报" name="second" />
|
|
|
<el-tab-pane label="重训练" name="third" />
|
|
|
<el-tab-pane label="审核通过" name="four" />
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
<div class="container-info" id="L-size-main">
|
|
|
<header id="L-header">
|
|
|
<el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
|
|
|
<el-form-item label="事件标题：">
|
|
|
<el-input v-model="formInline.title" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="预警时间：">
|
|
|
<!-- <el-date-picker
|
|
|
class="ignoreElement"
|
|
|
v-model="formInline.firstWarnTimeDate"
|
|
|
format="yyyy"
|
|
|
value-format="yyyy"
|
|
|
type="year"
|
|
|
placeholder="选择年份">
|
|
|
</el-date-picker> -->
|
|
|
<el-date-picker
|
|
|
v-model="formInline.time"
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
type="datetimerange"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
placeholder="请选择"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
|
|
|
<el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</header>
|
|
|
<section>
|
|
|
<!-- :height="tabHeader" -->
|
|
|
<el-table v-loading="loading" :data="tableData" :height="tabHeader">
|
|
|
<el-table-column type="index" label="序号" width="100px" class-name="table-operation" align="center"/>
|
|
|
<el-table-column label="事件标题" key="title" width="400px" prop="title" />
|
|
|
<el-table-column label="预警时间" key="firstWarnTimeDate" width="300px" prop="firstWarnTimeDate" />
|
|
|
<el-table-column label="预警因素" key="warnFactor" width="400px" prop="warnFactor" />
|
|
|
<el-table-column label="事件数量" key="nums" width="100px" prop="nums" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div style="text-align: center;">{{ scope.row.nums }}条</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" class-name="table-operation-anniu" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div @click="audit(scope.row)" class="go-audit" v-if="activeName == 'first'">
|
|
|
<img src="@/assets/images/audit.png" alt="">
|
|
|
<span>审核</span>
|
|
|
</div>
|
|
|
<el-button v-else @click="audit(scope.row)" type="text" style="margin-right: 5px;" class="sqbtn sqbtn1">
|
|
|
查看详情
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<pagination
|
|
|
id="L-pagination"
|
|
|
:total="total"
|
|
|
:page="pagination.current"
|
|
|
:limit="pagination.size"
|
|
|
layout="total, prev, pager, next, jumper"
|
|
|
@pagination="getPagination"
|
|
|
:current-page.sync="pagination.current"
|
|
|
></pagination>
|
|
|
</section>
|
|
|
</div>
|
|
|
<event-audit title="事件审核" ref="eventAudit" :auditStatus="auditStatus" @closeDialog="getList"></event-audit>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { colonyPage } from "@/api/eventPage"
|
|
|
import EventAudit from '@/views/components/eventAudit.vue'
|
|
|
export default {
|
|
|
components:{
|
|
|
EventAudit,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
activeName: "first",
|
|
|
active: 0,
|
|
|
formInline:{
|
|
|
title:"",
|
|
|
time:[],
|
|
|
},
|
|
|
loading: false,
|
|
|
tableData: [
|
|
|
{
|
|
|
title:"关于大阳山景区交通拥堵问题",
|
|
|
firstWarnTimeDate:"2024-08-29 09:00:20",
|
|
|
warnFactor:"大阳山景区、交通拥堵",
|
|
|
msgTypeName:"8条"
|
|
|
},{
|
|
|
title:"关于大阳山景区交通拥堵问题",
|
|
|
firstWarnTimeDate:"2024-08-29 09:00:20",
|
|
|
warnFactor:"大阳山景区、交通拥堵",
|
|
|
msgTypeName:"8条"
|
|
|
},
|
|
|
],
|
|
|
tabHeader: null,
|
|
|
total:0,
|
|
|
pagination: {
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
msgType: '2',
|
|
|
isReport:null,
|
|
|
},
|
|
|
auditStatus: 1,
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getList();
|
|
|
this.cancalDebounce();
|
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
|
},
|
|
|
destroyed() {
|
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
|
},
|
|
|
methods:{
|
|
|
handleClick(e) {
|
|
|
if (this.activeName == "first") {
|
|
|
this.pagination.isReport = 4;
|
|
|
this.pagination.startTime = "";
|
|
|
this.pagination.endTime = "";
|
|
|
this.pagination.title = "";
|
|
|
this.formInline.title = "";
|
|
|
this.formInline.time = [];
|
|
|
this.auditStatus = 1;
|
|
|
this.getList();
|
|
|
} else if (this.activeName == "second") {
|
|
|
this.pagination.isReport = 1
|
|
|
this.pagination.startTime = "";
|
|
|
this.pagination.endTime = "";
|
|
|
this.pagination.title = "";
|
|
|
this.formInline.title = "";
|
|
|
this.formInline.time = [];
|
|
|
this.auditStatus = 2;
|
|
|
this.auditStatus = 2;
|
|
|
this.getList();
|
|
|
} else if (this.activeName == "third") {
|
|
|
this.pagination.isReport = 2
|
|
|
this.pagination.startTime = "";
|
|
|
this.pagination.endTime = "";
|
|
|
this.pagination.title = "";
|
|
|
this.formInline.title = "";
|
|
|
this.formInline.time = [];
|
|
|
this.auditStatus = 2;
|
|
|
this.auditStatus = 2;
|
|
|
this.getList();
|
|
|
} else if(this.activeName == "four") {
|
|
|
this.pagination.isReport = 3
|
|
|
this.pagination.startTime = "";
|
|
|
this.pagination.endTime = "";
|
|
|
this.pagination.title = "";
|
|
|
this.formInline.title = "";
|
|
|
this.formInline.time = [];
|
|
|
this.auditStatus = 2;
|
|
|
this.getList();
|
|
|
}
|
|
|
},
|
|
|
// 获取页码
|
|
|
getPagination(pages) {
|
|
|
this.pagination.current = pages.page;
|
|
|
this.pagination.size = pages.limit;
|
|
|
this.getList();
|
|
|
},
|
|
|
getList(){
|
|
|
this.loading = true;
|
|
|
colonyPage(this.pagination).then(res=>{
|
|
|
this.tableData = res.data.records
|
|
|
this.total = res.data.total
|
|
|
this.loading = false;
|
|
|
}).catch(err=>{
|
|
|
this.tableData = [];
|
|
|
this.loading = false;
|
|
|
})
|
|
|
},
|
|
|
resetQuery(){
|
|
|
this.formInline = {
|
|
|
title:"",
|
|
|
time:[],
|
|
|
}
|
|
|
this.pagination = {
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
msgType: '2',
|
|
|
isReport: this.activeName == "first" ? null : this.activeName == "second" ? 1 : this.activeName == "third" ? 2 : null,
|
|
|
}
|
|
|
this.getList();
|
|
|
},
|
|
|
// 查询
|
|
|
handleQuery(){
|
|
|
if(this.formInline.time.length > 0) {
|
|
|
this.formInline.startTime = this.formInline.time[0]
|
|
|
this.formInline.endTime = this.formInline.time[1]
|
|
|
}
|
|
|
this.pagination = {...this.pagination,...this.formInline}
|
|
|
this.getList();
|
|
|
},
|
|
|
audit(item){
|
|
|
this.$refs.eventAudit.open(item);
|
|
|
},
|
|
|
// 屏幕尺寸变化
|
|
|
cancalDebounce(){
|
|
|
const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
|
|
|
const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
|
|
|
const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
|
|
|
const elementHeight = element.offsetHeight;
|
|
|
const headerHeight = header.offsetHeight;
|
|
|
const paginationtHeight = pagination.offsetHeight;
|
|
|
this.tabHeader = elementHeight - headerHeight - paginationtHeight;
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
</style> |
