ahyd_DIB/pages/commercialBI/components/car/entryZone.vue

<template>
    <div style="min-height: 100px;">
        <div  v-if="isShowData">
            <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>
            <analyse />
        </div>
        <no-data v-if="carData.length===0"/>
    </div>

</template>

<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
var uChartsInstance = {};
export default {
    name: "entryZone",
    components: {Analyse, NoData},
    data(){
        return {
            dataList :[],
            width:0,
            entryRate: '',// 入区率
            carNumAll : 0,// 一共的入区车流数
            carNumPath:'',//图片路径
            probabilityPath:'',//图片路径
            isShowData:false,
        }
    },
    props:{
        carData:{
            type:Array,
            default:()=>[]
        }
    },
    watch:{
        carData:{
            handler(value){
                if (value.length!==0){
                    this.isShowData = true
                }
                this.handleCarData(value)
                this.dataList = value
            },
            deep:true
        }
    },
    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) + '%'
                    }

                    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:"昨日入区率"
            }
            console.log('res1111',res)
            console.log('probabilityRes1111',probabilityRes)
            this.drawCharts('carNum' , res,configCarNum )
            this.drawCharts('probability',probabilityRes,config)
        },
        drawCharts(id,data,config){
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
          let phoneInfo = uni.getStorageSync('phoneInfo')
          this.width = (phoneInfo.screenWidth - 16) / 2
          console.log('this.width',this.width)
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: _this.width,
                height: 208,
                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: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'
                },
                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')
            },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: calc(100vw / 2);
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .carNum{
            width: 100%;
            height: 100%;
        }
    }
}
</style>