400 lines
14 KiB
Vue
400 lines
14 KiB
Vue
<template>
|
||
<div style="min-height: 100px;">
|
||
<div class="car">
|
||
<div class="item" :style="{left: Serverpart_ID?'-16px':'0px',width: '200px'}">
|
||
<canvas style="left: 0" v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
|
||
<image style="left: 0" v-if="carNumPath" class="carNum" :src="carNumPath"></image>
|
||
</div>
|
||
<div class="item" :style="{right:Serverpart_ID? '-16px':'-33px',width: '200px'}">
|
||
<canvas style="right: 0" v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
|
||
<image style="right: 0" v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="info">-->
|
||
<!-- <div class="item">-->
|
||
<!-- <text class="title">{{month}}月累计：</text>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="other">-->
|
||
<!-- <div class="item">-->
|
||
<!-- <p class="title">-->
|
||
<!-- <text class="text">入区</text>-->
|
||
<!-- <text class="textRight">{{allAddUpCount}}辆</text>-->
|
||
<!-- </p>-->
|
||
<!-- <div class="box">-->
|
||
<!-- <p class="value" v-for="(item,index) in dataList" :key="index">-->
|
||
<!-- <text class="text">{{item.Serverpart_Region + '区 '}}</text>-->
|
||
<!-- <text class="textRight">{{item.AddUpCount + '辆' }}</text>-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- </div>-->
|
||
<!-- <div class="item">-->
|
||
<!-- <p class="title">-->
|
||
<!-- <text class="text">入区率</text>-->
|
||
<!-- <text class="textRight">{{ allEntryAddUpRate }}%</text>-->
|
||
<!-- </p>-->
|
||
<!-- <div class="box">-->
|
||
<!-- <p class="value" v-for="(item,index) in dataList" :key="index">-->
|
||
<!-- <text class="text">{{item.Serverpart_Region + '区 '}}</text>-->
|
||
<!-- <text class="textRight">{{item.EntryAddUp_Rate + '%' }}</text>-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/components/u-charts.js';
|
||
var uChartsInstance = {};
|
||
export default {
|
||
name: "entryZone",
|
||
data(){
|
||
return {
|
||
dataList :[],
|
||
width:0,
|
||
entryRate: '',// 入区率
|
||
carNumAll : 0,// 一共的入区车流数
|
||
carNumPath:'',//图片路径
|
||
probabilityPath:'',//图片路径
|
||
isShowData:false,
|
||
analyseInfo:{
|
||
analysisins_type: 1102,
|
||
analysisins_format: 2000
|
||
},
|
||
allAddUpCount:0,
|
||
allEntryAddUpRate:0,
|
||
Serverpart_ID:''
|
||
}
|
||
},
|
||
props:{
|
||
carData:{
|
||
type:Array,
|
||
default:()=>[]
|
||
},
|
||
time:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
month:{
|
||
type:String,
|
||
default:''
|
||
}
|
||
},
|
||
|
||
watch:{
|
||
carData:{
|
||
handler(value){
|
||
console.log('value222',value)
|
||
if (value.length>0){
|
||
this.isShowData = true
|
||
}
|
||
this.carNumPath = ''
|
||
this.probabilityPath = ''
|
||
this.dataList = value
|
||
this.dataList.forEach(item=>{
|
||
item.AddUpCount = item.Vehicle_AddUpCount?this.$util.noDecimal(item.Vehicle_AddUpCount):0
|
||
allCount +=item.Vehicle_AddUpCount
|
||
allRate +=item.EntryAddUp_Rate
|
||
this.Serverpart_ID = item.Serverpart_ID
|
||
})
|
||
this.handleCarData(value)
|
||
let allCount = 0
|
||
let allRate = 0
|
||
|
||
this.allAddUpCount = this.$util.noDecimal(allCount)
|
||
this.allEntryAddUpRate = allRate.toFixed(2)
|
||
},
|
||
immediate:true,
|
||
deep:true
|
||
}
|
||
},
|
||
methods:{
|
||
// 处理传入的数据
|
||
handleCarData(value){
|
||
let data = []
|
||
let carSum = 0 //一共多少辆车
|
||
let Vehicle_CountAll=0 //入区车流量
|
||
let SectionFlow_CountAll=0 //车流量
|
||
console.log('this.id',this.id)
|
||
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?item.Entry_Rate:0
|
||
let text = item.Serverpart_Region + '区' + value .toFixed(2) + '%'
|
||
if (text.length<8){
|
||
//不要删区里面的空格！！！！
|
||
text = item.Serverpart_Region + '区 ' + value .toFixed(2) + '%'
|
||
}
|
||
|
||
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.drawCharts2('probability',probabilityRes,config)
|
||
},
|
||
drawCharts(id,data,config){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
let _this = this
|
||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "ring",
|
||
context: ctx,
|
||
width: _this.Serverpart_ID?200:160,
|
||
height: _this.Serverpart_ID?208:160,
|
||
series: data.series,
|
||
animation: false,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
background: "#FFFFFF",
|
||
color: ["#1E80FF","#00C2FF"],
|
||
padding: [5,5,5,5],
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
title: {
|
||
name: config.title,
|
||
fontSize: 14,
|
||
color: "#341D00"
|
||
},
|
||
subtitle: {
|
||
name: config.subtitle,
|
||
fontSize: 10,
|
||
color: "#786B6C",
|
||
},
|
||
legend: {
|
||
show: _this.Serverpart_ID?true:false,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
float: 'center',
|
||
fontSize:11,
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 14,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: -90,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
});
|
||
setTimeout( ()=>{
|
||
this.canvasToTempImage1('carNum')
|
||
this.canvasToTempImage2('probability')
|
||
},1000)
|
||
},
|
||
drawCharts2(id,data,config){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
let _this = this
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "ring",
|
||
context: ctx,
|
||
width: _this.Serverpart_ID?210:160,
|
||
height: _this.Serverpart_ID?208:160,
|
||
series: data.series,
|
||
animation: false,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
background: "#FFFFFF",
|
||
color: ["#1E80FF","#00C2FF"],
|
||
padding: [5,5,5,5],
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
title: {
|
||
name: config.title,
|
||
fontSize: 14,
|
||
color: "#341D00"
|
||
},
|
||
subtitle: {
|
||
name: config.subtitle,
|
||
fontSize: 10,
|
||
color: "#786B6C",
|
||
},
|
||
legend: {
|
||
show: _this.Serverpart_ID?true:false,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
float: 'center',
|
||
fontSize:12,
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 14,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: -90,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
});
|
||
setTimeout( ()=>{
|
||
this.canvasToTempImage1('carNum')
|
||
this.canvasToTempImage2('probability')
|
||
},1000)
|
||
},
|
||
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;
|
||
position: relative;
|
||
.item{
|
||
position: absolute;
|
||
top: 0;
|
||
height: 100%;
|
||
.carNum{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.info{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 8px;
|
||
.item{
|
||
display: inline-block;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
.other{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.item{
|
||
width: 45%;
|
||
text-align: left;
|
||
.title{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
width: 100%;
|
||
.text{
|
||
display: inline-block;
|
||
width: 40%;
|
||
color: #786B6C;
|
||
}
|
||
.textRight{
|
||
display: inline-block;
|
||
width: 60%;
|
||
text-align: right;
|
||
color: #786B6C;
|
||
}
|
||
}
|
||
.box{
|
||
text-align: left;
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
display: inline-block;
|
||
width: 100%;
|
||
.text{
|
||
display: inline-block;
|
||
width: 40%;
|
||
color: #786B6C;
|
||
}
|
||
.textRight{
|
||
display: inline-block;
|
||
width: 60%;
|
||
text-align: right;
|
||
color: #786B6C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|