2022-06-08 14:51:11 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="fullHeight" style="overflow: hidden">
|
|
|
|
|
<areaTree
|
|
|
|
|
:videoType="0"
|
|
|
|
|
:modules="'carManage'"
|
|
|
|
|
@changeCompany="changeCompany"
|
|
|
|
|
></areaTree>
|
|
|
|
|
<div class="rightContent fullHeight">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<div class="whiteBlock realTimeBox">
|
|
|
|
|
<div class="pageTitle">实时数据</div>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
class="searchDate"
|
|
|
|
|
v-model="searchDate"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择日期"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
size="medium"
|
|
|
|
|
@change="changeDate"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<div class="realTimeInner">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemInner itemInner1">
|
|
|
|
|
<img src="@/assets/images/carIcon1.png" alt="" srcset="" />
|
|
|
|
|
<div class="dataB">
|
|
|
|
|
<p>今日进场车辆</p>
|
|
|
|
|
<p class="num">{{statisticData.innum}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemInner itemInner2">
|
|
|
|
|
<img src="@/assets/images/carIcon2.png" alt="" srcset="" />
|
|
|
|
|
<div class="dataB">
|
|
|
|
|
<p>今日出场车辆</p>
|
|
|
|
|
<p class="num">{{statisticData.outnum}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemInner itemInner3">
|
|
|
|
|
<img src="@/assets/images/carIcon3.png" alt="" srcset="" />
|
|
|
|
|
<div class="dataB">
|
|
|
|
|
<p>白名单车辆</p>
|
|
|
|
|
<p class="num">{{statisticData.whiteNum}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemInner itemInner4">
|
|
|
|
|
<img src="@/assets/images/carIcon4.png" alt="" srcset="" />
|
|
|
|
|
<div class="dataB">
|
|
|
|
|
<p>临时车辆</p>
|
|
|
|
|
<p class="num">{{statisticData.lsNum}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="itemInner itemInner5">
|
|
|
|
|
<img src="@/assets/images/carIcon5.png" alt="" srcset="" />
|
|
|
|
|
<div class="dataB">
|
|
|
|
|
<p>在场车辆数量</p>
|
|
|
|
|
<p class="num">{{statisticData.presencenum}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="listBottom">
|
|
|
|
|
<div class="whiteBlock">
|
|
|
|
|
<div class="pageTitle">
|
|
|
|
|
<span
|
|
|
|
|
class="tabItem"
|
|
|
|
|
:class="dataType == 1 ? 'active' : ''"
|
|
|
|
|
@click="dataType = 1;getCarPassRecord(1,1)"
|
|
|
|
|
>白名单列表</span
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
class="tabItem"
|
|
|
|
|
:class="dataType == 2 ? 'active' : ''"
|
|
|
|
|
@click="dataType = 2;getCarPassRecord(1,2)"
|
|
|
|
|
>黑名单列表</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="whiteOrBlackList" class="tables">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="carNumber"
|
|
|
|
|
:label="$t('message.carManage.carNumber')"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="passTime" :label="'进出时间'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.row.passTime.split(' ')[1] }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="type" :label="'进出标识'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.row.type == 1 ? "出" : "进" }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="location" :label="'进出位置'">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="carColor" :label="'车牌颜色'">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column prop="imageUrl" :label="'进出场图片'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img
|
|
|
|
|
:preview="
|
|
|
|
|
scope.row.imageUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.imageUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
:src="
|
|
|
|
|
scope.row.imageUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.imageUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column> -->
|
|
|
|
|
<el-table-column prop="panoramaUrl" :label="'抓拍照片'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img
|
|
|
|
|
:preview="
|
|
|
|
|
scope.row.panoramaUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.panoramaUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
:src="
|
|
|
|
|
scope.row.panoramaUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.panoramaUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagerBox"
|
|
|
|
|
@current-change="handleCurrentChange1"
|
|
|
|
|
:current-page="pageNo1"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
layout="total, prev, pager, next"
|
2023-06-19 18:22:36 +08:00
|
|
|
:total="Number(total1)"
|
2022-06-08 14:51:11 +08:00
|
|
|
background
|
|
|
|
|
></el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="whiteBlock">
|
|
|
|
|
<div class="pageTitle">临时车辆列表</div>
|
|
|
|
|
<el-table :data="temporaryCarList" class="tables">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="carNumber"
|
|
|
|
|
:label="$t('message.carManage.carNumber')"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="passTime" :label="'进出时间'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.row.passTime.split(' ')[1] }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="type" :label="'进出标识'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.row.type == 1 ? "出" : "进" }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="location" :label="'进出位置'">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="carColor" :label="'车牌颜色'">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column prop="imageUrl" :label="'进出场图片'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img
|
|
|
|
|
:preview="
|
|
|
|
|
scope.row.imageUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.imageUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
:src="
|
|
|
|
|
scope.row.imageUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.imageUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column> -->
|
|
|
|
|
<el-table-column prop="panoramaUrl" :label="'抓拍照片'">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img
|
|
|
|
|
:preview="
|
|
|
|
|
scope.row.panoramaUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.panoramaUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
:src="
|
|
|
|
|
scope.row.panoramaUrl
|
|
|
|
|
? $store.state.FILEURL + scope.row.panoramaUrl
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagerBox"
|
|
|
|
|
@current-change="handleCurrentChange2"
|
|
|
|
|
:current-page="pageNo2"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
layout="total, prev, pager, next"
|
2023-06-19 18:22:36 +08:00
|
|
|
:total="Number(total2)"
|
2022-06-08 14:51:11 +08:00
|
|
|
background
|
|
|
|
|
></el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import areaTree from "@/components/areaTree";
|
|
|
|
|
import { GetDateStr } from "@/assets/js/util";
|
|
|
|
|
import {
|
|
|
|
|
selectCarPassPageApi,
|
|
|
|
|
selectCarStatisticsApi,
|
|
|
|
|
} from "@/assets/js/api/carManage";
|
|
|
|
|
export default {
|
|
|
|
|
components: { areaTree },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
temporaryCarList: [],
|
|
|
|
|
whiteOrBlackList:[],
|
|
|
|
|
dataType: 1,
|
|
|
|
|
searchDate: "",
|
|
|
|
|
searchsn: "",
|
|
|
|
|
pageNo1: 1,
|
|
|
|
|
pageNo2: 1,
|
|
|
|
|
total1: 0,
|
|
|
|
|
total2: 0,
|
|
|
|
|
pageSize: 8,
|
|
|
|
|
statisticData:{
|
|
|
|
|
blackNum: 0,
|
|
|
|
|
innum: 0,
|
|
|
|
|
lsNum: 0,
|
|
|
|
|
outnum: 0,
|
|
|
|
|
presencenum: 0,
|
|
|
|
|
whiteNum: 0
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.searchDate = GetDateStr(0, "-");
|
|
|
|
|
this.initData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeDate() {
|
|
|
|
|
this.getStatisticData();
|
|
|
|
|
this.getCarPassRecord(1,1);
|
|
|
|
|
this.getCarPassRecord(1,3);
|
|
|
|
|
},
|
|
|
|
|
initData() {
|
|
|
|
|
this.backArr = this.$store.state.mapBackArr;
|
|
|
|
|
//
|
|
|
|
|
if (this.backArr.length > 0) {
|
|
|
|
|
this.searchsn = this.backArr[this.backArr.length - 1].sn;
|
|
|
|
|
} else {
|
|
|
|
|
switch (Number(this.$store.state.userInfo.accountType)) {
|
|
|
|
|
case 2:
|
|
|
|
|
this.searchsn = this.$store.state.userInfo.headquartersSn;
|
|
|
|
|
break;
|
|
|
|
|
case 3:
|
|
|
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|
|
|
|
break;
|
|
|
|
|
case 4:
|
|
|
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.getStatisticData();
|
|
|
|
|
this.getCarPassRecord(1,1);
|
|
|
|
|
this.getCarPassRecord(1,3);
|
|
|
|
|
},
|
|
|
|
|
getStatisticData() {
|
|
|
|
|
selectCarStatisticsApi({
|
|
|
|
|
queryTime: this.searchDate,
|
|
|
|
|
sn: this.searchsn,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.statisticData=res.result
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getCarPassRecord(pageNo,type) {
|
|
|
|
|
selectCarPassPageApi({
|
|
|
|
|
queryTime: this.searchDate,
|
|
|
|
|
sn: this.searchsn,
|
|
|
|
|
pageNo: pageNo,
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
type: type,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if(type==1||type==2){
|
|
|
|
|
this.whiteOrBlackList=res.result.records;
|
|
|
|
|
this.total1=res.result.total
|
|
|
|
|
}else{
|
|
|
|
|
this.temporaryCarList=res.result.records;
|
|
|
|
|
this.total2=res.result.total
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange2(value) {
|
|
|
|
|
this.pageNo2 = value;
|
|
|
|
|
this.getCarPassRecord(value,3);
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange1(value) {
|
|
|
|
|
this.pageNo1 = value;
|
|
|
|
|
this.getCarPassRecord(value,this.dataType);
|
|
|
|
|
},
|
|
|
|
|
changeCompany(sn) {
|
|
|
|
|
this.searchsn = sn;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.rightContent {
|
|
|
|
|
width: calc(100% - 350px);
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
.searchDate {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
top: 15px;
|
|
|
|
|
width: 140px;
|
|
|
|
|
}
|
|
|
|
|
.realTimeBox {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
.realTimeInner {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 35px 0 15px;
|
|
|
|
|
img {
|
|
|
|
|
width: 62px;
|
|
|
|
|
height: 62px;
|
|
|
|
|
}
|
|
|
|
|
.item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
}
|
|
|
|
|
.itemInner {
|
|
|
|
|
width: 230px;
|
|
|
|
|
height: 107px;
|
|
|
|
|
border: 1px solid royalblue;
|
|
|
|
|
border-radius: 11px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
.dataB {
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
.num {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.itemInner1 {
|
|
|
|
|
border: 1px solid #44d7b6;
|
|
|
|
|
background-color: rgba(68, 215, 182, 0.1);
|
|
|
|
|
.num {
|
|
|
|
|
color: #44d7b6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.itemInner2 {
|
|
|
|
|
border: 1px solid #7a67f6;
|
|
|
|
|
background-color: rgba(122, 103, 246, 0.1);
|
|
|
|
|
.num {
|
|
|
|
|
color: #7a67f6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.itemInner3 {
|
|
|
|
|
border: 1px solid #5181f6;
|
|
|
|
|
background-color: rgba(81, 129, 246, 0.1);
|
|
|
|
|
.num {
|
|
|
|
|
color: #5181f6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.itemInner4 {
|
|
|
|
|
border: 1px solid #f67f51;
|
|
|
|
|
background-color: rgba(246, 127, 81, 0.1);
|
|
|
|
|
.num {
|
|
|
|
|
color: #f67f51;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.itemInner5 {
|
|
|
|
|
border: 1px solid #f7b500;
|
|
|
|
|
background-color: rgba(247, 181, 0, 0.1);
|
|
|
|
|
.num {
|
|
|
|
|
color: #f7b500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.listBottom {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
height: calc(100% - 214px);
|
|
|
|
|
min-height: 550px;
|
|
|
|
|
.whiteBlock {
|
|
|
|
|
float: left;
|
|
|
|
|
width: calc(50% - 35px);
|
|
|
|
|
padding: 15px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tabItem {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: rgba(81, 129, 246, 0.1);
|
|
|
|
|
padding: 4px 12px;
|
|
|
|
|
&.active {
|
|
|
|
|
background-color: @--color-primary;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tables{
|
|
|
|
|
min-height: 450px;
|
|
|
|
|
}
|
|
|
|
|
.pagerBox{
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
