378 lines
11 KiB
Vue
378 lines
11 KiB
Vue
<template>
|
|
<div class="fullHeight">
|
|
<div class="top">
|
|
<div class="topLeft whiteBlock">
|
|
<div class="blockInner">
|
|
<!-- 数据统计 -->
|
|
<div class="pageTitle">{{$t('message.carManage.dataStatistics')}}</div>
|
|
<!-- <div> -->
|
|
<div class="numBox">
|
|
<img src="@/assets/images/companyProject/1.png" />
|
|
<div class="dataBox">
|
|
<p class="num primaryText">{{ totalNum.innum }}</p>
|
|
<!-- 今日进场车次 -->
|
|
<p class="text">{{$t('message.carManage.todayInCarNum')}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="numBox">
|
|
<img src="@/assets/images/companyProject/1.png" />
|
|
<div class="dataBox">
|
|
<p class="num primaryText">{{ totalNum.outnum }}</p>
|
|
<!-- 今日出场车次 -->
|
|
<p class="text">{{$t('message.carManage.todayOutCarNum')}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="numBox">
|
|
<img src="@/assets/images/companyProject/1.png" />
|
|
<div class="dataBox">
|
|
<p class="num primaryText">{{ totalNum.whitenum }}</p>
|
|
<!-- 白名单车辆数 -->
|
|
<p class="text">{{$t('message.carManage.whiteCarNum')}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="numBox">
|
|
<img src="@/assets/images/companyProject/1.png" />
|
|
<div class="dataBox">
|
|
<p class="num primaryText">{{ totalNum.temporarynum }}</p>
|
|
<!-- 长期车辆数 -->
|
|
<p class="text">{{$t('message.carManage.temporaryCarNum')}}</p>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
<div class="topRight whiteBlock">
|
|
<div class="blockInner">
|
|
<!-- 车种进出次数统计 -->
|
|
<div class="pageTitle">{{$t('message.carManage.carTypeInOutNumStatistics')}}</div>
|
|
<div class="chart" ref="carTypeChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="topLeft whiteBlock">
|
|
<div class="blockInner">
|
|
<!-- 长期车进出记录 -->
|
|
<div class="pageTitle">{{$t('message.carManage.temporaryCarRecord')}}</div>
|
|
<div class="blockContent">
|
|
<vue-scroll>
|
|
<!-- height="300" -->
|
|
<el-table :data="carCompareList" class="tables">
|
|
<!-- '车牌号' -->
|
|
<el-table-column prop="carNumber" :label="$t('message.carManage.carNumber')">
|
|
</el-table-column>
|
|
<!-- 进出时间 -->
|
|
<el-table-column prop="passTime" :label="$t('message.carManage.inOutTime')">
|
|
</el-table-column>
|
|
<!-- 进出标识 -->
|
|
<el-table-column prop="type" :label="$t('message.carManage.inOutCode')">
|
|
<template slot-scope="scope">
|
|
<!-- "出" : "进" -->
|
|
{{ scope.row.type == 1 ? $t('message.carManage.out'):$t('message.carManage.in') }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- '进出位置' -->
|
|
<el-table-column prop="location" :label="$t('message.carManage.inOutAddress')">
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="carColor" :label="'车牌颜色'"> </el-table-column> -->
|
|
<!-- 进出场图片 -->
|
|
<el-table-column prop="imageUrl" :label="$t('message.carManage.inOutImg')">
|
|
<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="$t('message.carManage.panoramaImg')">
|
|
<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"
|
|
/>
|
|
<!-- <img :preview="$store.state.FILEURL+scope.row.panoramaUrl" :src="$store.state.FILEURL+scope.row.panoramaUrl" alt="" height="30"> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</vue-scroll>
|
|
</div>
|
|
<!-- <el-pagination
|
|
class="pagerBox"
|
|
@size-change="SizeChange"
|
|
@current-change="CurrentChange"
|
|
:current-page="pagInfo.pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pagInfo.pageSize"
|
|
layout="total, prev, pager, next"
|
|
:total="pagInfo.total"
|
|
background
|
|
></el-pagination> -->
|
|
</div>
|
|
</div>
|
|
<div class="topRight whiteBlock">
|
|
<div class="blockInner">
|
|
<!-- 24小时进出统计 -->
|
|
<div class="pageTitle">{{$t('message.carManage.allDayInOutStatistics')}}</div>
|
|
<div class="chart" ref="inOut24HoursChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
import {
|
|
selectCarStatisticsByCameraIdApi,
|
|
selectCarPassRecordInOutCountApi,
|
|
getCarPassRecordListApi,
|
|
} from "@/assets/js/api/carManage";
|
|
export default {
|
|
data() {
|
|
return {
|
|
pagInfo: {
|
|
pageNo: 1, //页数
|
|
pageSize: 10, //条数
|
|
total: 0, //总条数
|
|
},
|
|
carCompareList: [],
|
|
totalNum: {
|
|
innum: 0,
|
|
outnum: 0,
|
|
temporarynum: 0,
|
|
whitenum: 0,
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.selectCarStatisticsByCameraId();
|
|
this.selectCarPassRecordInOutCount();
|
|
this.getCarPassRecordList();
|
|
},
|
|
methods: {
|
|
selectCarStatisticsByCameraId() {
|
|
selectCarStatisticsByCameraIdApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
}).then((res) => {
|
|
var carTypeList = res.result.carTypeList;
|
|
this.totalNum = res.result.totalnum;
|
|
var arr1 = [],
|
|
arr2 = [],
|
|
xData = [];
|
|
carTypeList.forEach((element) => {
|
|
xData.push(element.carTypeName);
|
|
arr1.push(element.innum);
|
|
arr2.push(element.outnum);
|
|
});
|
|
this.createdAgeCharts(arr1, arr2, xData, this.$refs.carTypeChart, [
|
|
this.$t('message.carManage.in'),
|
|
this.$t('message.carManage.out'),
|
|
]);
|
|
});
|
|
},
|
|
getCarPassRecordList() {
|
|
getCarPassRecordListApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
type: 1,
|
|
}).then((res) => {
|
|
this.carCompareList = res.result;
|
|
setTimeout(() => {
|
|
this.$previewRefresh();
|
|
}, 100);
|
|
});
|
|
},
|
|
selectCarPassRecordInOutCount() {
|
|
selectCarPassRecordInOutCountApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
type: 1,
|
|
}).then((res) => {
|
|
var Data = res.result;
|
|
var arr1 = [],
|
|
arr2 = [],
|
|
xData = [];
|
|
Data.forEach((element) => {
|
|
xData.push(element.passTime);
|
|
arr1.push(element.innum);
|
|
arr2.push(element.outnum);
|
|
});
|
|
this.createdAgeCharts(arr1, arr2, xData, this.$refs.inOut24HoursChart, [
|
|
this.$t('message.carManage.in'),
|
|
this.$t('message.carManage.out'),
|
|
]);
|
|
});
|
|
},
|
|
SizeChange(val) {
|
|
this.pagInfo.pageSize = val;
|
|
this.getCarCompareList();
|
|
},
|
|
CurrentChange(val) {
|
|
this.pagInfo.pageNo = val;
|
|
this.getCarCompareList();
|
|
},
|
|
getCarCompareList() {},
|
|
//车种进出---图表
|
|
createdAgeCharts(arr1, arr2, xData, el, legendData) {
|
|
let that = this;
|
|
let ageChart = echarts.init(el);
|
|
// ageChart.clear();
|
|
let option = {
|
|
grid: {
|
|
top: 40,
|
|
left: 20,
|
|
bottom: 0,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: ["#5181F6", "#61D2B9"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
align: "left",
|
|
top: 5,
|
|
left: 20,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xData,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
|
|
yAxis: {
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.5)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: legendData[0],
|
|
type: "bar",
|
|
data: arr1,
|
|
barWidth: 14,
|
|
barGap: 0.1,
|
|
},
|
|
{
|
|
name: legendData[1],
|
|
type: "bar",
|
|
data: arr2,
|
|
barWidth: 14,
|
|
},
|
|
],
|
|
};
|
|
|
|
ageChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.blockInner {
|
|
padding: 15px;
|
|
height: calc(100% - 30px);
|
|
}
|
|
.whiteBlock {
|
|
float: left;
|
|
width: calc(50% - 7.5px);
|
|
}
|
|
.chart {
|
|
height: calc(100% - 40px);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.top {
|
|
margin-bottom: 15px;
|
|
}
|
|
.blockContent {
|
|
height: calc(100% - 40px);
|
|
}
|
|
.top,
|
|
.bottom {
|
|
height: calc(50% - 7.5px);
|
|
.whiteBlock {
|
|
height: 100%;
|
|
&:first-child {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
.tables {
|
|
min-height: auto;
|
|
}
|
|
.numBox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 50%;
|
|
height: 40%;
|
|
.dataBox {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.num {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
// color: #7C829E;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
</style> |