flx:优化
This commit is contained in:
parent
362cd55808
commit
694982b7d4
File diff suppressed because it is too large
Load Diff
@ -1,250 +1,299 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fullHeight">
|
<div class="fullHeight">
|
||||||
<div class="searchBox whiteBlock">
|
<div class="searchBox whiteBlock">
|
||||||
<el-form :inline="true" :model="pageInfo" class="demo-form-inline" ref="queryForm" label-width="70px" size="small">
|
<el-form
|
||||||
<el-form-item label="车牌号码">
|
:inline="true"
|
||||||
<el-input v-model="pageInfo.carNumber" placeholder="请输入" @keyup.enter.native="getList"></el-input>
|
:model="pageInfo"
|
||||||
</el-form-item>
|
class="demo-form-inline"
|
||||||
|
ref="queryForm"
|
||||||
<el-form-item label="设备名称">
|
label-width="70px"
|
||||||
<el-input v-model="pageInfo.deviceName" placeholder="请输入" @keyup.enter.native="getList"></el-input>
|
size="small"
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="上传时间">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="updateDate"
|
|
||||||
type="datetimerange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
:default-time="['00:00:00', '23:59:59']"
|
|
||||||
></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button
|
|
||||||
v-permission="{
|
|
||||||
key: 'clgl_query',
|
|
||||||
menuPath: '/project/carManage/vehicleReal'
|
|
||||||
}"
|
|
||||||
type="primary"
|
|
||||||
size="medium"
|
|
||||||
plain
|
|
||||||
@click="getList"
|
|
||||||
>搜索</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
v-permission="{
|
|
||||||
key: 'clgl_refresh',
|
|
||||||
menuPath: '/project/carManage/vehicleReal'
|
|
||||||
}"
|
|
||||||
type="warning"
|
|
||||||
size="medium"
|
|
||||||
plain
|
|
||||||
@click="resetQuery"
|
|
||||||
>刷新</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table_wrap whiteBlock">
|
|
||||||
<el-table class="tables" :data="List" height="520px">
|
|
||||||
<el-table-column prop="deviceName" align="center" label="抓拍设备"></el-table-column>
|
|
||||||
<el-table-column prop="carNumber" align="center" label="车牌号"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="isExceed" align="center" label="是否超出阈值">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{ scope.row.isExceed == 1 ? '是' : '否' }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="currentSpeed" align="center" label="当时车数(km/h)"></el-table-column>
|
|
||||||
|
|
||||||
<el-table-column width="300" prop="exceedingThreshold" align="center" label="超出阈值"></el-table-column>
|
|
||||||
<el-table-column width="300" prop="snapshotImage" align="center" label="抓拍照片">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-image
|
|
||||||
style="width: 50px; height: 50px"
|
|
||||||
:src="$store.state.FILEURL + scope.row.snapshotImage"
|
|
||||||
:preview-src-list="[$store.state.FILEURL + scope.row.snapshotImage]"
|
|
||||||
>
|
>
|
||||||
<div slot="error" class="image-slot">
|
<el-form-item label="车牌号码">
|
||||||
<i class="el-icon-picture-outline"></i>
|
<el-input
|
||||||
</div>
|
v-model="pageInfo.carNumber"
|
||||||
</el-image>
|
placeholder="请输入"
|
||||||
</template>
|
@keyup.enter.native="getList"
|
||||||
</el-table-column>
|
></el-input>
|
||||||
<el-table-column width="300" prop="uploadTime" align="center" label="上传时间"></el-table-column>
|
</el-form-item>
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="Pagination-but">
|
<el-form-item label="设备名称">
|
||||||
<el-pagination
|
<el-input
|
||||||
class="pagerBox"
|
v-model="pageInfo.deviceName"
|
||||||
@size-change="handleSizeChange"
|
placeholder="请输入"
|
||||||
@current-change="handleCurrentChange"
|
@keyup.enter.native="getList"
|
||||||
:current-page="pageInfo.pageNo"
|
></el-input>
|
||||||
:page-sizes="[10, 50, 100]"
|
</el-form-item>
|
||||||
:page-size="pageInfo.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
<el-form-item label="上传时间">
|
||||||
:total="pageInfo.total"
|
<el-date-picker
|
||||||
background
|
v-model="updateDate"
|
||||||
></el-pagination>
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
v-permission="{
|
||||||
|
key: 'clgl_query',
|
||||||
|
menuPath: '/project/carManage/vehicleReal',
|
||||||
|
}"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
plain
|
||||||
|
@click="getList"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-permission="{
|
||||||
|
key: 'clgl_refresh',
|
||||||
|
menuPath: '/project/carManage/vehicleReal',
|
||||||
|
}"
|
||||||
|
type="warning"
|
||||||
|
size="medium"
|
||||||
|
plain
|
||||||
|
@click="resetQuery"
|
||||||
|
>刷新</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table_wrap whiteBlock">
|
||||||
|
<el-table class="tables" :data="List" height="520px">
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
align="center"
|
||||||
|
label="抓拍设备"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="carNumber"
|
||||||
|
align="center"
|
||||||
|
label="车牌号"
|
||||||
|
></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="isExceed"
|
||||||
|
align="center"
|
||||||
|
label="是否超出阈值"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.isExceed == 1 ? "是" : "否" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="currentSpeed"
|
||||||
|
align="center"
|
||||||
|
label="当时车速(km/h)"
|
||||||
|
></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
width="300"
|
||||||
|
prop="exceedingThreshold"
|
||||||
|
align="center"
|
||||||
|
label="超出阈值"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="300"
|
||||||
|
prop="snapshotImage"
|
||||||
|
align="center"
|
||||||
|
label="抓拍照片"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image
|
||||||
|
style="width: 50px; height: 50px"
|
||||||
|
:src="
|
||||||
|
$store.state.FILEURL + scope.row.snapshotImage
|
||||||
|
"
|
||||||
|
:preview-src-list="[
|
||||||
|
$store.state.FILEURL + scope.row.snapshotImage,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<i class="el-icon-picture-outline"></i>
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="300"
|
||||||
|
prop="uploadTime"
|
||||||
|
align="center"
|
||||||
|
label="上传时间"
|
||||||
|
></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Pagination-but">
|
||||||
|
<el-pagination
|
||||||
|
class="pagerBox"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="pageInfo.pageNo"
|
||||||
|
:page-sizes="[10, 50, 100]"
|
||||||
|
:page-size="pageInfo.pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="pageInfo.total"
|
||||||
|
background
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { carMeasureSpeedData } from '../../../assets/js/api/carManage';
|
import { carMeasureSpeedData } from "../../../assets/js/api/carManage";
|
||||||
import dayjs from 'dayjs';
|
import dayjs from "dayjs";
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
addEditForm: {
|
|
||||||
gateName: '',
|
|
||||||
gateNumber: '',
|
|
||||||
type: 1
|
|
||||||
},
|
|
||||||
formRules: {
|
|
||||||
gateName: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: this.$t('message.personnelPosition.required'),
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
gateNumber: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: this.$t('message.personnelPosition.required'),
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
List: [],
|
|
||||||
Popup: {
|
|
||||||
type: 'add',
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
// 分页查询
|
|
||||||
pageInfo: {
|
|
||||||
// 总条数
|
|
||||||
total: 0,
|
|
||||||
// 当前页
|
|
||||||
pageNo: 1,
|
|
||||||
// 每页条数
|
|
||||||
pageSize: 15,
|
|
||||||
// 车牌
|
|
||||||
carNumber: null,
|
|
||||||
// 设备
|
|
||||||
deviceName: null,
|
|
||||||
// uploadTime_begin: "2024-09-02 00:00:00",
|
|
||||||
// uploadTime_end: "2024-09-03 00:00:00",
|
|
||||||
uploadTime_begin: '',
|
|
||||||
uploadTime_end: ''
|
|
||||||
},
|
|
||||||
// 上传时间
|
|
||||||
updateDate: [
|
|
||||||
dayjs().format('YYYY-MM-DD 00:00:00'),
|
|
||||||
dayjs().format('YYYY-MM-DD 23:59:59')
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 搜索
|
|
||||||
resetQuery() {
|
|
||||||
// console.log("pageinfo", this.pageInfo);
|
|
||||||
this.pageInfo.pageNo = 1;
|
|
||||||
this.pageInfo.pageSize = 10;
|
|
||||||
this.pageInfo.carNumber = null;
|
|
||||||
this.pageInfo.deviceName = null;
|
|
||||||
// this.pageInfo.uploadTime_begin = null;
|
|
||||||
// this.pageInfo.uploadTime_end = null;
|
|
||||||
// this.updateDate = [];
|
|
||||||
this.getList();
|
|
||||||
},
|
},
|
||||||
handle(type, show) {
|
data() {
|
||||||
//打开弹窗前的统一处理
|
return {
|
||||||
this.Popup = {
|
addEditForm: {
|
||||||
type: type,
|
gateName: "",
|
||||||
show: show
|
gateNumber: "",
|
||||||
};
|
type: 1,
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
gateName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: this.$t("message.personnelPosition.required"),
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gateNumber: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: this.$t("message.personnelPosition.required"),
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
List: [],
|
||||||
|
Popup: {
|
||||||
|
type: "add",
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
// 分页查询
|
||||||
|
pageInfo: {
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 当前页
|
||||||
|
pageNo: 1,
|
||||||
|
// 每页条数
|
||||||
|
pageSize: 15,
|
||||||
|
// 车牌
|
||||||
|
carNumber: null,
|
||||||
|
// 设备
|
||||||
|
deviceName: null,
|
||||||
|
// uploadTime_begin: "2024-09-02 00:00:00",
|
||||||
|
// uploadTime_end: "2024-09-03 00:00:00",
|
||||||
|
uploadTime_begin: "",
|
||||||
|
uploadTime_end: "",
|
||||||
|
},
|
||||||
|
// 上传时间
|
||||||
|
updateDate: [
|
||||||
|
dayjs().format("YYYY-MM-DD 00:00:00"),
|
||||||
|
dayjs().format("YYYY-MM-DD 23:59:59"),
|
||||||
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
Change() {},
|
methods: {
|
||||||
|
// 搜索
|
||||||
|
resetQuery() {
|
||||||
|
// console.log("pageinfo", this.pageInfo);
|
||||||
|
this.pageInfo.pageNo = 1;
|
||||||
|
this.pageInfo.pageSize = 10;
|
||||||
|
this.pageInfo.carNumber = null;
|
||||||
|
this.pageInfo.deviceName = null;
|
||||||
|
this.pageInfo.uploadTime_begin = null;
|
||||||
|
this.pageInfo.uploadTime_end = null;
|
||||||
|
this.updateDate = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handle(type, show) {
|
||||||
|
//打开弹窗前的统一处理
|
||||||
|
this.Popup = {
|
||||||
|
type: type,
|
||||||
|
show: show,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
Change() {},
|
||||||
|
|
||||||
getList() {
|
getList() {
|
||||||
// 处理时间
|
// 处理时间
|
||||||
console.log('this.updateDate.length', this.updateDate);
|
console.log("this.updateDate.length", this.updateDate);
|
||||||
console.log('this.updateDate.length', this.updateDate[0]);
|
console.log("this.updateDate.length", this.updateDate[0]);
|
||||||
console.log('this.updateDate.length', this.updateDate[1]);
|
console.log("this.updateDate.length", this.updateDate[1]);
|
||||||
|
|
||||||
if (this.updateDate.length > 1) {
|
if (this.updateDate.length > 1) {
|
||||||
this.pageInfo.uploadTime_begin = this.updateDate[0];
|
this.pageInfo.uploadTime_begin = this.updateDate[0];
|
||||||
this.pageInfo.uploadTime_end = this.updateDate[1];
|
this.pageInfo.uploadTime_end = this.updateDate[1];
|
||||||
// this.pageInfo.updateDate = []
|
// this.pageInfo.updateDate = []
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('pageinfo', this.pageInfo);
|
console.log("pageinfo", this.pageInfo);
|
||||||
|
|
||||||
carMeasureSpeedData(this.pageInfo).then(result => {
|
carMeasureSpeedData(this.pageInfo).then((result) => {
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
this.List = result.result.records;
|
this.List = result.result.records;
|
||||||
this.pageInfo.total = Number(result.result.total);
|
this.pageInfo.total = Number(result.result.total);
|
||||||
// console.log("列表", result.result.records);
|
// console.log("列表", result.result.records);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.addEditForm = {
|
||||||
|
isEnable: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分页 左右 点击 输入
|
||||||
|
handleSizeChange(val) {
|
||||||
|
// console.log(`每页 ${val} 条`);
|
||||||
|
this.pageInfo.pageSize = val;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分页多少条点击事件
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
// console.log(`当前页: ${val}`);
|
||||||
|
this.pageInfo.pageNo = val;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
close() {
|
|
||||||
this.addEditForm = {
|
|
||||||
isEnable: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
// 分页 左右 点击 输入
|
|
||||||
handleSizeChange(val) {
|
|
||||||
// console.log(`每页 ${val} 条`);
|
|
||||||
this.pageInfo.pageSize = val;
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 分页多少条点击事件
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
// console.log(`当前页: ${val}`);
|
|
||||||
this.pageInfo.pageNo = val;
|
|
||||||
this.getList();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.tableBtns {
|
.tableBtns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yj-dialogFormBox {
|
.yj-dialogFormBox {
|
||||||
width: 462px;
|
width: 462px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullHeight {
|
.fullHeight {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.Pagination-but {
|
.Pagination-but {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
// background: skyblue;
|
// background: skyblue;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user