<template>
|
<div class="illegal-search">
|
<header>
|
<div class="headerContent">
|
<!-- 条件筛选 -->
|
<el-form ref="condition" :model="form" label-width="100px">
|
<el-form-item :label=item.label :key=item.id v-for="item in headerList" :prop="item.prop">
|
<el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
|
<el-cascader v-if="item.type === 'cascader'" :options="item.options" :props="{ value: 'id', label: 'regionName' }"
|
v-model="form[item.prop]" :placeholder="item.placeholder"></el-cascader>
|
<el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder">
|
<el-option v-for="option in item.options" :value="option.id" :key="option.id" :label="option.name"></el-option>
|
</el-select>
|
<el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" start-placeholder="开始日期"
|
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</el-form-item>
|
</el-form>
|
</div>
|
</header>
|
<main>
|
<div class="mainContent">
|
<!-- 按钮区域 -->
|
<div class="main-btns">
|
<div class="main-btns-left">
|
<!-- <el-button icon="el-icon-download">下载图片</el-button>-->
|
<el-button icon="el-icon-folder" @click="exportTableData">导出</el-button>
|
</div>
|
<div class="main-btns-right">
|
<el-button icon="el-icon-search" @click="searchTableData">查询</el-button>
|
<el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
|
</div>
|
</div>
|
<!-- 数据展示 -->
|
<el-table ref="multipleTable"
|
:header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }"
|
:data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
|
<el-table-column type="selection" min-width="5">
|
</el-table-column>
|
<el-table-column prop="code" label="事件编号" min-width="10">
|
</el-table-column>
|
<el-table-column prop="typeName" label="违规类型" min-width="10">
|
</el-table-column>
|
<el-table-column prop="eventSource" label="事件来源" min-width="10">
|
</el-table-column>
|
<el-table-column prop="gradeName" label="事件等级" min-width="10">
|
</el-table-column>
|
<el-table-column prop="streetName" label="报警点位" min-width="10">
|
</el-table-column>
|
<el-table-column prop="site" label="所属组织" min-width="10">
|
</el-table-column>
|
<el-table-column prop="alarmTime" label="报警时间" min-width="12">
|
</el-table-column>
|
<el-table-column prop="continueTime" label="持续时间" min-width="12">
|
</el-table-column>
|
<el-table-column prop="carNumber" label="车牌号码" min-width="10">
|
</el-table-column>
|
<el-table-column prop="state" label="审核状态" min-width="10">
|
</el-table-column>
|
<el-table-column prop="handlingOpinion" label="处理意见" min-width="10">
|
</el-table-column>
|
<el-table-column prop="operation" label="操作" min-width="15">
|
<template slot-scope="scope">
|
<div class="operation">
|
<span @click="handleView(scope.row)">查看</span>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</main>
|
<footer>
|
<!-- 查看具体信息 -->
|
<el-dialog title="事件详情" destroy-on-close :visible.sync="dialogView" width="45%" :before-close="handleClose">
|
<ViewInfo :info="info"></ViewInfo>
|
</el-dialog>
|
</footer>
|
</div>
|
</template>
|
|
<script>
|
import helper from "@/utils/mydate.js";
|
import ViewInfo from './viewInfo';
|
import basecase from "@/api/operate/basecase";
|
import department from "@/api/system/department";
|
import { getVideoPoint } from "@/api/operate/storeManagement";
|
|
export default {
|
components: {
|
ViewInfo
|
},
|
|
created() {
|
this.getTableData();
|
|
// 获取组织列表
|
department.getDepartmentList()
|
.then(res => {
|
this.headerList[0].options = res;
|
})
|
.catch(err => this.$message.error(err))
|
|
getVideoPoint({ current: 1, size: 100 })
|
.then(({ records }) => {
|
this.headerList[4].options = records;
|
})
|
.catch(err => this.$message.error(err))
|
},
|
|
data() {
|
return {
|
tableData: [],
|
dialogView: false,
|
info: null,
|
currentPage: 1,
|
pageSize: 10,
|
headerList: [
|
{
|
id: 1,
|
label: '所属组织:',
|
value: '',
|
placeholder: '请输入所属组织',
|
prop: 'organization',
|
type: 'cascader',
|
options: []
|
},
|
{
|
id: 2,
|
label: '报警时间:',
|
value: '',
|
placeholder: '请输入报警时间',
|
prop: 'alarmTime',
|
type: 'timepick'
|
},
|
{
|
id: 3,
|
label: '违规类型:',
|
value: '',
|
placeholder: '请输入违规类型',
|
prop: 'typeId',
|
type: 'input'
|
},
|
{
|
id: 4,
|
label: '事件编号:',
|
value: '',
|
placeholder: '请输入事件编号',
|
prop: 'code',
|
type: 'input'
|
},
|
{
|
id: 5,
|
label: '监控点名称:',
|
value: '',
|
placeholder: '请输入监控点名称',
|
prop: 'videoPointId',
|
type: 'select',
|
options: []
|
},
|
{
|
id: 6,
|
label: '审核状态:',
|
value: '',
|
placeholder: '请输入审核状态',
|
type: 'select',
|
options: [{ id: 7, name: '未审核' }, { id: 8, name: '已经审核' }, { id: 9, name: '结案' }]
|
},
|
{
|
id: 7,
|
label: '车牌号:',
|
value: '',
|
placeholder: '请输入车牌号',
|
prop: 'carNumber',
|
type: 'input'
|
},
|
{
|
id: 8,
|
label: '处理意见:',
|
value: '',
|
placeholder: '请输入事件等级',
|
prop: 'handlingOpinion',
|
type: 'input'
|
},
|
{
|
id: 9,
|
label: '事件等级:',
|
value: '',
|
placeholder: '请输入事件等级',
|
prop: 'gradeId',
|
type: 'input'
|
},
|
],
|
form: {
|
gradeId: null,
|
alarmTime: null,
|
handlingOpinion: null,
|
streetId: null,
|
typeId: null,
|
code: null,
|
carNumber: null,
|
state: null,
|
videoPointId: null,
|
organization: null
|
}
|
}
|
},
|
|
methods: {
|
getTableData(params) {
|
basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params })
|
.then(({ records }) => {
|
this.tableData = records;
|
})
|
.catch(err => this.$message.error(err))
|
},
|
|
searchTableData() {
|
const { alarmTime, organization } = this.form;
|
const [startTime, endTime] = alarmTime ?? [null, null];
|
const [communityId, streetId] = organization ?? [null, null];
|
const params = Object.assign({}, this.form);
|
delete params.alarmTime;
|
delete params.organization;
|
this.getTableData({ startTime, streetId, communityId, endTime, ...params });
|
},
|
|
changeTime({ createTime }) {
|
return helper(createTime);
|
},
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 === 0) {
|
return 'warning-row';
|
} else {
|
return 'success-row';
|
}
|
},
|
// 表单重置
|
handleReset() {
|
this.currentPage = 1;
|
this.$refs.condition.resetFields();
|
this.getTableData();
|
},
|
// 关闭弹窗
|
handleClose(done) {
|
done();
|
},
|
// 打开弹窗
|
handleView(data) {
|
this.info = data
|
this.dialogView = true
|
},
|
|
exportTableData() {
|
basecase.exportViolationData({ current: 1 })
|
.then((res) => {
|
console.log(res)
|
this.$message.success('操作成功');
|
// let res = basecase.exportUserOperationLogAjax({
|
// startLogTime: transDate(this.searchQuery.date[0], "YYYY-MM-DD"),
|
// endLogTime: transDate(this.searchQuery.date[1], "YYYY-MM-DD"),
|
// systemName: this.searchQuery.systemName,
|
// userName: this.searchQuery.user,
|
// }).then((res)=>{
|
// console.log(res)
|
// });
|
|
let time = new Date()
|
let deathdate =time.toLocaleDateString()
|
const blob = new Blob([res.data], {
|
type: "application/vnd.ms-excel;charset=utf-8",
|
});
|
if (window.navigator.msSaveBlob) {
|
window.navigator.msSaveBlob(blob, deathdate+"违规数据" + ".xlsx");
|
} else {
|
const url = window.URL.createObjectURL(blob);
|
const link = document.createElement("a");
|
link.style.display = "none";
|
link.href = url;
|
link.download = deathdate+"违规数据" + ".xlsx";
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
}
|
})
|
.catch(err => this.$message.error(err))
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.illegal-search {
|
text-align: left;
|
margin: 10px 20px;
|
color: #4b9bb7;
|
|
header {
|
background-color: #09152f;
|
|
.headerContent {
|
padding: 20px 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
::v-deep .el-form {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
|
.el-form-item {
|
width: 30%;
|
}
|
|
.el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
}
|
}
|
|
main {
|
background-color: #09152f;
|
margin-top: 20px;
|
padding-bottom: 50px;
|
|
.mainTitle {
|
line-height: 60px;
|
}
|
|
.main-btns {
|
display: flex;
|
justify-content: space-between;
|
line-height: 60px;
|
padding: 0 20px;
|
|
.el-button {
|
background-color: #17324c;
|
border: 1px solid #17324c;
|
color: #4b9bb7;
|
}
|
}
|
.el-table{
|
color: #4b9bb7;
|
}
|
.tools {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
|
.funs-sp {
|
border: 1px solid #17324c;
|
}
|
|
.funs {
|
display: flex;
|
|
.funsItem {
|
line-height: 28px;
|
display: flex;
|
align-items: center;
|
border-radius: 4px;
|
font-size: 12px;
|
margin-left: 10px;
|
|
.el-checkbox {
|
width: 80px;
|
padding: 0 10px;
|
}
|
|
&::v-deep .el-input__inner {
|
border: none;
|
background-color: #09152f;
|
}}}}}}
|
</style>
|
