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

38
src/api/kpi.js Normal file
View File

@ -0,0 +1,38 @@
import request from '@/utils/http'
// 首页服务商接口
export function getStatisticsKpiByMonth(data){
return request({
url: '/supplier/supplierKPI/querySupplierStatisticsKpiByMonth',
method:'POST',
contentType: 'application/json',
data
})
}
//服务商kpi
export function getStatisticsKpi(data){
return request({
url: '/supplier/supplierKPI/querySupplierStatisticsKpi',
method:'POST',
contentType: 'application/json',
data
})
}
// 司机Kpi
export function getDriverStatisticsKpi(data){
return request({
url: '/supplier/supplierKPI/querySupplierDriverStatisticsKpi',
method:'POST',
contentType: 'application/json',
data
})
}
// 各种详情数据
export function getKpiDetailsData(data){
return request({
url: '/supplier/supplierKPI/querySupplierKpiDetailsData',
method:'POST',
contentType: 'application/json',
data
})
}

5
src/main.js
View File

@ -2,12 +2,17 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'vant/lib/index.css';
import "lib-flexible/flexible";
import "@/utils/rem.js"
import store from './store'
Vue.config.productionTip = false
Vue.use(Vant);
Vue.use(ElementUI);
new Vue({
store,
router,

3
src/router/index.js
View File

@ -1,7 +1,7 @@
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import kpiRouter from './kpi-router'
const routes = [
{
path: '/',
@ -199,6 +199,7 @@ const routes = [
title:'维保申请'
}
},
...kpiRouter,
]
const router = new VueRouter({

11
src/router/kpi-router.js Normal file
View File

@ -0,0 +1,11 @@
const kpiRouter = [
{
path: '/kpiIndex',
name: 'kpiIndex',
component: () => import('@/views/kpi/kpiIndex'),
meta:{
title: 'kpi首页',
}
},
]
export default kpiRouter

17
src/styles/mixin.scss
View File

@ -2,6 +2,11 @@
font-size: $size;
font-weight: $weight;
}
@mixin sizeWeightCol($size,$weight,$col){
font-size: $size;
font-weight: $weight;
color: $col;
}
@mixin bgFontColor($color,$bgcolor){
color:$color;
background: $bgcolor;
@ -23,6 +28,14 @@
width: $w;
height: $h;
}
@mixin whMarLe($w,$h,$l){
@include wh($w,$h);
margin-left: $l;
}
@mixin whBg($w,$h,$bg){
@include wh($w,$h);
background: $bg;
}
@mixin flexColumn{
display: flex;
flex-direction: column;
@ -35,6 +48,10 @@
@include flexColumn;
justify-content: space-around;
}
@mixin flexColCen(){
@include flexColumn;
align-items: center;
}
@mixin flexColBet(){
display: flex;
justify-content: space-between;

98
src/views/kpi/components/circleChar.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div class="wrap">
<div id="supplierScore" ref="supplierScore" style="width: 100%;height: 125px" @click="handle"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "circleChar",
props:['data','bgColor','titleText','isStore'],
data(){
return{
}
},
mounted() {
this.drawHandle();
},
methods:{
handle(){
if(this.titleText == '投诉率'){
console.log(this.titleText)
}else if(this.titleText == '使用率'){
console.log(this.titleText)
}
},
// 绘制 总分图表
drawHandle() {
let supplierScoreChart = echarts.init(this.$refs.supplierScore)
let option;
let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
const gaugeData = [
{
value: this.data,
name: this.isStore ? '' : this.titleText+arrow,
title: {
offsetCenter: ['0%', '20%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', this.isStore ? '10%' : '-25%']
}
}
];
option = {
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
// width:6,
itemStyle:{
color:this.bgColor
}
},
/* axisLine: {
lineStyle: {
width:12,
}
},*/
splitLine: { show: false},
axisTick: { show: false},
axisLabel: {show: false},
data: gaugeData,
title: {
fontSize: 11,
color:'rgba(4, 4, 21,0.45)'
},
detail: {
color:this.isStore ? this.bgColor : '#040415',
fontSize: this.isStore ? 43 :19,
formatter: this.isStore ? '{value}' : '{value}%'
}
}
]
};
// 绘制图表
option && supplierScoreChart.setOption(option, true);
},
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
@include flexCenter;
}
.img{
@include whMarLe(12px,10px,4px);
}
</style>

45
src/views/kpi/components/common-table.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div class="wrap">
<el-table :data="tableData"
stripe
border
style="width: 100%"
class="custom-table">
<el-table-column
v-for="(column,i) in tableData"
:key="i"
:prop="column.prop"
:label="column.label"
:fixed="i===0"
:width="i===0 ? '40' :'80'"
align="center"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "commonTable",
props: ['tableData'],
data() {
return {}
},
mounted() {
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
::v-deep .el-table thead{
font-size: 11px;
color: #1D2129;
font-weight: bold;
}
::v-deep .el-table th.el-table__cell.is-leaf {
background-color: #E5E6EB;
}
</style>

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>