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

<template>
    <div style="min-height: 100px;">
        <div v-if="isShowData">
            <div class="percentEntry" >
                <div class="progress">
                    <div class="have" :style="{width:progress+'%'}">
                        <view class="box" >
                            <div class="min" :style="{width:min+'%'}"></div>
                            <div class="middle" :style="{width:middle+'%',left:min+'%'}"></div>
                            <div class="big" :style="{width:big+'%',right:0+'%'}"></div>
                        </view>
                    </div>
                </div>

                <div class="list">
                    <div class="listItem" v-for="(item,index) in dataList" :key="index">
                        <div class="left">
                            <div style="margin-right: 4px" v-if="index!==0" :class="index===1?'icon1':index===2?'icon2':index===3?'icon3':'icon'"></div>
                            <p :class="index===0?'title':'smallTitle'">{{item.title}}</p>
                        </div>
                        <p :class="index===0?'rate':'smallRate'">{{item.value + '%'}}</p>
                    </div>
                </div>
            </div>
        </div>
        <no-data v-if="data.length===0"/>
    </div>
</template>

<script>
import NoData from "../noData.vue";

export default {
    name: "percentEntry",
    components: {NoData},
    data() {
        return {
            dataList:[{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}],
            progress:0,//入区率总比
            min:0,//小型车
            middle:0,//中型车
            big:0,//大型车
            isShowData:false,
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                if (value){
                    this.isShowData = true
                }
                this.dataList = [{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}]
                this.handleCarData(value)
            }
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            console.log('value',value)
            let Vehicle_CountAll=0
            let SectionFlow_CountAll=0
            let minAll = 0
            let middleAll = 0
            let bigAll = 0
            value.forEach(item=>{
                Vehicle_CountAll+= item.Vehicle_Count
                SectionFlow_CountAll+= item.SectionFlow_Count
                minAll+=item.MinVehicle_Count
                middleAll+=item.MediumVehicle_Count
                bigAll+=item.LargeVehicle_Count
            })
            this.progress = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)
            this.min = (minAll / Vehicle_CountAll*100).toFixed(2)
            this.middle = (middleAll / Vehicle_CountAll*100).toFixed(2)
            this.big = (bigAll / Vehicle_CountAll*100).toFixed(2)

            this.dataList[0].value = this.progress
            this.dataList[1].value = (minAll / SectionFlow_CountAll*100).toFixed(2)
            this.dataList[2].value = (middleAll / SectionFlow_CountAll*100).toFixed(2)
            this.dataList[3].value = (bigAll / SectionFlow_CountAll*100).toFixed(2)

            for (let i=1;i<this.dataList.length;i++){
                for (let j=1;j<this.dataList.length - 1;j++){
                    if (Number(this.dataList[i].value)>Number(this.dataList[j].value)){
                        let temp = this.dataList[i]
                        this.dataList[i] = this.dataList[j]
                        this.dataList[j] = temp
                    }
                }
            }

        },
    }
}
</script>

<style scoped lang="scss">
.percentEntry{
    width:100%;
    margin-top: 12px;
    .progress{
        width: 100%;
        height: 20px;
        background: #E5E8EF;
        border-radius: 2px;
        position: relative;
        .have{
            position: absolute;
            height: 100%;
            top: 0;left: 0;
            .box{
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                .min{
                    box-sizing: border-box;
                    height: 100%;
                    background: #1E80FF;
                    margin-right: 2px;
                }
                .middle{
                    height: 100%;box-sizing: border-box;
                    background: #00B6FF;
                    margin-right: 2px;
                }
                .big{
                    height: 100%;box-sizing: border-box;
                    background: #0FC862;
                    margin-right: 2px;
                }
            }
        }
    }
    .list{
        width: 100%;
        margin-top: 8px;
        .listItem{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            .left{
                display: flex;
                align-items: center;
                .icon1{
                    width: 6px;
                    height: 6px;
                    background: #1E80FF;
                    border-radius: 2px;
                }
                .icon2{
                    width: 6px;
                    height: 6px;
                    background: #00B6FF;
                    border-radius: 2px;
                }
                .icon3{
                    width: 6px;
                    height: 6px;
                    background: #0FC862;
                    border-radius: 2px;
                }
                .title{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 20px;
                }
                .smallTitle{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px;
                }
            }

            .rate{
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px;
            }
            .small{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 20px;
            }
        }
    }
}
</style>