parent
7fa52f6038
commit
ec1eac282f
@ -0,0 +1,17 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询算法事件列表
|
||||
export function new100Page() {
|
||||
return request({
|
||||
url: '/earlyWarningAudit/massEvents/new100Page',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function colonyPage(params){
|
||||
return request({
|
||||
url: '/earlyWarningAudit/massEvents/colonyPage',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 779 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,124 @@
|
||||
.L-ultimately-container {
|
||||
margin: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: scroll;
|
||||
padding: 20px 0 10px 0;
|
||||
header {
|
||||
padding: 0 20px;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.tabs {
|
||||
margin-top: 10px;
|
||||
.el-tabs {
|
||||
height: 100%;
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 20px !important;
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
width: 60px;
|
||||
border-radius: 5px;
|
||||
height: 4px;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
// 选中样式修改
|
||||
.el-tabs__item.is-active {
|
||||
}
|
||||
}
|
||||
}
|
||||
.container-info {
|
||||
height: calc(100% - 138px);
|
||||
padding: 0 20px;
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: #FAFBFC;
|
||||
padding: 20px;
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-right: 60px;
|
||||
.el-form-item__label {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
.el-input__inner {
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 480px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section {
|
||||
margin-top: 20px;
|
||||
.el-table {
|
||||
|
||||
th {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #3D3D3D;
|
||||
height: 50px;
|
||||
background-color: #F9FAFC;
|
||||
border: none;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
text-align: left;
|
||||
color: #666666;
|
||||
}
|
||||
.table-operation {
|
||||
text-align: center;
|
||||
}
|
||||
.table-operation-anniu {
|
||||
.cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.go-audit {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 21px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.span {
|
||||
color: #2F8AE5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
// 去掉弹框默认样式
|
||||
.leaflet-popup-content-wrapper {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.leaflet-popup-close-button {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
display: none;
|
||||
}
|
||||
.marsk-box {
|
||||
.markerDialog {
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
|
||||
.markerTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
background-color: #F4F9FD;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 5px 10px;
|
||||
.marker-msgTitle {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="event-box">
|
||||
<div class="event-background"></div>
|
||||
<div class="event-right">
|
||||
<div class="msgType">群体事件</div>
|
||||
<div class="msgContent">四季花园业主反映道路噪声问题</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.event-box {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #4C4C4C;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
|
||||
.event-background {
|
||||
background: url("../../assets/images/eventPrompt.png");
|
||||
background-size: 100% 100%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.event-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.msgType {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #F43147;
|
||||
}
|
||||
.msgContent {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1 +1,197 @@
|
||||
<!-- 驾驶舱重点人员事件 -->
|
||||
<!-- 驾驶舱重点人员事件 -->
|
||||
<template>
|
||||
<div class="L-ultimately-container">
|
||||
<header>驾驶舱重点人员事件</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-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.firstWarnTime"
|
||||
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="firstWarnTime" width="300px" prop="firstWarnTime" />
|
||||
<el-table-column label="预警因素" key="warnFactor" width="400px" prop="warnFactor" />
|
||||
<el-table-column label="事件数量" key="msgTypeName" width="200px" prop="msgTypeName" />
|
||||
<el-table-column label="操作" class-name="table-operation-anniu" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div @click="audit(scope.row)" class="go-audit">
|
||||
<img src="@/assets/images/audit.png" alt="">
|
||||
<span>审核</span>
|
||||
</div>
|
||||
</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"></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:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},{
|
||||
title:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},
|
||||
],
|
||||
tabHeader: null,
|
||||
total:0,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
msgType: '4',
|
||||
isReport:null,
|
||||
},
|
||||
}
|
||||
},
|
||||
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 = null
|
||||
this.getList();
|
||||
} else if (this.activeName == "second") {
|
||||
this.pagination.isReport = 1
|
||||
this.getList();
|
||||
} else if (this.activeName == "third") {
|
||||
this.pagination.isReport = 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: '4',
|
||||
isReport: this.activeName == "first" ? null : this.activeName == "second" ? 1 : this.activeName == "third" ? 2 : null,
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
handleQuery(){
|
||||
console.log(this.formInline);
|
||||
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>
|
||||
@ -1 +1,197 @@
|
||||
<!-- 驾驶舱一人多诉事件 -->
|
||||
<!-- 驾驶舱一人多诉事件 -->
|
||||
<template>
|
||||
<div class="L-ultimately-container">
|
||||
<header>驾驶舱一人多诉事件</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-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.firstWarnTime"
|
||||
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="firstWarnTime" width="300px" prop="firstWarnTime" />
|
||||
<el-table-column label="预警因素" key="warnFactor" width="400px" prop="warnFactor" />
|
||||
<el-table-column label="事件数量" key="msgTypeName" width="200px" prop="msgTypeName" />
|
||||
<el-table-column label="操作" class-name="table-operation-anniu" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div @click="audit(scope.row)" class="go-audit">
|
||||
<img src="@/assets/images/audit.png" alt="">
|
||||
<span>审核</span>
|
||||
</div>
|
||||
</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"></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:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},{
|
||||
title:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},
|
||||
],
|
||||
tabHeader: null,
|
||||
total:0,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
msgType: '5',
|
||||
isReport:null,
|
||||
},
|
||||
}
|
||||
},
|
||||
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 = null
|
||||
this.getList();
|
||||
} else if (this.activeName == "second") {
|
||||
this.pagination.isReport = 1
|
||||
this.getList();
|
||||
} else if (this.activeName == "third") {
|
||||
this.pagination.isReport = 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: '5',
|
||||
isReport: this.activeName == "first" ? null : this.activeName == "second" ? 1 : this.activeName == "third" ? 2 : null,
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
handleQuery(){
|
||||
console.log(this.formInline);
|
||||
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>
|
||||
@ -1 +1,197 @@
|
||||
<!-- 驾驶舱同人同述事件 -->
|
||||
<!-- 驾驶舱同人同述事件 -->
|
||||
<template>
|
||||
<div class="L-ultimately-container">
|
||||
<header>驾驶舱同人同述事件</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-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.firstWarnTime"
|
||||
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="firstWarnTime" width="300px" prop="firstWarnTime" />
|
||||
<el-table-column label="预警因素" key="warnFactor" width="400px" prop="warnFactor" />
|
||||
<el-table-column label="事件数量" key="msgTypeName" width="200px" prop="msgTypeName" />
|
||||
<el-table-column label="操作" class-name="table-operation-anniu" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div @click="audit(scope.row)" class="go-audit">
|
||||
<img src="@/assets/images/audit.png" alt="">
|
||||
<span>审核</span>
|
||||
</div>
|
||||
</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"></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:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},{
|
||||
title:"关于大阳山景区交通拥堵问题",
|
||||
firstWarnTime:"2024-08-29 09:00:20",
|
||||
warnFactor:"大阳山景区、交通拥堵",
|
||||
msgTypeName:"8条"
|
||||
},
|
||||
],
|
||||
tabHeader: null,
|
||||
total:0,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
msgType: '2',
|
||||
isReport:null,
|
||||
},
|
||||
}
|
||||
},
|
||||
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 = null
|
||||
this.getList();
|
||||
} else if (this.activeName == "second") {
|
||||
this.pagination.isReport = 1
|
||||
this.getList();
|
||||
} else if (this.activeName == "third") {
|
||||
this.pagination.isReport = 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(){
|
||||
console.log(this.formInline);
|
||||
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>
|
||||
Loading…
Reference in new issue