616 lines
29 KiB
Vue
616 lines
29 KiB
Vue
<template>
|
||
<div class="fullHeight greenPage">
|
||
<div class="headerBox">
|
||
<h1 class="title">
|
||
{{ $store.state.currentProDetail.projectName }} -
|
||
{{ $t("message.carOverview.vehicleStatistics") }}
|
||
</h1>
|
||
<closePage></closePage>
|
||
</div>
|
||
<div class="leftLine"></div>
|
||
<div class="rightLine"></div>
|
||
<div class="bottomLine"></div>
|
||
<div class="greenContent">
|
||
<div class="top">
|
||
<div class="smallDiv smallDiv1 fullHeight">
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e1">
|
||
{{ $t("message.carOverview.latestApproachVehicle") }}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<!-- {{inList[0]}}-->
|
||
<!-- *{{$store.state.FILEURL+inList[0].imageUrl}}-->
|
||
<div class="carBox big">
|
||
<img :preview="inObj.panoramaUrl?$store.state.FILEURL+inObj.panoramaUrl:''"
|
||
:src="inObj.panoramaUrl?$store.state.FILEURL+inObj.panoramaUrl:''"/>
|
||
<div class="carDetail" v-if="inList.length">
|
||
<p class="greenBtn whiteList" :class="inObj.isBlack===0?'':inObj.isBlack===1?'red':'green'">
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/carOverview/arrow.png"
|
||
/>
|
||
{{inObj.isBlack===0?$t("message.carOverview.whiteList"):inObj.isBlack===1?$t("message.carOverview.blackList"):$t("message.carOverview.temporaryCar")}}
|
||
</p>
|
||
<p class="carNum">{{inObj.carNumber}}</p>
|
||
<p class="time">{{inObj.passTime}}</p>
|
||
</div>
|
||
<div class="placeholderBox placeholderBox2" v-if="inList.length==0">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="">
|
||
<p>{{$t("message.carOverview.noData")}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e4">
|
||
{{ $t("message.carOverview.entryBrakeControl") }}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent controlBox">
|
||
<div class="bg2" @click="clickOnStart(inObj)">
|
||
{{ $t("message.carOverview.clickOnStart") }}
|
||
{{ $t("message.carOverview.vehiclesEntering") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerDiv fullHeight">
|
||
<p class="centerTitle">
|
||
{{ $t("message.carOverview.todaysTrafficStatistics") }}
|
||
</p>
|
||
<div ref="centerChart" class="centerChart"></div>
|
||
<div class="totalBox">
|
||
<div class="item">
|
||
<p>{{ $t("message.carOverview.vehiclesForApproachToday") }}</p>
|
||
<div class="bg1">
|
||
<countTo :startVal="0" :endVal="outInData.innum" :duration="5000"></countTo>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p>{{ $t("message.carOverview.vehiclesForToday") }}</p>
|
||
<div class="bg1">
|
||
<countTo :startVal="0" :endVal="outInData.outnum" :duration="5000"></countTo>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p>{{ $t("message.carOverview.vehicleWashingRate") }}</p>
|
||
<div class="bg1">
|
||
<!-- <countTo :startVal="0" :endVal="0" :duration="5000"></countTo> -->
|
||
0%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="smallDiv fullHeight">
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e3">{{$t("message.carOverview.latestVehicle") }}</p>
|
||
</div>
|
||
<div class="blockContent alarmBlockContent">
|
||
<div class="carBox big">
|
||
<img :preview="outObj.panoramaUrl?$store.state.FILEURL+outObj.panoramaUrl:''"
|
||
:src="outObj.panoramaUrl?$store.state.FILEURL+outObj.panoramaUrl:''"
|
||
alt="" srcset=""/>
|
||
<div class="carDetail" v-if="outList.length">
|
||
<p class="greenBtn whiteList" :class="outObj.isBlack===0?'':outObj.isBlack===1?'red':'green'">
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/carOverview/arrow.png"
|
||
/>
|
||
{{outObj.isBlack===0?$t("message.carOverview.whiteList"):outObj.isBlack===1?$t("message.carOverview.blackList"):$t("message.carOverview.temporaryCar")}}
|
||
</p>
|
||
<p class="carNum">{{outObj.carNumber}}</p>
|
||
<p class="time">{{outObj.passTime}}</p>
|
||
</div>
|
||
<div class="placeholderBox placeholderBox2" v-if="outList.length==0">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="">
|
||
<p>{{$t("message.carOverview.noData")}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e5">{{ $t("message.carOverview.exitGateControl") }}</p>
|
||
</div>
|
||
<div class="blockContent controlBox">
|
||
<div class="bg2" @click="clickOutStart">
|
||
{{ $t("message.carOverview.clickOnStart") }}
|
||
{{ $t("message.carOverview.vehicleAppearance") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e6">
|
||
{{
|
||
$t("message.carOverview.vehiclesApproachingTheSceneAreSnapped")
|
||
}}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent carList">
|
||
<vue-scroll :ops="ops">
|
||
<div class="carBox" v-for="item in inList" :key="item.id">
|
||
<img :preview="$store.state.FILEURL+item.panoramaUrl"
|
||
:src="$store.state.FILEURL+item.panoramaUrl" alt="" srcset=""/>
|
||
<div class="carDetail">
|
||
<p class="carNum">{{item.carNumber}}</p>
|
||
<p class="time">{{item.passTime}}</p>
|
||
<span class="greenBtn" :class="item.isBlack===0?'':item.isBlack===1?'red':'green'">
|
||
<img v-for="item in 4" :key="item" :class="'arrow' + item" class="arrow"
|
||
src="@/assets/images/carOverview/arrow.png"/>
|
||
{{item.isBlack===0?$t("message.carOverview.whiteList"):item.isBlack===1?$t("message.carOverview.blackList"):$t("message.carOverview.temporaryCar")}}</span>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox placeholderBox2" v-if="inList.length==0">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="">
|
||
<p>{{$t("message.carOverview.noData")}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e7">
|
||
{{ $t("message.carOverview.exitVehicleSnapshot") }}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent carList">
|
||
<vue-scroll :ops="ops">
|
||
<div class="carBox" v-for="item in outList" :key="item.id">
|
||
<img :preview="$store.state.FILEURL+item.panoramaUrl"
|
||
:src="$store.state.FILEURL+item.panoramaUrl" alt="" srcset=""/>
|
||
<div class="carDetail">
|
||
<p class="carNum">{{item.carNumber}}</p>
|
||
<p class="time">{{item.passTime}}</p>
|
||
<span class="greenBtn" :class="item.isBlack===0?'':item.isBlack===1?'red':'green'">
|
||
<img v-for="item in 4" :key="item" :class="'arrow' + item" class="arrow"
|
||
src="@/assets/images/carOverview/arrow.png"/>
|
||
{{item.isBlack===0?$t("message.carOverview.whiteList"):item.isBlack===1?$t("message.carOverview.blackList"):$t("message.carOverview.temporaryCar")}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox placeholderBox2" v-if="outList.length==0">
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="">
|
||
<p>{{$t("message.carOverview.noData")}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getCarPassRecordStatistics,
|
||
getCarCameraListApi,
|
||
openGate
|
||
} from '../../../assets/js/api/carManage'
|
||
import echarts from 'echarts4';;
|
||
import countTo from "vue-count-to";
|
||
import closePage from "@/components/closePage"
|
||
export default {
|
||
components: {
|
||
countTo,closePage
|
||
},
|
||
data() {
|
||
return {
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true
|
||
}
|
||
},
|
||
valve: {},
|
||
inList: [],
|
||
inObj: {},
|
||
outList: [],
|
||
outObj: {},
|
||
outInData: {
|
||
innum: 0,
|
||
outnum: 0,
|
||
presencenum:0
|
||
},
|
||
weatherInfo: {
|
||
data: [],
|
||
},
|
||
Chart:null,
|
||
option:{},
|
||
angle:0,
|
||
interval:null
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCar();
|
||
// this.upDataChart();
|
||
},
|
||
methods: {
|
||
getCar() {
|
||
getCarCameraListApi({projectSn: this.$store.state.projectSn}).then(result => {
|
||
if (result.success) {
|
||
console.log('查看阀门', result.result);
|
||
result.result.map(item => {
|
||
if (item.passType === 1) {
|
||
this.valve.in = item.cameraId;
|
||
} else if (item.passType === 2) {
|
||
this.valve.out = item.cameraId;
|
||
}
|
||
})
|
||
}
|
||
})
|
||
getCarPassRecordStatistics({projectSn: this.$store.state.projectSn}).then(result => {
|
||
if (result.success) {
|
||
console.log('查看车辆', result.result);
|
||
this.inList = result.result.inList;
|
||
this.inObj = this.inList[0] || {};
|
||
this.outList = result.result.outList;
|
||
this.outObj = this.outList[0] || {};
|
||
this.outInData = result.result.outInData;
|
||
this.$nextTick(() => {
|
||
this.$previewRefresh();
|
||
//
|
||
if(this.Chart){
|
||
// this.Chart.setOption(this.option);
|
||
// if(this.interval){
|
||
// clearInterval(this.interval)
|
||
// }
|
||
// this.interval=setInterval(() => {
|
||
// //用setInterval做动画感觉有问题
|
||
// this.angle = this.angle + 3;
|
||
// this.Chart.setOption(this.option, true);
|
||
// }, 100);
|
||
}else{
|
||
this.upDataChart();
|
||
}
|
||
|
||
})
|
||
setTimeout(()=>{
|
||
this.getCar()
|
||
},10000)
|
||
// console.log('查看outObj', this.outObj);
|
||
}
|
||
})
|
||
},
|
||
clickOnStart() {
|
||
console.log('入场开启', this.inObj, this.valve)
|
||
if(!this.valve.in){
|
||
this.$message.error('没有入场相机')
|
||
return
|
||
}
|
||
openGate({cameraId: this.valve.in}).then(result => {
|
||
if (result.success) {
|
||
console.log('进入成功', result.result);
|
||
this.$message.success(result.message)
|
||
}
|
||
})
|
||
},
|
||
clickOutStart() {
|
||
console.log('出厂开启', this.inObj, this.valve)
|
||
if(!this.valve.out){
|
||
this.$message.error('没有出场相机')
|
||
return
|
||
}
|
||
openGate({cameraId: this.valve.out}).then(result => {
|
||
if (result.success) {
|
||
console.log('出厂成功', result.result);
|
||
this.$message.success(result.message)
|
||
}
|
||
})
|
||
},
|
||
upDataChart() {
|
||
let that = this;
|
||
// this.Chart.clear();
|
||
// let angle = 0; //角度，用来做简单的动画效果的
|
||
this.Chart = echarts.init(this.$refs.centerChart);
|
||
// let value = this.outInData.presencenum;
|
||
console.log('查看outInData', this.outInData);
|
||
this.option = {
|
||
title: {
|
||
text:
|
||
"{a|" +
|
||
this.outInData.presencenum +
|
||
"}\n{c| " +
|
||
this.$t("message.carOverview.presentVehicle") +
|
||
" }",
|
||
x: "center",
|
||
y: "center",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 46,
|
||
color: "#5CE2F6",
|
||
},
|
||
c: {
|
||
fontSize: 16,
|
||
lineHeight: 20,
|
||
color: "#5CE2F6",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "ring5",
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
return {
|
||
type: "arc",
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
|
||
startAngle: ((0 + that.angle) * Math.PI) / 180,
|
||
endAngle: ((90 + that.angle) * Math.PI) / 180,
|
||
},
|
||
style: {
|
||
stroke: "#0CD3DB",
|
||
fill: "transparent",
|
||
lineWidth: 1.5,
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
name: "ring5",
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
return {
|
||
type: "arc",
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
|
||
startAngle: ((180 + that.angle) * Math.PI) / 180,
|
||
endAngle: ((270 + that.angle) * Math.PI) / 180,
|
||
},
|
||
style: {
|
||
stroke: "#0CC1CD",
|
||
fill: "transparent",
|
||
lineWidth: 1.5,
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
name: "ring5",
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
return {
|
||
type: "arc",
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
|
||
startAngle: ((270 + -that.angle) * Math.PI) / 180,
|
||
endAngle: ((40 + -that.angle) * Math.PI) / 180,
|
||
},
|
||
style: {
|
||
stroke: "#0CC1CD",
|
||
fill: "transparent",
|
||
lineWidth: 1.5,
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
name: "ring5",
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
return {
|
||
type: "arc",
|
||
shape: {
|
||
cx: api.getWidth() / 2,
|
||
cy: api.getHeight() / 2,
|
||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
|
||
startAngle: ((90 + -that.angle) * Math.PI) / 180,
|
||
endAngle: ((220 + -that.angle) * Math.PI) / 180,
|
||
},
|
||
style: {
|
||
stroke: "#0CC1CD",
|
||
fill: "transparent",
|
||
lineWidth: 1.5,
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
name: "ring5",
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
|
||
let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);
|
||
return {
|
||
type: "circle",
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4,
|
||
},
|
||
style: {
|
||
stroke: "#0CC1CD", //粉
|
||
fill: "#0CD3DB",
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
name: "ring5", //绿点
|
||
type: "custom",
|
||
coordinateSystem: "none",
|
||
renderItem: function (params, api) {
|
||
let x0 = api.getWidth() / 2;
|
||
let y0 = api.getHeight() / 2;
|
||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
|
||
let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);
|
||
return {
|
||
type: "circle",
|
||
shape: {
|
||
cx: point.x,
|
||
cy: point.y,
|
||
r: 4,
|
||
},
|
||
style: {
|
||
stroke: "#0CC1CD", //绿
|
||
fill: "#0CD3DB",
|
||
},
|
||
silent: true,
|
||
};
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["72%", "58%"],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 90,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: this.outInData.presencenum,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#5EE4F7",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
value: 100 - this.outInData.presencenum,
|
||
name: "",
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#072735",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
//划块线
|
||
{
|
||
name: "",
|
||
type: "gauge",
|
||
radius: "72%",
|
||
center: ["50%", "50%"],
|
||
startAngle: 0,
|
||
endAngle: 359.9,
|
||
splitNumber: 8,
|
||
hoverAnimation: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
length: 20,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#061740",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
opacity: 0,
|
||
},
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
// this.Chart.setOption(this.option);
|
||
this.interval=setInterval(() => {
|
||
//用setInterval做动画感觉有问题
|
||
this.angle = this.angle + 3;
|
||
this.Chart.setOption(this.option, true);
|
||
}, 100);
|
||
},
|
||
|
||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
getCirlPoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||
return {
|
||
x: x1,
|
||
y: y1,
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url("./style.less");
|
||
|
||
.whiteList {
|
||
position: relative;
|
||
background: #235A67;
|
||
margin-top: 0;
|
||
width: calc(100% - 22px);
|
||
|
||
.arrow {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
/deep/ .__view {
|
||
display: flex;
|
||
}
|
||
|
||
.carBox {
|
||
& > img {
|
||
height: unset;
|
||
}
|
||
}
|
||
</style> |