411 lines
8.7 KiB
Vue
411 lines
8.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<statusNav navBarTitle="维保统计" returnColor="#c2c2c2"></statusNav>
|
|
<container-subgroup-two>
|
|
<view slot="content" style="margin: 0 -30rpx;">
|
|
<view class="faultStatistics-nav">
|
|
<view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''"
|
|
v-for="(item,index) in navlist">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="settlement-type">
|
|
<view class="settlement-type-title">结算类型</view>
|
|
<view class="settlement-type-content">
|
|
<view class="li liB">
|
|
<view class="text">{{settlementType[0].title}}</view>
|
|
<view class="num">{{settlementType[0].num}}</view>
|
|
</view>
|
|
|
|
<view class="li liC">
|
|
<view class="text">{{settlementType[2].title}}</view>
|
|
<view class="num">{{settlementType[2].num}}</view>
|
|
</view>
|
|
<view class="li liD">
|
|
<view class="text">{{settlementType[1].title}}</view>
|
|
<view class="num">{{settlementType[1].num}}</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="text">{{settlementType[3].title}}</view>
|
|
<view class="num">{{settlementType[3].num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fault-type">
|
|
<view class="settlement-type-title">维保类型</view>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="ring" :chartData="chartData" />
|
|
</view>
|
|
</view>
|
|
<view class="brand-analysis">
|
|
<view class="settlement-type-title">品牌分析</view>
|
|
<view class="brand-analysis-box">
|
|
<view class="li" v-for="(item,index) in brandAnalysis" :key="index">
|
|
<view class="serial-number">{{item.id}}</view>
|
|
<view class="brand-analysis-center">
|
|
<view class="title-box">
|
|
<view class="title">{{item.name}}</view>
|
|
<view class="cor" v-if="item.project_count">{{item.project_count}}</view>
|
|
<view class="cor1">{{item.proportion}}%</view>
|
|
</view>
|
|
<view class="percentage">
|
|
<view class="percentage-box" :class="index%2!=0 ? 'percentage-box-ber' : ''" :style="{width:getPercentage(item.proportion,100)}"></view>
|
|
</view>
|
|
</view>
|
|
<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</container-subgroup-two>
|
|
<view v-if="timeVisit">
|
|
<timeDate @chooseEv="chooseEv"></timeDate>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
|
import timeDate from '@/components/time/time-date';
|
|
import statusNav from '../../components/status-nav.vue';
|
|
export default {
|
|
components: {
|
|
statusNav,
|
|
containerSubgroupTwo,
|
|
timeDate
|
|
},
|
|
data() {
|
|
return {
|
|
navlistIndex: 0,
|
|
navlist: [{
|
|
title: "全部",
|
|
},
|
|
|
|
{
|
|
title: "按时间段",
|
|
},
|
|
{
|
|
title: "昨日",
|
|
},
|
|
{
|
|
title: "本周",
|
|
},
|
|
{
|
|
title: "本月",
|
|
},
|
|
],
|
|
// 结算类型
|
|
settlementType: [
|
|
{title:'单次收费',num:0},
|
|
{title:'验收扫尾',num:0},
|
|
{title:'质保免费',num:0},
|
|
{title:'包年签单',num:0},
|
|
],
|
|
// 维保类型
|
|
chartData: {
|
|
series: [{data: []}]
|
|
},
|
|
// 品牌分析
|
|
brandAnalysis:[],
|
|
timestr:'all',
|
|
timeVisit:false,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
// console.log(this.getPercentage(33, 66))
|
|
this.checkTJ();
|
|
},
|
|
methods: {
|
|
// 查询维保统计
|
|
checkTJ() {
|
|
this.$requst.get('/universal/api.statistics/statistics_fault',{time:this.timestr}).then(res=>{
|
|
if(res.code) {
|
|
this.settlementType = [];
|
|
// 结算类型
|
|
for (let key in res.data.settlement_type) {
|
|
let obj = {
|
|
title: key,
|
|
num: res.data.settlement_type[key],
|
|
}
|
|
this.settlementType.push(obj)
|
|
}
|
|
// 维保类型
|
|
let fault_type = [];
|
|
for (let key in res.data.fault_type) {
|
|
let obj = {
|
|
name: key,
|
|
value: parseFloat(res.data.fault_type[key]),
|
|
color: ""
|
|
|
|
}
|
|
fault_type.push(obj)
|
|
}
|
|
fault_type = fault_type.reverse();
|
|
this.chartData.series[0].data = fault_type;
|
|
this.chartData.series[0].format = "customToolTip";
|
|
this.chartData.series[0].data[0].color = '#56ddff';
|
|
this.chartData.series[0].data[1].color = '#2d8dfe';
|
|
this.chartData.series[0].data[2].color = '#7f90a4';
|
|
this.chartData.series[0].data[3].color = '#44d2c1';
|
|
this.chartData.series[0].data[4].color = '#2d8dfe';
|
|
// 品牌分析
|
|
this.brandAnalysis = res.data.brand_analyze;
|
|
}
|
|
})
|
|
},
|
|
navlistIndexFun(index) {
|
|
this.navlistIndex = index;
|
|
switch (index){
|
|
case 0:
|
|
this.timestr = 'all';
|
|
break;
|
|
case 1:
|
|
this.timeVisit = true;
|
|
// this.timestr = 'all';
|
|
break;
|
|
case 2:
|
|
this.timestr = 'yesterday';
|
|
break;
|
|
case 3:
|
|
this.timestr = 'week';
|
|
break;
|
|
case 4:
|
|
this.timestr = 'month';
|
|
break;
|
|
}
|
|
if(index!=1) {
|
|
this.checkTJ();
|
|
}
|
|
},
|
|
getPercentage(num, max) {
|
|
return Math.ceil(((num - 0) / (max - 0)) * 100) + "%"
|
|
},
|
|
// 时段改变事件
|
|
chooseEv(obj){
|
|
if(obj.num) {
|
|
this.timestr = obj.time;
|
|
this.checkTJ();
|
|
}
|
|
this.timeVisit = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
padding: 0rpx 15rpx;
|
|
}
|
|
|
|
|
|
.faultStatistics-nav {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
margin-top: 25rpx;
|
|
color: #958b8b;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.faultStatistics-nav .li {
|
|
padding: 8rpx 13rpx;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #F5F5F5;
|
|
}
|
|
|
|
.faultStatistics-nav .on {
|
|
color: #FF5400;
|
|
border: 2rpx solid #FF5400;
|
|
border-radius: 8rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.settlement-type {
|
|
width: 100%;
|
|
border-radius: 25rpx;
|
|
height: 400rpx;
|
|
margin-top: 29rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.settlement-type-title {
|
|
font-size: 32rpx;
|
|
color: #2c2c2c;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.settlement-type-title::before {
|
|
content: "";
|
|
margin-right: 22rpx;
|
|
width: 6rpx;
|
|
display: block;
|
|
height: 32rpx;
|
|
border-radius: 50rpx;
|
|
background: linear-gradient(#307ade, #08adf8)
|
|
}
|
|
|
|
.settlement-type-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.settlement-type-content .li {
|
|
width: 50%;
|
|
text-align: center;
|
|
padding-bottom: 20rpx;
|
|
padding-top: 26rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.settlement-type-content .li .text {
|
|
color: #888888;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.settlement-type-content .li .num {
|
|
color: #0ba9f8;
|
|
font-size: 46rpx;
|
|
|
|
}
|
|
|
|
.settlement-type-content .liB::after {
|
|
content: "";
|
|
width: 2rpx;
|
|
height: 88rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
right: 0rpx;
|
|
top: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liB::before {
|
|
content: "";
|
|
width: 245rpx;
|
|
height: 2rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -123rpx;
|
|
bottom: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liC::before {
|
|
content: "";
|
|
width: 245rpx;
|
|
height: 2rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -123rpx;
|
|
bottom: 0rpx;
|
|
}
|
|
|
|
.settlement-type-content .liD::before {
|
|
content: "";
|
|
width: 2rpx;
|
|
height: 88rpx;
|
|
background-color: #E5E5E5;
|
|
position: absolute;
|
|
right: 0rpx;
|
|
margin-left: -123rpx;
|
|
bottom: 10rpx;
|
|
}
|
|
|
|
.fault-type {
|
|
width: 100%;
|
|
padding: 24rpx 21rpx;
|
|
box-sizing: border-box;
|
|
height: 500rpx;
|
|
border-radius: 15rpx;
|
|
margin-top: 30rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.charts-box {
|
|
margin-top: 50rpx;
|
|
width: 100%;
|
|
height: 330rpx;
|
|
}
|
|
|
|
.brand-analysis {
|
|
padding: 24rpx 21rpx;
|
|
background-color: #FFFFFF;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
padding-bottom: 120rpx;
|
|
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.brand-analysis-box .li {
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
padding: 27rpx 0rpx;
|
|
padding-left: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.brand-analysis-box .li .serial-number {
|
|
color: #958b8b;
|
|
font-size: 28rpx;
|
|
margin-right: 34rpx;
|
|
}
|
|
|
|
.brand-analysis-center {
|
|
flex: 1;
|
|
}
|
|
|
|
.brand-analysis-center .title-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
font-size: 24rpx
|
|
}
|
|
|
|
.brand-analysis-center .title-box .title {
|
|
color: #333333;
|
|
font-size: 26rpx
|
|
}
|
|
|
|
.cor {
|
|
color: #2d8dfe;
|
|
}
|
|
|
|
.cor1 {
|
|
color: #999999;
|
|
}
|
|
|
|
.percentage {
|
|
width: 100%;
|
|
margin-top: 11rpx;
|
|
background-color: #EDEDED;
|
|
height: 20rpx;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.brand-analysis-box .icon {
|
|
width: 16rpx;
|
|
height: 31rpx;
|
|
margin-left: 37rpx;
|
|
}
|
|
|
|
.percentage-box {
|
|
height: 100%;
|
|
background-color: #2d8efd;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.percentage-box-ber {
|
|
background-color: #ffb503;
|
|
}
|
|
</style>
|