<template>
|
<div class="page-container colorfff">
|
<div class="selector-wrap">
|
<el-form :style="{'margin-top': userInfo.deptId == '1' ? '0' : '40px'}">
|
<el-form-item>
|
<el-select v-model="companyId" :style="{width: '154px'}" @change="handleChange" v-if="userInfo.deptId == '1'">
|
<el-option
|
v-for="item in companyList"
|
:key="item.companyNum"
|
:value="item.companyNum"
|
:label="item.companyName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="item-wrap">
|
<!-- 工作时长排名 -->
|
<div class="item">
|
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">工作时长排名</div>
|
<div class="flex align-c more" @click="toDriverList('driverWorkingHours')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="worktime-rank">
|
<img :src="require('@/assets/driverappraise/bg_rank.png')" alt="" />
|
<div class="pre-3 first">
|
<div class="time">
|
{{ workTimeRank[0] && workTimeRank[0].hours }}<span class="unit">h</span>
|
</div>
|
<div class="name">{{ workTimeRank[0] && workTimeRank[0].name }}</div>
|
</div>
|
<div class="pre-3 second">
|
<div class="time">
|
{{ workTimeRank[1] && workTimeRank[1].hours }}<span class="unit">h</span>
|
</div>
|
<div class="name">{{ workTimeRank[1] && workTimeRank[1].name }}</div>
|
</div>
|
<div class="pre-3 thrid">
|
<div class="time">
|
{{ workTimeRank[2] && workTimeRank[2].hours }}<span class="unit">h</span>
|
</div>
|
<div class="name">{{ workTimeRank[2] && workTimeRank[2].name }}</div>
|
</div>
|
</div>
|
<div class="rank-bar-wrap">
|
<roll-list :data="workTimeRank.slice(-5)" height="15vh" :column-height="30" :wait-time="3000">
|
<template #default="{row, index}">
|
<div class="rank-bar">
|
<div class="rank-num">
|
<img
|
v-if="index == 0"
|
:src="require('@/assets/driverappraise/bg_first.png')"
|
alt=""
|
/>
|
<img
|
v-else-if="index == 1"
|
:src="require('@/assets/driverappraise/bg_second.png')"
|
alt=""
|
/>
|
<img
|
v-else-if="index == 2"
|
:src="require('@/assets/driverappraise/bg_third.png')"
|
alt=""
|
/>
|
<img
|
v-else
|
:src="require('@/assets/driverappraise/bg_other.png')"
|
alt=""
|
/>
|
<span class="num">{{ index + 4 }}</span>
|
</div>
|
<span class="name">{{ row.name }}</span>
|
<div class="bar">
|
<div class="bar-inner" :class="'bar-inner-' + index"></div>
|
<div class="bar-end"></div>
|
<div class="value">{{ row.hours }}</div>
|
h
|
</div>
|
</div>
|
|
</template>
|
</roll-list>
|
</div>
|
</div>
|
</div>
|
<!-- 司机占比 -->
|
<div class="item">
|
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">司机占比</div>
|
<div class="flex align-c more" @click="toDriverList('sex')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="content" style="position: absolute; bottom: 0">
|
<img
|
class="driver-p-content-img"
|
:src="require('@/assets/driverappraise/driver-p-bg.png')"
|
alt=""
|
/>
|
<div class="workdriver-wrap">
|
<div class="value digital">{{ driverP.total }}</div>
|
<div class="label font18">当班司机</div>
|
</div>
|
<div class="sex-wrap">
|
<dv-border-box-8 class="sex-item male" :reverse="true">
|
<span>女</span>
|
<span class="digital">{{ driverP.female }}</span>
|
</dv-border-box-8>
|
<dv-border-box-8 class="sex-item female">
|
<span>男</span>
|
<span class="digital">{{ driverP.male }}</span>
|
</dv-border-box-8>
|
</div>
|
</div>
|
</div>
|
<!-- 驾龄分布 -->
|
<div class="item">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">驾龄分布</div>
|
<div class="flex align-c more" @click="toDriverList('workTime')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="content flex">
|
<dv-decoration-9 style="width:217px;height:217px;" class="pie-chart">
|
<div id="jlfbChart" style="width: 168px; height: 168px"></div>
|
<div class="total-wrap">
|
<div class="digital font24" style="color: #1dffff">
|
{{ driverSum }}
|
</div>
|
<div class="font12">全部司机</div>
|
</div>
|
</dv-decoration-9>
|
|
<div class="age-p-bar-wrap">
|
<div
|
class="bar-wrap"
|
v-for="(item, index) in agePercentData"
|
:key="index"
|
>
|
<div class="bar-label">{{ item.name }}</div>
|
<div class="bar">
|
<div
|
class="inner-bar"
|
:style="{
|
'background-color': colors[index],
|
width: (item.value / driverSum) * 100 + '%',
|
}"
|
></div>
|
<div class="bar-end"></div>
|
<div class="font16" style="margin-left: 8px">
|
{{ item.value }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 司机日投诉数量变化/分析 -->
|
<div class="item">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">司机日投诉数量变化/分析</div>
|
<div class="flex align-c more" @click="toDriverList('complaintsNum')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="content flex">
|
<div class="area-line-chart">
|
<area-line
|
id="driverComplainLine"
|
width="27vw"
|
height="31vh"
|
:options="areaLineOptions"
|
:seriesOptions="arealineSeriesOptions"
|
></area-line>
|
</div>
|
</div>
|
</div>
|
<!-- 被投诉分析 -->
|
<div class="item">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">被投诉分析/分析</div>
|
<div class="flex align-c more" @click="toDriverList('complaintsNum')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="content flex">
|
<div class="pie3d-wrap">
|
<pie3d
|
id="driverComplain3dPie"
|
pheight="33vh"
|
pwidth="27vw"
|
:options="{ grid: { top: 0 } }"
|
:optionData="pie3dOptionData"
|
></pie3d>
|
<div class="bg-content">
|
<!-- <img :src="require('@/assets/driverappraise/bg_3dpie.png')" alt=""> -->
|
<div class="font16">被投诉总数</div>
|
<div class="font16 digital" style="margin-bottom: 20px">
|
{{ complaintsNum }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 当班司机统计 -->
|
<div class="item">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">当班司机统计/分析</div>
|
<div class="flex align-c more" @click="toDriverList('companyName')">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="content flex">
|
<div class="gradient-bar-wrap">
|
<gradientbar
|
id="driverOnDutyBar"
|
height="30vh"
|
width="27vw"
|
:seriesOptions="gradientSeriesOptions2"
|
:options="gradientChart2Options"
|
></gradientbar>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import areaLine from "@/components/echart/areaLine.vue";
|
import pie3d from "@/components/echart/pie3d";
|
import gradientbar from "@/components/echart/gradientBar";
|
import moment from "moment";
|
import rollList from "@/components/common/animation/rollList";
|
export default {
|
name: "driverappraise",
|
components: { areaLine, pie3d, gradientbar, rollList },
|
data() {
|
return {
|
pieChart: null,
|
companyId: "",
|
companyList: [],
|
workTimeRank: [
|
{ name: "林大有", time: "890" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
{ name: "李小明", time: "200" },
|
],
|
|
colors: ["#009f89", "#57b4e9", "#c46d56", "#bca983"],
|
agePercentData: [
|
{
|
value: 0,
|
name: "4年以下",
|
itemStyle: {
|
color: {
|
type: "linear",
|
colorStops: [
|
{ offset: 0, color: "rgba(0,159,137,1)" },
|
{ offset: 1, color: "rgba(0,159,137,0.08)" },
|
],
|
},
|
},
|
},
|
{
|
value: 0,
|
name: "4-8年",
|
itemStyle: {
|
color: {
|
type: "linear",
|
colorStops: [
|
{ offset: 0, color: "rgba(0,150,245,1)" },
|
{ offset: 1, color: "rgba(0,150,245,0.08)" },
|
],
|
},
|
},
|
},
|
{
|
value: 0,
|
name: "8-12年",
|
itemStyle: {
|
color: {
|
type: "linear",
|
colorStops: [
|
{ offset: 0, color: "rgba(196,109,86,1)" },
|
{ offset: 1, color: "rgba(196,109,86,0.08)" },
|
],
|
},
|
},
|
},
|
{
|
value: 0,
|
name: "12年以上",
|
itemStyle: {
|
color: {
|
type: "linear",
|
colorStops: [
|
{ offset: 0, color: "rgba(188,169,131,1)" },
|
{ offset: 1, color: "rgba(191,171,131,0.08)" },
|
],
|
},
|
},
|
},
|
],
|
driverSum: 180,
|
|
areaLineOptions: {
|
grid: {
|
left: 0,
|
right: 18,
|
top: '15%',
|
bottom: '0%',
|
},
|
yAxis: {
|
show: false,
|
},
|
xAxis: {
|
type: "category",
|
data: [],
|
axisLabel: {
|
textStyle: {
|
color: "#FFF",
|
},
|
},
|
},
|
legend: {
|
right: 0,
|
top: '0%',
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
arealineSeriesOptions: {
|
data: [[], []],
|
names: ["有责投诉宗数", "投诉总数"],
|
lineColors: ["#39FFE7", "#EBA85A"],
|
gradientColors: [
|
["rgba(107,255,245,1)", "rgba(57,255,231,0)"],
|
["rgba(246,211,145,1)", "rgba(234,168,88,0)"],
|
],
|
showSymbol: false,
|
lineWidth: 2,
|
lineTypes: ["solid", "dashed"],
|
smooth: [false, false],
|
},
|
|
gradientSeriesOptions2: {
|
barWidth: "16px",
|
data: [[]],
|
names: ["当班司机"],
|
gradientColors: [["rgba(7,222,254,1)", "rgba(20,131,242,0)"]],
|
barBorderRadius: [0, 0, 0, 0],
|
label: {
|
show: true,
|
position: "top",
|
color: "#fff",
|
fontSize: 12,
|
},
|
},
|
gradientChart2Options: {
|
grid: {
|
left: "1%",
|
right: "0%",
|
bottom: "1%",
|
top: "10%",
|
containLabel: true,
|
},
|
legend: {
|
show: false,
|
},
|
xAxis: {
|
data: [],
|
axisLabel: {
|
show: true,
|
color: "rgba(255,255,255,0.9)",
|
},
|
axisLine: {
|
lineStyle: {
|
color: "rgba(20,131,242,0.2)",
|
},
|
},
|
},
|
yAxis: {
|
splitNumber: 4,
|
nameTextStyle: {
|
color: "#88A7D2",
|
},
|
axisLine: {
|
show: true,
|
},
|
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: "#222328",
|
},
|
},
|
},
|
},
|
|
pie3dOptionData: [],
|
complaintsNum: 0,
|
driverP: {
|
total: 0,
|
male: 0,
|
female: 0
|
},
|
userInfo: {}
|
};
|
},
|
created() {
|
this.getCompanyList();
|
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
if(userInfo){
|
this.userInfo = userInfo;
|
if(userInfo.deptId != '1'){
|
this.companyId = userInfo.deptId;
|
}
|
}
|
|
},
|
activated() {
|
this.getData();
|
},
|
mounted() {
|
this.initPieChart();
|
},
|
methods: {
|
getCompanyList() {
|
this.$axios.get(this.$Interface.companyList).then((res) => {
|
for(let i=0; i<res.data.length; i++){
|
if(res.data[i].companyNum == 1){
|
res.data.splice(i, 1);
|
i--;
|
}
|
}
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyName: '总公司', companyNum: ''
|
});
|
});
|
},
|
initPieChart() {
|
const pieChart = echarts.init(document.getElementById("jlfbChart"));
|
let option = this.setPieChartOpts();
|
pieChart.setOption(option);
|
this.pieChart = pieChart;
|
window.addEventListener("resize", pieChart.resize);
|
},
|
|
setPieChartOpts(){
|
const option = {
|
legend: {
|
show: false,
|
},
|
title: {
|
text: "",
|
},
|
grid: {
|
left: 0,
|
right: 0,
|
bottom: 0,
|
top: 0,
|
},
|
series: [
|
{
|
name: "Access From",
|
hoverAnimation: false,
|
type: "pie",
|
radius: ["76%", "90%"],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: "center",
|
},
|
emphasis: {
|
label: {
|
show: false,
|
fontSize: "20",
|
fontWeight: "bold",
|
},
|
},
|
labelLine: {
|
show: false,
|
},
|
data: this.agePercentData,
|
},
|
],
|
};
|
return option;
|
},
|
|
toDriverList(prop) {
|
this.$router.push("/driverList?prop="+prop+'&order=descending');
|
},
|
|
handleChange(){
|
this.getData();
|
},
|
|
getData() {
|
const params = {};
|
if(this.companyId){
|
params.companyId = this.companyId;
|
}
|
// 被投诉分析
|
this.$axios.get(this.$Interface.driver.complaint, {
|
params: { ...params }
|
}).then((res) => {
|
const data = res.data;
|
const temp = [];
|
this.complaintsNum = 0;
|
data.forEach((item) => {
|
item.times = Number(item.times);
|
this.complaintsNum += item.dutiesComplaintsNum * item.times;
|
temp.push({
|
name: item.dutiesComplaintsNum + "次投诉",
|
value: item.times,
|
});
|
});
|
this.pie3dOptionData = temp;
|
});
|
|
// 被投诉变化
|
this.$axios.get(this.$Interface.driver.complaintList, {
|
params: { ... params }
|
}).then((res) => {
|
const data = res.data;
|
data.sort(function (a, b){
|
return a.statDate - b.statDate;
|
})
|
let xData = [],
|
yData1 = [],
|
yData2 = [];
|
data.forEach((item) => {
|
xData.push(moment(item.statDate).format("MM/DD"));
|
yData1.push(item.dutiesComplaintsNum);
|
yData2.push(item.complaintsNum);
|
});
|
this.arealineSeriesOptions.data = [yData1, yData2];
|
this.areaLineOptions.xAxis.data = xData;
|
});
|
|
//当班司机统计
|
this.$axios.get(this.$Interface.driver.onLine, {
|
params: { ...params }
|
}).then((res) => {
|
const data = res.data;
|
data.sort((a,b) => {
|
return a.statDate - b.statDate
|
})
|
const xData = [],
|
yData = [];
|
data.forEach((item) => {
|
xData.push(moment(new Date(item.statDate)).format("MM/DD"));
|
yData.push(Number(item.num));
|
});
|
this.gradientSeriesOptions2.data = [yData];
|
this.gradientChart2Options.xAxis.data = xData;
|
});
|
|
//工作时长排名 workRank
|
this.$axios.get(this.$Interface.driver.workRank, {
|
params: { ...params }
|
}).then((res) => {
|
this.workTimeRank = res.data || []
|
if(this.workTimeRank.length > 1){
|
this.workTimeRank.sort(function (a, b){
|
return b.hours - a.hours
|
})
|
}
|
});
|
|
//驾龄分布
|
this.$axios.get(this.$Interface.driver.age, {
|
params: { ...params }
|
}).then((res) => {
|
let sum = 0;
|
let nulNum=0;
|
const data = res.data || []
|
data.forEach(item => {
|
|
sum += Number(item.num);
|
|
if(!item.workYear){
|
nulNum=item.num;
|
}
|
|
if(item.workYear){
|
item.workYear = item.workYear.replace(/\d\//, '');
|
}
|
if(item.workYear && item.workYear.indexOf('to') > -1){
|
item.workYear = item.workYear.replace('to', '-');
|
item.workYear += '年'
|
}
|
if(item.workYear && item.workYear.indexOf('less') > -1){
|
item.workYear = item.workYear.replace('less', '');
|
item.workYear += '年以下';
|
}
|
if(item.workYear && item.workYear.indexOf('more') > -1){
|
item.workYear = item.workYear.replace('more', '');
|
item.workYear += '年以上';
|
}
|
});
|
this.driverSum = sum;
|
for(let i=0; i<data.length; i++){
|
if(!data[i].workYear){
|
data.splice(i, 1);
|
i--
|
}
|
}
|
this.agePercentData.forEach((item, index) => {
|
if(data[index].workYear==="4年以下"){
|
item.value = Number(data[index].num) + Number(nulNum);
|
item.name = data[index].workYear;
|
}else{
|
item.value = Number(data[index].num);
|
item.name = data[index].workYear;
|
}
|
|
});
|
|
let option = this.setPieChartOpts();
|
this.pieChart.setOption(option);
|
});
|
|
|
//司机占比
|
this.$axios.get(this.$Interface.driver.percent, {
|
params: { ...params}
|
}).then( res => {
|
this.driverP.total = 0;
|
this.driverP.male = 0;
|
const data = res.data;
|
data.forEach(item => {
|
if(item.sex == '男' || item.sex=='X'){
|
this.driverP.male += Number(item.num);
|
this.driverP.total += Number(item.num);
|
}
|
if(item.sex == '女'){
|
this.driverP.female = item.num;
|
this.driverP.total += Number(item.num);
|
}
|
})
|
})
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
@keyframes scale {
|
0% {
|
transform: scale(1);
|
}
|
25% {
|
transform: scale(1.03);
|
}
|
50% {
|
transform: scale(1.06);
|
}
|
75% {
|
transform: scale(1.03);
|
}
|
100% {
|
transform: scale(1);
|
}
|
}
|
@import url("../../assets/css/common.css");
|
.selector-wrap {
|
margin-top: 5px;
|
margin-bottom: 10px;
|
padding: 0 30px;
|
text-align: right;
|
width: 100vw;
|
/deep/input {
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
line-height: 32px;
|
::placeholder {
|
font-size: 12px;
|
}
|
color: rgba(255, 255, 255, 0.8) !important;
|
}
|
/deep/.el-icon-arrow-up:before {
|
content: "\e78f";
|
color: #56afe9;
|
}
|
/deep/.el-form-item__label {
|
color: #fff;
|
}
|
/deep/.el-icon-date::before {
|
content: "" !important;
|
}
|
/deep/.el-form-item {
|
margin: 0 !important;
|
}
|
}
|
.item-wrap {
|
/deep/.dv-border-box-8 {
|
.border-box-content{
|
display: flex;
|
align-items: center;
|
}
|
}
|
padding: 0 30px;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-content: space-between;
|
width: 100vw;
|
height: calc(100vh - 265px);
|
flex-wrap: wrap;
|
.item {
|
width: 31vw;
|
/*height: calc((100vh - 220px) / 2);*/
|
opacity: 0.8;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
.title {
|
height: 34px;
|
background-repeat: no-repeat;
|
line-height: 32px;
|
padding-left: 36px;
|
background-size: auto 100%;
|
font-size: 16px;
|
background-image: url("../../assets/newImg/bgtitle.png");
|
font-family: YouSheBiaoTiHeiT;
|
}
|
.content {
|
padding: 0 18px;
|
width: 100%;
|
flex: 1;
|
.driver-p-content-img{
|
width: 14vw;
|
}
|
.worktime-rank {
|
position: relative;
|
margin-bottom: 10px;
|
img {
|
width: 420px;
|
margin-top: 30px;
|
}
|
text-align: center;
|
.pre-3 {
|
position: absolute;
|
width: 80px;
|
text-align: center;
|
.unit {
|
font-family: "PingFangSC";
|
font-size: 14px;
|
margin-left: 6px;
|
}
|
.time {
|
font-size: 22px;
|
font-family: "Digital";
|
text-align: center;
|
line-height: 1;
|
}
|
.name {
|
font-size: 12px;
|
}
|
}
|
.first {
|
top: 14px;
|
margin: auto;
|
left: 0;
|
right: 0;
|
.time {
|
color: #ff6864;
|
font-size: 26px;
|
}
|
}
|
.second {
|
top: 53px;
|
left: 64px;
|
.time {
|
color: #f1ce7c;
|
}
|
}
|
.thrid {
|
top: 53px;
|
right: 64px;
|
.time {
|
color: #5af0ff;
|
}
|
}
|
}
|
.rank-bar-wrap{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
height: 19vh;
|
}
|
.rank-bar {
|
display: flex;
|
align-items: center;
|
margin: 3px 0;
|
.rank-num {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.num {
|
position: absolute;
|
font-size: 12px;
|
display: block;
|
height: 24px;
|
line-height: 26px;
|
}
|
img{
|
width: 28px;
|
}
|
}
|
.bar {
|
display: flex;
|
align-items: center;
|
width: 448px;
|
height: 24px;
|
border: 1px solid;
|
border-image: linear-gradient(270deg, #7298be, rgba(62, 95, 137, 0)) 1
|
1;
|
.bar-inner {
|
height: 4px;
|
background: linear-gradient(90deg, rgba(86, 103, 143, 0), #51648d);
|
}
|
.bar-inner-0 {
|
width: 299px;
|
background: linear-gradient(90deg, rgba(195, 113, 86, 0), #c47359);
|
}
|
.bar-inner-1 {
|
width: 259px;
|
background: linear-gradient(90deg, rgba(196, 142, 91, 0), #c38b58);
|
}
|
.bar-inner-2 {
|
background: linear-gradient(90deg, rgba(102, 120, 198, 0), #697ac6);
|
width: 239px;
|
}
|
.bar-inner-3 {
|
width: 219px;
|
}
|
.bar-inner-4 {
|
width: 199px;
|
}
|
}
|
.name {
|
margin-left: 10px;
|
width: 60px;
|
margin-right: 8px;
|
font-size: 14px;
|
}
|
.value {
|
font-family: "Digital";
|
}
|
}
|
}
|
img.driver-p-content {
|
margin-left: -20px;
|
width: 300px;
|
margin-top: 30px;
|
position: absolute;
|
bottom: 0;
|
}
|
.workdriver-wrap {
|
position: absolute;
|
left: 6.8vw;
|
bottom: 8vw;
|
width: 120px;
|
text-align: center;
|
.value {
|
font-size: 44px;
|
}
|
}
|
.sex-wrap {
|
position: absolute;
|
bottom: 9vh;
|
right: 2vw;
|
.sex-item {
|
background-image: url("../../assets/driverappraise/sex-bg.png");
|
width: 194px;
|
height: 62px;
|
background-repeat: no-repeat;
|
display: flex;
|
align-items: center;
|
background-size: 100%;
|
position: relative;
|
.border-box-content{
|
display: flex;
|
align-items: center;
|
}
|
span:first-child {
|
flex: 1;
|
text-align: center;
|
font-size: 14px;
|
}
|
span:last-child {
|
width: 65px;
|
text-align: right;
|
padding-right: 20px;
|
font-size: 18px;
|
color: #1dffff;
|
}
|
}
|
.sex-item:first-child {
|
margin-bottom: 30px;
|
}
|
}
|
|
.pie-chart {
|
width: 217px;
|
height: 217px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.total-wrap {
|
position: absolute;
|
width: 100px;
|
text-align: center;
|
}
|
}
|
|
.age-p-bar-wrap {
|
margin-left: 20px;
|
margin-top: 30px;
|
.bar-wrap {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30px;
|
}
|
.bar-label {
|
width: 80px;
|
text-align: right;
|
padding-right: 6px;
|
}
|
.bar {
|
width: 225px;
|
height: 24px;
|
// opacity: 0.1;
|
display: flex;
|
align-items: center;
|
background: linear-gradient(
|
270deg,
|
rgba(87, 180, 233, 0.11),
|
rgba(44, 125, 206, 0)
|
);
|
border-left: 2px solid #fff;
|
border-right: 2px solid #fff;
|
position: relative;
|
.inner-bar {
|
height: 4px;
|
}
|
}
|
}
|
|
.pie3d-wrap {
|
margin: auto;
|
position: relative;
|
.bg-content {
|
position: absolute;
|
background-image: url("../../assets/driverappraise/bg_3dpie.png");
|
background-repeat: no-repeat;
|
background-size: 13.5vw 18vh;
|
margin: auto;
|
top: 0;
|
bottom: -10vh;
|
left: 0;
|
right: 0;
|
width: 27vw;
|
height: 30vh;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-position-y: 6.4vh;
|
background-position-x: 6.8vw;
|
flex-direction: column;
|
z-index: -1;
|
animation: scale 2s linear infinite;
|
}
|
}
|
}
|
}
|
.digital {
|
font-family: "Digital";
|
}
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
.bar-end {
|
width: 4px;
|
height: 13px;
|
background: #ffffff;
|
box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.3);
|
margin-right: 12px;
|
}
|
.more {
|
color: #ffffff;
|
float: right;
|
margin-right: 3vw;
|
}
|
</style>
|
