apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#14196，kpi页面

Browse Source
This commit is contained in:
zhouxueli
2024-06-29 15:29:30 +08:00
parent b6951292a9
commit b300809698
11 changed files with 983 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
src/views/kpi/kpiIndex.vue Normal file
View File

@ -0,0 +1,546 @@
<template>
<div class="wrap">
<div class="headWrap">
<div class="title">KPI.数据看板</div>
<div class="titleName">4月-我是服务商名称</div>
</div>
<van-tabs v-model="active" sticky >
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name">
</van-tab>
</van-tabs>
<div class="contentWrap" v-if="active===0">
<div class="reciceOrder">
<div class="title">接单指标</div>
<div class="reciceOrderIWrap">
<div class="left common">
<div class="num">116</div>
<div class="itemTitle">承接案件量</div>
</div>
<div class="center common">
<div class="num">35%</div>
<div class="itemTitle">拒单率 <img src="@/assets/arrow_rht.png" class="img"/></div>
</div>
<div class="right common">
<div class="num">35%</div>
<div class="itemTitle">超时率 <img src="@/assets/arrow_rht.png" class="img"/></div>
</div>
</div>
</div>
<div class="reciceOrder evaluate">
<div class="title">客户评价</div>
<div class="reciceOrderIWrap">
<circle-char :data="1.28" :title-text="'投诉率'" :bg-color="'#9485ED'" :is-store="false"></circle-char>
<circle-char :data="98.9" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
<circle-char :data="56" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
</div>
</div>
<div class="reciceOrder appUse">
<div class="title">APP使用</div>
<div class="reciceOrderIWrap">
<circle-char :data="1.28" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false"></circle-char>
<circle-char :data="9.9" :title-text="'联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
<circle-char :data="65.89" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
</div>
</div>
<div class="reciceOrder ageing">
<div class="title">时效</div>
<div class="reciceOrderIWrap">
<div class="left common">
<div class="num">0:02:24</div>
<div class="itemTitle">接单时效(分)</div>
</div>
<div class="line"></div>
<div class="center common">
<div class="num">0:02:24</div>
<div class="itemTitle">集合成功到达时效</div>
</div>
<div class="line"></div>
<div class="right common">
<div class="num">0:02:24</div>
<div class="itemTitle">到达时效</div>
</div>
</div>
</div>
<div class="reciceOrder store">
<div class="title">综合打分</div>
<div class="storeWrap">
<circle-char :data="98" :bg-color="'#00D273'" :is-store="true"></circle-char>
</div>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap active2" v-if="active===1">
<div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div>
<div v-if="activeIndex===0">
<div class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
<div class="tableWrap" id="tableWrap">
<table>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>本月</th>
</tr>
</thead>
<tbody>
<tr>
<td>派遣</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>承接</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>完成</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>拒单</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
</tr>
<tr>
<td>超时</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
</tr>
<tr>
<td>取消率</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap monthTotal" v-if="active===2">
<div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div>
<div >
<!-- <div class="leftMonth">
<div class="leftItem" v-for="(item,i) in leftList" :key="i">{{item}}</div>
</div>-->
<div class=" rightData">
<common-table :table-data="tableData"></common-table>
</div>
<div style="padding: 30px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
// getStatisticsKpiByMonth
import {getKpiDetailsData,getDriverStatisticsKpi} from "@/api/kpi.js"
import {myMixins} from "@/utils/myMixins"
import CircleChar from "@/views/kpi/components/circleChar.vue";
import CommonTable from "@/views/kpi/components/common-table.vue";
export default {
name: "kpiIndex",
components: { CircleChar,CommonTable },
computed: {},
mixins: [myMixins],
data() {
return {
active: 1,
activeIndex: 0,
tabArr: [
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
],
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
tableData:[
{ label:'日',prop: 'date',date:'1'},
{ label:'派遣案件量',prop: 'date',date:'2'},
{ label:'派遣案件量',prop: 'date',date:'3'},
{ label:'派遣案件量',prop: 'date',date:'4'},
{ label:'派遣案件量',prop: 'date',date:'5'},
{ label:'派遣案件量',prop: 'date',date:'6'},
{ label:'派遣案件量',prop: 'date',date:'7'},
{ label:'派遣案件量',prop: 'date',date:'8'},
{ label:'派遣案件量',prop: 'date',date:'9'},
{ label:'派遣案件量',prop: 'date',date:'10'},
],
startTime:'',
endTime:'',
dateArr:[],
dateKeyArr:[],
xAxisArr:[]
}
},
async mounted() {
if(this.active===1 && this.activeIndex===0){
this.$nextTick(()=>{
this.drawLine()
})
}
await this.getDateArr();
// await this.getData();
},
created() {
},
async activated() {
},
methods: {
// 初始化获取当月日期
initDate() {
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01'
this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()
},
// 获取当月天数
getDayLen() {
let date;
let year;
let month;
let d;
date = new Date();
year = date.getFullYear();
month = date.getMonth()+1;
d = new Date(year, month, 0);
return d.getDate();
},
// 获取时间区间的数组
async getDateArr() {
await this.initDate()
/*this.dateArr = [];
this.dateKeyArr = [];*/
this.xAxisArr = [];
let startTime = new Date(this.startTime).getTime();
let endTime = new Date(this.endTime).getTime();
let i = 0;
let tempTime;
do {
tempTime = startTime + i * (24*3600*1000);
// this.dateArr.push(dayjs(tempTime).format('YYYY-MM-DD'));
this.xAxisArr.push(dayjs(tempTime).format('DD'));
// this.dateKeyArr.push(dayjs(tempTime).format('YYYY-MM-DD 00:00:00'));
i++;
// console.log(" this.dateArr", this.dateArr)
// console.log(" this.dateKeyArr", this.dateKeyArr)
} while ( tempTime < endTime)
// console.log(" this.xAxisArr", this.xAxisArr)
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('chartWrap'))
let option;
option = {
title: {
text: '接单情况',
left: 10,
textStyle: {
fontSize: 15
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '本月']
},
/* yAxis: [{
name: '工时(小时)',
type: 'value'
},{
name: '通话(小时)',
type: 'value'
}],*/
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false
},
series: [
{
name: '派遣案件量',
type: 'line',
smooth: true,
// prettier-ignore
// 折线的数据
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
// 柱形图数据
data: [
[
{
name: 'zhouzhou ',
xAxis: '1月'
},
{
xAxis: '2月'
}
],
[
{
name: 'Evening Peak',
xAxis: '4月'
},
{
xAxis: '本月'
}
]
]
}
},
]
};
option && myChart.setOption(option, true);
},
async getData(){
let res=await getDriverStatisticsKpi({
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
statisticsType:1
});
console.log("res",res)
/* let res=await getStatisticsKpiByMonth({
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
statisticsType:1
});
console.log("res",res)*/
let res1=await getKpiDetailsData({
monthDate:'2024-06',
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
searchType:1,
pageNum:1,
pageSize:10
});
console.log("res1",res1)
},
changeTab(index) {
this.activeIndex = index
if(this.active===1 && this.activeIndex===0){
this.$nextTick(()=>{
this.drawLine()
})
}
},
},
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px 10px;
text-align: center;
}
th{
background-color: #f2f2f2;
}
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
.wrap{
@include wh(100%,100%);
}
.headWrap{
@include wh(100%,100px);
background: #3E62B9;
//background: radial-gradient( 235% 49% at 50% 50%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%);
opacity: 0.88;
@include flexTwoCenter;
flex-direction: column;
.title{
font-family: YouSheBiaoTiHei;
font-size: 35px;
color: #FFFFFF;
}
.titleName{
font-family: PingFangSC, PingFang SC;
@include fontWeightSize(14px,500);
color: #BDDAFF;
}
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete{
background: #5D7FD7;
padding: 0;
height: 36px;
}
::v-deep .van-tab--active{
background: #FFFFFF;
border-radius: 7px 7px 0px 0px;
@include sizeWeightCol(13px,500,#5D7FD7 !important);
}
::v-deep .van-tabs__line{
display: none;
}
::v-deep .van-tab{
border-right: 1px solid #6B97D0;
@include sizeWeightCol(13px,500,#ACC1DB);
}
::v-deep .van-col{
padding: 6px 10px;
background: #E5E6EB;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;;
}
.contentWrap{
@include wh(100%,calc(100% - 140px));
overflow-y: auto;
background: #EFF2F8;
.reciceOrder{
@include whBg(100%,146px,#FFFFFF);
@include sizing4Padding(19px,25px,38px,19px);
margin-bottom: 10px;
.storeWrap{
width: 100%;
text-align: center;
}
.title{
@include sizeWeightCol(14px,bold,#040415);
margin-bottom: 14px;
}
.reciceOrderIWrap{
@include flexColAround;
.common{
@include flexColCen;
}
}
.num{
@include sizeWeightCol(24px,bold,#040415);
margin-bottom: 10px;
}
.itemTitle{
@include flexCenter;
font-size: 12px;
color: rgba(4, 4, 21,0.45);
}
.img{
@include whMarLe(8px,10px,4px);
}
.line{
border-right: 2px solid #EAE9EC;
}
}
.evaluate,.appUse,.store{
height: 179px;
.title{
margin-bottom: 0 !important;
}
}
.ageing{
height: 146px;
}
}
.active2{
background: #FFFFFF;
td:first-child {
padding: 0px !important;
}
tr:nth-child(odd) td:first-child{
font-weight: bold;
}
tr:nth-child(even) td:first-child {
background-color: #f2f2f2; /* 偶数行第一个单元格为白色 */
font-weight: bold;
}
}
.tabWrap{
@include wh(100%,22px);
@include flexColAround;
margin: 10px 0;
div{
padding: 2px 8px;
border-radius: 7px;
font-size: 12px;
@include bgFontColor(#3E3C3C,#F4F4F4);
}
.active {
position: relative;
opacity: 1;
@include bgFontColor(#ffffff,#F1B289);
}
.active:after {
content: '';
display: block;
@include wh(18px,2px);
background: #FFFFFF;
position: absolute;
margin-top: 3px;
left: 50%;
opacity: 1;
transform: translateX(-50%);
width: 0;
height: 0;
border: 4px solid;
border-color: #F1B289 transparent transparent transparent;
}
}
.tableWrap{
padding: 0 10px;
}
.monthTotal{
background: #FFFFFF;
padding-left: 6px;
.leftMonth{
.leftItem{
font-weight: bold;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
text-align: center;
padding: 8px 10px;
}
.leftItem:nth-child(odd){
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: #f2f2f2; /* 奇数*/
}
}
.content {
flex-grow: 1; /* 占据剩余空间 */
overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
}
}
</style>