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>
|
||||
<div class="fullHeight">
|
||||
<div class="searchBox whiteBlock">
|
||||
<el-form :inline="true" :model="pageInfo" class="demo-form-inline" ref="queryForm" label-width="70px" size="small">
|
||||
<el-form-item label="车牌号码">
|
||||
<el-input v-model="pageInfo.carNumber" placeholder="请输入" @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="pageInfo.deviceName" placeholder="请输入" @keyup.enter.native="getList"></el-input>
|
||||
</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 class="fullHeight">
|
||||
<div class="searchBox whiteBlock">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="pageInfo"
|
||||
class="demo-form-inline"
|
||||
ref="queryForm"
|
||||
label-width="70px"
|
||||
size="small"
|
||||
>
|
||||
<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>
|
||||
<el-form-item label="车牌号码">
|
||||
<el-input
|
||||
v-model="pageInfo.carNumber"
|
||||
placeholder="请输入"
|
||||
@keyup.enter.native="getList"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<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>
|
||||
<el-form-item label="设备名称">
|
||||
<el-input
|
||||
v-model="pageInfo.deviceName"
|
||||
placeholder="请输入"
|
||||
@keyup.enter.native="getList"
|
||||
></el-input>
|
||||
</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"
|
||||
></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>
|
||||
</template>
|
||||
<script>
|
||||
import { carMeasureSpeedData } from '../../../assets/js/api/carManage';
|
||||
import dayjs from 'dayjs';
|
||||
import { carMeasureSpeedData } from "../../../assets/js/api/carManage";
|
||||
import dayjs from "dayjs";
|
||||
export default {
|
||||
mounted() {
|
||||
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();
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
handle(type, show) {
|
||||
//打开弹窗前的统一处理
|
||||
this.Popup = {
|
||||
type: type,
|
||||
show: show
|
||||
};
|
||||
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"),
|
||||
],
|
||||
};
|
||||
},
|
||||
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() {
|
||||
// 处理时间
|
||||
console.log('this.updateDate.length', this.updateDate);
|
||||
console.log('this.updateDate.length', this.updateDate[0]);
|
||||
console.log('this.updateDate.length', this.updateDate[1]);
|
||||
getList() {
|
||||
// 处理时间
|
||||
console.log("this.updateDate.length", this.updateDate);
|
||||
console.log("this.updateDate.length", this.updateDate[0]);
|
||||
console.log("this.updateDate.length", this.updateDate[1]);
|
||||
|
||||
if (this.updateDate.length > 1) {
|
||||
this.pageInfo.uploadTime_begin = this.updateDate[0];
|
||||
this.pageInfo.uploadTime_end = this.updateDate[1];
|
||||
// this.pageInfo.updateDate = []
|
||||
}
|
||||
if (this.updateDate.length > 1) {
|
||||
this.pageInfo.uploadTime_begin = this.updateDate[0];
|
||||
this.pageInfo.uploadTime_end = this.updateDate[1];
|
||||
// this.pageInfo.updateDate = []
|
||||
}
|
||||
|
||||
console.log('pageinfo', this.pageInfo);
|
||||
console.log("pageinfo", this.pageInfo);
|
||||
|
||||
carMeasureSpeedData(this.pageInfo).then(result => {
|
||||
if (result.success) {
|
||||
this.List = result.result.records;
|
||||
this.pageInfo.total = Number(result.result.total);
|
||||
// console.log("列表", result.result.records);
|
||||
}
|
||||
});
|
||||
carMeasureSpeedData(this.pageInfo).then((result) => {
|
||||
if (result.success) {
|
||||
this.List = result.result.records;
|
||||
this.pageInfo.total = Number(result.result.total);
|
||||
// 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>
|
||||
<style lang="less">
|
||||
.tableBtns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.yj-dialogFormBox {
|
||||
width: 462px;
|
||||
width: 462px;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
.Pagination-but {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
// background: skyblue;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 20px;
|
||||
.Pagination-but {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
// background: skyblue;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 20px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user