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>
|