206 lines
6.6 KiB
Vue
206 lines
6.6 KiB
Vue
<template>
|
||
<div class="car">
|
||
<div class="item">
|
||
<canvas v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
|
||
<image v-if="carNumPath" class="carNum" :src="carNumPath"></image>
|
||
</div>
|
||
<div class="item">
|
||
<canvas v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
|
||
<image v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/components/u-charts.js';
|
||
var uChartsInstance = {};
|
||
export default {
|
||
name: "entryZone",
|
||
data(){
|
||
return {
|
||
entryRate: '',// 入区率
|
||
carNumAll : 0,// 一共的入区车流数
|
||
carNumPath:'',//图片路径
|
||
probabilityPath:''//图片路径
|
||
}
|
||
},
|
||
props:{
|
||
carData:{
|
||
type:Array,
|
||
default:()=>[]
|
||
}
|
||
},
|
||
watch:{
|
||
carData:{
|
||
handler(value){
|
||
this.handleCarData(value)
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
// 处理传入的数据
|
||
handleCarData(value){
|
||
let data = []
|
||
let carSum = 0 //一共多少辆车
|
||
let Vehicle_CountAll=0 //入区车流量
|
||
let SectionFlow_CountAll=0 //车流量
|
||
value.forEach(item=>{
|
||
data.push({name:item.Serverpart_Region+'区 '+item.Vehicle_Count ,value:item.Entry_Rate })
|
||
carSum+=item.Vehicle_Count
|
||
Vehicle_CountAll+=item.Vehicle_Count
|
||
SectionFlow_CountAll+=item.SectionFlow_Count
|
||
})
|
||
this.carNumAll = carSum
|
||
let res = {
|
||
series: [
|
||
{
|
||
data: data
|
||
}
|
||
]
|
||
}
|
||
let probabilityData = []
|
||
value.forEach(item=>{
|
||
let value = item.Entry_Rate
|
||
let text = item.Serverpart_Region + '区' + value .toFixed(2) + '%'
|
||
if (text.length<8){
|
||
//不要删区里面的空格！！！！
|
||
text = item.Serverpart_Region + '区 ' + value .toFixed(2) + '%'
|
||
}
|
||
console.log('text.length',text.length)
|
||
|
||
probabilityData.push({
|
||
name: text,
|
||
value: Number(value.toFixed(2))
|
||
})
|
||
})
|
||
let probabilityRes = {
|
||
series:[
|
||
{
|
||
data: probabilityData
|
||
}
|
||
]
|
||
}
|
||
// 只有当两个都不是0的时候才能计算入区率
|
||
if (Vehicle_CountAll!==0 && SectionFlow_CountAll!==0){
|
||
this.entryRate = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)+'%'
|
||
}
|
||
let configCarNum={
|
||
title:this.carNumAll,
|
||
subtitle:"昨日入区车流"
|
||
}
|
||
let config={
|
||
title:this.entryRate,
|
||
subtitle:"昨日入区率"
|
||
}
|
||
|
||
this.drawCharts('carNum' , res,configCarNum )
|
||
this.drawCharts('probability',probabilityRes,config)
|
||
},
|
||
drawCharts(id,data,config){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
let _this = this
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "ring",
|
||
context: ctx,
|
||
width: 178,
|
||
height: 208,
|
||
series: data.series,
|
||
animation: true,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
background: "#FFFFFF",
|
||
color: ["#CAD0DA","#1E80FF"],
|
||
padding: [5,5,5,5],
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
title: {
|
||
name: config.title,
|
||
fontSize: 16,
|
||
color: "#341D00"
|
||
},
|
||
subtitle: {
|
||
name: config.subtitle,
|
||
fontSize: 12,
|
||
color: "#786B6C",
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
float: 'center'
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 12,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
});
|
||
setTimeout( ()=>{
|
||
this.canvasToTempImage1('carNum')
|
||
this.canvasToTempImage2('probability')
|
||
},2000)
|
||
},
|
||
canvasToTempImage1(id){
|
||
uni.canvasToTempFilePath({
|
||
canvasId:id,
|
||
complete:(res)=>{
|
||
if (res.tempFilePath){
|
||
uni.getFileSystemManager().readFile({
|
||
filePath: res.tempFilePath,
|
||
encoding: 'base64',
|
||
success: res => {
|
||
let base64 = 'data:image/png;base64,' + res.data;
|
||
this.carNumPath = base64
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},this)
|
||
},
|
||
canvasToTempImage2(id){
|
||
uni.canvasToTempFilePath({
|
||
canvasId:id,
|
||
complete:(res)=>{
|
||
if (res.tempFilePath){
|
||
uni.getFileSystemManager().readFile({
|
||
filePath: res.tempFilePath,
|
||
encoding: 'base64',
|
||
success: res => {
|
||
let base64 = 'data:image/png;base64,' + res.data;
|
||
this.probabilityPath = base64
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},this)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.car{
|
||
width: 100%;
|
||
height: 188px;
|
||
display: flex;
|
||
.item{
|
||
width: 50%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.carNum{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style> |