730 lines
23 KiB
Vue
730 lines
23 KiB
Vue
<template>
|
||
<div class="fullHeight greenPage">
|
||
<div class="greenContent">
|
||
<div class="top">
|
||
<div class="smallDiv smallDiv1 fullHeight">
|
||
<div class="blockBox">
|
||
<div class="title">
|
||
<p class="e1" style="position: absolute; top: -1%; left: 33%">
|
||
{{ $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" style="position: absolute; top: -8%; left: 35%">
|
||
{{ $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" style="position: absolute; top: -1%; left: 34%">
|
||
{{ $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" style="position: absolute; top: -8%; left: 34%">{{ $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" style="height: 170% !important">
|
||
<div class="title">
|
||
<p class="e6" style="position: absolute; top: -3%; left: 44%">
|
||
{{
|
||
$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="placeholderBox2"
|
||
style="position: absolute; left: 47%; top: 100px"
|
||
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" style="height: 170% !important">
|
||
<div class="title">
|
||
<p class="e7" style="position: absolute; top: -3%; left: 44%">
|
||
{{ $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="placeholderBox2"
|
||
style="position: absolute; left: 47%; top: 110px"
|
||
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 + 6;
|
||
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('./styleShzj.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> |