331 lines
12 KiB
Vue
331 lines
12 KiB
Vue
<template>
|
|
<div style="min-height: 100px;">
|
|
<div class="percentEntry" >
|
|
<div class="progress">
|
|
<div class="have" >
|
|
<view class="box" >
|
|
<div class="min" :style="{width:min+'%'}" @click="handleShow(0)">
|
|
<div class="text" v-if="rateList[0]">
|
|
<div class="icon" style="background: #1E80FF"></div>
|
|
<text style="margin-right: 4px">小车型</text>
|
|
<text>{{min}}%</text>
|
|
</div>
|
|
</div>
|
|
<div class="middle" :style="{width:middle+'%',left:min+'%'}" @click="handleShow(1)">
|
|
<div class="text" v-if="rateList[1]" :style="{left:'50%'}">
|
|
<div class="icon" style="background: #00B6FF"></div>
|
|
<text style="margin-right: 4px">中型车</text>
|
|
<text>{{middle}}%</text>
|
|
</div>
|
|
</div>
|
|
<div class="big" :style="{width:big+'%',right:0+'%'}" @click="handleShow(2)">
|
|
<div class="text" v-if="rateList[2]" :style="{left:'60%'}">
|
|
<div class="icon" style="background: #0FC862"></div>
|
|
<text style="margin-right: 4px">大型车</text>
|
|
<text>{{big}}%</text>
|
|
</div>
|
|
</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" :class="item.title==='小型车'?'icon1':item.title==='中型车'?'icon2':item.title==='大型车'?'icon3':'icon'"></div>
|
|
<p class="smallTitle">{{item.title}}</p>
|
|
</div>
|
|
<div style="display: flex;align-items: center">
|
|
<p class="smallRate">{{item.value + '%'}}</p>
|
|
<view class="right" v-if="item.addValue">
|
|
<image class="arrowTop" :src="Number(item.addValue)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<text class="text">{{item.addValue?Math.abs(item.addValue) + '%':'-' + '%'}}</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NoData from "../noData.vue";
|
|
import Analyse from "../analyse.vue";
|
|
|
|
export default {
|
|
name: "percentEntry",
|
|
components: {Analyse, NoData},
|
|
data() {
|
|
return {
|
|
dataList:[{title:'小型车',value:'',addValue:''},{title:'中型车',value:'',addValue:''},{title:'大型车',value:'',addValue:''}],
|
|
progress:0,//入区率总比
|
|
addProgress:0,//总增长
|
|
min:0,//小型车
|
|
middle:0,//中型车
|
|
big:0,//大型车
|
|
isShowData:false,
|
|
analyseInfo:{
|
|
analysisins_type: 1106,
|
|
analysisins_format: 2000
|
|
},
|
|
rateList:[false,false,false]
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
this.dataList = [{title:'小型车',value:''},{title:'中型车',value:''},{title:'大型车',value:''}]
|
|
this.handleCarData(value)
|
|
},
|
|
immediate:true,
|
|
deep:true
|
|
}
|
|
},
|
|
methods: {
|
|
handleShow(num){
|
|
let list = []
|
|
this.rateList.forEach(()=>{
|
|
list.push(false)
|
|
})
|
|
this.rateList = list
|
|
this.rateList[num] = true
|
|
},
|
|
// 处理传入的数据
|
|
handleCarData(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 = (minAll / Vehicle_CountAll*100).toFixed(2)
|
|
this.dataList[1].value = (middleAll / Vehicle_CountAll*100).toFixed(2)
|
|
this.dataList[2].value = (bigAll / Vehicle_CountAll*100).toFixed(2)
|
|
this.dataList[0].addValue = value[0].MinVehicleEntry_GrowthRate
|
|
this.dataList[1].addValue = value[0].MediumVehicleEntry_GrowthRate
|
|
this.dataList[2].addValue = value[0].LargeVehicleEntry_GrowthRate
|
|
let list = []
|
|
this.dataList.forEach(item=>{
|
|
if (Number(item.value)===0){
|
|
|
|
}else{
|
|
list.push(item)
|
|
}
|
|
})
|
|
this.dataList = list
|
|
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{
|
|
width: 100%;
|
|
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;
|
|
border-radius: 2px 0 0 2px;
|
|
position: relative;
|
|
.text{
|
|
position: absolute;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 22%;top: -23px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
.icon{
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #1E80FF;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
.middle{
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #00B6FF;
|
|
margin-right: 2px;
|
|
.text{
|
|
position: absolute;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 0;top: 0px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
.icon{
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #1E80FF;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
.big{
|
|
height: 100%;box-sizing: border-box;
|
|
background: #0FC862;
|
|
border-radius: 0 2px 2px 0 ;
|
|
.text{
|
|
position: absolute;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 22%;top: -23px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
.icon{
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #1E80FF;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.right{
|
|
width: 70px;
|
|
margin-left: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.arrowTop {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
}
|
|
.text {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 20px;
|
|
margin-right: 4px;
|
|
}
|
|
.compare {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #c97e64;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|