Skip to content

I
inspect_report
Commit 5577c600 authored by zhengjinlei's avatar zhengjinlei
Browse files
Options

质检数据统计第二版

parent f5d45e3d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 704 additions and 236 deletions
src/inspect_report/api/tasksapi.py
View file @ 5577c600
This diff is collapsed.
src/inspect_report/templates/inspect/group.html 0 → 100644
View file @ 5577c600
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset='utf-8' />
<title>组长概览</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="{% static "inspect/css/element.css" %}">
<!-- 引入组件库 -->
<link rel='stylesheet' type='text/css' href="{% static "inspect/css/all.css" %}">
<style>
#OneTime{
display: inline-block;
}
#OneTime .el-input__icon {
line-height: 32px;
}
#OneTime .el-input .el-input__inner {
padding-left: 30px;
}
.groutTitle span{
display:inline-block;
margin-right: 20px;
color:#565656;
font-size:15px;
}
</style>
</head>
<body style='height:100%'>
<div class='child-title'>组长概览</div>
<div class='child-main' id='childApp'>
<div style='text-align:right;' class='childTitle'>
<div class='childTitleName'>违规项分析</div>
<div id='OneTime'>
<el-date-picker
v-model="dateTime"
@change='changeRange'
value-format='yyyy-MM-dd'
clearable='false'
type="date"
>
</el-date-picker>
</div>
<!--
<el-select v-model="taskvalue" filterable placeholder="请选择" @change="changeTask">
<el-option
v-for="item in taskList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="takevalue" filterable placeholder="请选择" @change='changeTake'>
<el-option
label="全部坐席"
value="">
</el-option>
<el-option
v-for="item in takeList"
:key="item.agentName"
:label="item.agentName"
:value="item.agentName">
</el-option>
</el-select>
-->
</div>
<div style='margin-top:10px;padding-left:30px;' class='groutTitle'>
<span>质检完成会话数： <span v-html='titleInfo.total_session'></span></span>
<span>违规会话数： <span v-html='titleInfo.validate_session'></span></span>
<span>占比：<span v-html='titleInfo.ratio * 100 + "%"'></span></span>
</div>
<div id='main' style='width:80%;height:600px' v-loading='true'></div>
</div>
<script type="text/javascript">
window.onload = function(){
};
</script>
<script src="{% static "inspect/js/vue.min.js" %}"></script>
<script src="{% static "inspect/js/element.js" %}"></script>
<script src="{% static "inspect/js/echarts.js" %}"></script>
<script src="{% static "inspect/js/http.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/groupOverview.js" %}"></script>
</body>
</html>
src/inspect_report/templates/inspect/seat.html
View file @ 5577c600
......@@ -9,11 +9,11 @@
<!-- 引入组件库 -->
<link rel='stylesheet' type='text/css' href="{% static "inspect/css/all.css" %}">
</head>
<body style='height:100%;min-width:1000px'>
<body style='height:100%'>
<div class='child-title'>语音坐席</div>
<div class='child-main' id='childApp'>
<div style='text-align:right;margin-bottom:30px;' class='childTitle'>
<div class='childTitleName'>违规坐席分析</div>
<div style='text-align:right;' class='childTitle'>
<div class='childTitleName'>违规项分析</div>
<el-date-picker
v-model="dateRange"
@change='changeRange'
......@@ -24,7 +24,7 @@
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
<el-select filterable v-model="taskvalue" placeholder="请选择" @change="changeTask">
<el-select v-model="taskvalue" filterable placeholder="请选择" @change="changeTask">
<el-option
v-for="item in taskList"
:key="item.id"
......@@ -32,23 +32,66 @@
:value="item.id">
</el-option>
</el-select>
<el-select v-model="takevalue" filterable placeholder="请选择" @change='changeTake'>
<el-option
label="全部坐席"
value="">
</el-option>
<el-option
v-for="item in takeList"
:key="item.agentName"
:label="item.agentName"
:value="item.agentName">
</el-option>
</el-select>
</div>
<div class='childStatistics'>
<div>
<div id='main' v-loading='true' style='height:600px;display:inline-block;'></div>
</div>
<div>
<div id='mainTwo' v-loading='true' style='height:600px;display:inline-block;'></div>
</div>
<div id='main' style='margin-top:20px'>
<el-table
:data="tableData"
border
height="600"
style="width: 100%">
<el-table-column
prop="agentName"
label="坐席"
width="180"
>
</el-table-column>
<el-table-column
prop="total_session"
label="全部会话数"
width="180"
>
</el-table-column>
<el-table-column
prop="validate_session"
label="违规会话数">
</el-table-column>
<el-table-column
prop="ratio"
label="违规占比">
{# <template slot-scope="scope">#}
{# {{scope}}%#}
{# </template>#}
</el-table-column>
<el-table-column
prop="ranking"
sortable
label="排名">
</el-table-column>
</el-table>
</div>
</div>
<script src="{% static "inspect/js/vue.min.js" %}"></script>
<script src="{% static "inspect/js/element.js" %}"></script>
<script src="{% static "inspect/js/echarts.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/http.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/violator.js" %}"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
window.onload = function(){
};
</script>
<script src="{% static "inspect/js/vue.min.js" %}"></script>
<script src="{% static "inspect/js/element.js" %}"></script>
<script src="{% static "inspect/js/echarts.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/http.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/violator.js" %}"></script>
</body>
</body>
</html>
src/inspect_report/urls.py
View file @ 5577c600
......@@ -15,10 +15,11 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path
from .api.tasksapi import rule, seat
from .api.tasksapi import rule, seat, group
urlpatterns = [
# path('admin/', admin.site.urls),
path('inspect/rule/', rule),
path('inspect/seat/', seat),
path('inspect/group/', group),
]
static/inspect/css/all.css
View file @ 5577c600
......@@ -116,4 +116,4 @@ body{
}
.childStatistics > div > div{
width: 500px;
}
}
\ No newline at end of file
static/inspect/js/all.js
View file @ 5577c600
......@@ -33,15 +33,36 @@ new Vue({
},
getTask(){
let that = this;
RquestsGet('api/v1/tasks/obtain/').then(data => {
//console.log(data);
if(data.code != 0){
that.taskList = [{id:'',name:'全部任务'}];
}else{
that.taskList = [{id:'',name:'全部任务'}].concat(data.data);
that.getTake()
}
})
that.taskList = [
{id:'',name:'全省'},
{id:'合肥',name:'合肥'},
{id:'芜湖',name:'芜湖'},
{id:'蚌埠',name:'蚌埠'},
{id:'淮南',name:'淮南'},
{id:'马鞍山',name:'马鞍山'},
{id:'淮北',name:'淮北'},
{id:'铜陵',name:'铜陵'},
{id:'安庆',name:'安庆'},
{id:'黄山',name:'黄山'},
{id:'滁州',name:'滁州'},
{id:'阜阳',name:'阜阳'},
{id:'毫州',name:'毫州'},
{id:'宿州',name:'宿州'},
{id:'六安',name:'六安'},
{id:'宣城',name:'宣城'},
{id:'巢湖',name:'巢湖'},
{id:'池州',name:'池州'},
{id:'安徽省营业部',name:'安徽省营业部'},
];
//RquestsGet('api/v1/tasks/obtain/').then(data => {
// //console.log(data);
// if(data.code != 0){
// that.taskList = [{id:'',name:'全部任务'}];
// }else{
// that.taskList = [{id:'',name:'全部任务'}].concat(data.data);
// that.getTake()
// }
//})
},
getTake(){
let that = this;
......@@ -56,10 +77,16 @@ new Vue({
})
},
Charts(msg){
let msgLen = msg.length;
let msgLen = msg.length;
let msgArr = [];
for(let key in msg){
console.log(key) ;
console.log(msg[key]) ;
msgArr.unshift([msg[key].rule, msg[key].count])
}
let sourceArr = [
[ 'product', 'amount'],
].concat(msg);
].concat(msgArr);
var option = {
dataZoom : [
{
......@@ -184,8 +211,8 @@ new Vue({
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
},
init(){
this.dateRange = [new Date(new Date()-24*60*60*1000*30), new Date()];
this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000*30));
this.dateRange = [new Date(new Date()-24*60*60*1000), new Date()];
this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000));
this.end_date = this.dateFormat(new Date());
this.getTask(); // 获取任务
//this.getTake(); // 获取坐席
......
static/inspect/js/groupOverview.js 0 → 100644
View file @ 5577c600
new Vue({
el: '#childApp',
data:function(){
return {
ss:'sas',
dateTime: '',
taskList:[],
taskvalue: '',
start_date: '',
end_date:'',
takeList:[],
takevalue: '',
titleInfo: {
"total_session": 0,
"validate_session": 0,
"ratio": 0,
},
loading: true,
}
},
methods: {
changeRange(dateTime){
console.log(dateTime);
this.start_date = dateTime;
this.getRule(this.taskvalue,this.start_date,this.takevalue); // 获取统计数据
},
changeTask(msg){
console.log(msg);
this.taskvalue = msg;
this.getTake()
this.getRule(this.taskvalue,this.start_date,this.takevalue); // 获取统计数据
},
changeTake(msg){
this.takevalue = msg;
this.getRule(this.taskvalue,this.start_date,this.takevalue); // 获取统计数据
console.log(msg);
},
getTask(){
let that = this;
that.taskList = [
{id:'',name:'全省'},
{id:'合肥',name:'合肥'},
{id:'芜湖',name:'芜湖'},
{id:'蚌埠',name:'蚌埠'},
{id:'淮南',name:'淮南'},
{id:'马鞍山',name:'马鞍山'},
{id:'淮北',name:'淮北'},
{id:'铜陵',name:'铜陵'},
{id:'安庆',name:'安庆'},
{id:'黄山',name:'黄山'},
{id:'滁州',name:'滁州'},
{id:'阜阳',name:'阜阳'},
{id:'毫州',name:'毫州'},
{id:'宿州',name:'宿州'},
{id:'六安',name:'六安'},
{id:'宣城',name:'宣城'},
{id:'巢湖',name:'巢湖'},
{id:'池州',name:'池州'},
{id:'安徽省营业部',name:'安徽省营业部'},
];
//RquestsGet('api/v1/tasks/obtain/').then(data => {
// //console.log(data);
// if(data.code != 0){
// that.taskList = [{id:'',name:'全部任务'}];
// }else{
// that.taskList = [{id:'',name:'全部任务'}].concat(data.data);
// that.getTake()
// }
//})
},
getTake(){
let that = this;
RquestsGet('api/v1/tasks/seat/?task=' + that.taskvalue).then(data => {
//console.log(data);
if(data.code != 0){
//that.takeList = [{agentName:'全部坐席'}]
}else{
that.takeList = data.data;
}
})
},
Charts(msg){
console.log(msg);
let msgLen = msg.length;
let xAxisArr = [];
let seriesArr = [];
for(let key in msg){
console.log(key);
xAxisArr.unshift(msg[key].date);
seriesArr.unshift(msg[key].ratio * 100);
}
let option = {
tooltip: {
trigger: 'axis',
//formatter: '违规率：<br />{c}%'
formatter: '违规率：{c}%'
},
xAxis: {
type: 'category',
//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: xAxisArr
},
yAxis: {
//name: 'amount',
max:'100',
type: 'value',
axisLabel:{
formatter: '{value}%'
}
},
series: [{
//data: [820, 932, 901, 934, 1290, 1330, 1320],
name:'违规率',
data: seriesArr,
type: 'line',
smooth: true,
itemStyle:{
normal:{
color: '#fccb04'
},
emphasis:{
color: '#f7d139'
}
},
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
if(msg.length == 0){
myChart.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 0.8)',
});
}else{
myChart.hideLoading();
}
window.onresize = function(){
myChart.resize();
}
},
getRule(task,end_date,agentName){
let that = this;
let start_date = this.dateFormat(new Date(new Date(end_date).getTime() - 6*24*60*60*1000));
console.log(start_date,end_date);
let arr = [];
this.$loading({text:'数据加载中...'});
RquestsPost('api/v1/tasks/static_date/',{task,end_date,start_date,agentName}).then(data => {
console.log(data.data);
if(data.code != 0){
that.$message(data.msg);
if(data.msg){
that.$message(data.msg);
}else{
that.$message('服务器错误')
}
}
if(!data.data){
this.$loading().close();
return false;
}
//for(let key in data.data){
// arr.unshift([data.data[key],key])
//}
that.Charts(data.data);
this.$loading().close();
})
RquestsPost('api/v1/tasks/static/',{task,end_date,start_date,agentName}).then(data => {
console.log(data.data);
if(data.code != 0){
that.$message(data.msg);
if(data.msg){
that.$message(data.msg);
}else{
that.$message('服务器错误')
}
}
if(!data.data){
this.$loading().close();
return false;
}
that.titleInfo = data.data;
this.$loading().close();
})
},
dateFormat(date){
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
},
init(){
this.dateTime = new Date(new Date()-24*60*60*1000);
this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000));
this.getTask(); // 获取任务
//this.getTake(); // 获取坐席
this.getRule(this.taskvalue,this.start_date,this.takevalue); // 获取统计数据
}
},
created(){
this.init()
},
})
static/inspect/js/http.js
View file @ 5577c600
let window_url = "http://127.0.0.1:8099/";
// let window_url = "http://127.0.0.1:8099/";
let window_url = window.location.protocol + "//" + window.location.host + "/";
function RquestsGet(url){
let uri = window_url + url;
......
static/inspect/js/violator.js
View file @ 5577c600
......@@ -8,33 +8,10 @@ new Vue({
taskvalue: '',
start_date: '',
end_date:'',
loading: true,
Series:[
{
type: 'bar',
barWidth: 20,
barCategoryGap: "20%",
label:{
normal: {
position: 'right',
show: true,
color: '#000'
}
},
itemStyle:{
normal:{
color: '#fccb04'
},
emphasis:{
color: '#f7d139'
}
},
encode: {
x: 'amount',
y: 'product'
}
}
]
takeList:[],
takevalue: '',
loading: true,
tableData: []
}
},
methods: {
......@@ -42,154 +19,103 @@ new Vue({
console.log(dateRange);
this.start_date = dateRange[0];
this.end_date = dateRange[1];
this.getStatistics(this.taskvalue,this.start_date,this.end_date); // 获取统计数据
this.getRule(this.taskvalue,this.start_date,this.end_date,this.takevalue); // 获取统计数据
},
changeTask(msg){
console.log(msg);
this.taskvalue = msg;
this.getStatistics(this.taskvalue,this.start_date,this.end_date); // 获取统计数据
this.getTake()
this.getRule(this.taskvalue,this.start_date,this.end_date,this.takevalue); // 获取统计数据
},
changeTake(msg){
this.takevalue = msg;
this.getRule(this.taskvalue,this.start_date,this.end_date,this.takevalue); // 获取统计数据
console.log(msg);
},
getTask(){
let that = this;
RquestsGet('api/v1/tasks/obtain/').then(data => {
that.taskList = [
{id:'',name:'全省'},
{id:'合肥',name:'合肥'},
{id:'芜湖',name:'芜湖'},
{id:'蚌埠',name:'蚌埠'},
{id:'淮南',name:'淮南'},
{id:'马鞍山',name:'马鞍山'},
{id:'淮北',name:'淮北'},
{id:'铜陵',name:'铜陵'},
{id:'安庆',name:'安庆'},
{id:'黄山',name:'黄山'},
{id:'滁州',name:'滁州'},
{id:'阜阳',name:'阜阳'},
{id:'毫州',name:'毫州'},
{id:'宿州',name:'宿州'},
{id:'六安',name:'六安'},
{id:'宣城',name:'宣城'},
{id:'巢湖',name:'巢湖'},
{id:'池州',name:'池州'},
{id:'安徽省营业部',name:'安徽省营业部'},
];
//RquestsGet('api/v1/tasks/obtain/').then(data => {
// //console.log(data);
// if(data.code != 0){
// that.taskList = [{id:'',name:'全部任务'}];
// }else{
// that.taskList = [{id:'',name:'全部任务'}].concat(data.data);
// that.getTake()
// }
//})
},
getTake(){
let that = this;
RquestsGet('api/v1/tasks/seat/?task=' + that.taskvalue).then(data => {
//console.log(data);
if(data.code != 0){
that.taskList = [{id:'',name:'全部任务'}];
//that.takeList = [{agentName:'全部坐席'}]
}else{
that.taskList = [{id:'',name:'全部任务'}].concat(data.data);
that.takeList = data.data;
}
})
},
ChartsOne(msg){
let sourceArr = [
[ 'amount', 'product'],
].concat(msg);
let option = {
title:{
text:'坐席得分统计',
x: '50%',
textAlign: 'center'
},
dataset: {
source: sourceArr
},
grid: {containLabel: true},
xAxis: {name: 'amount',max:'100'},
yAxis: {type: 'category',boundaryGap:'20%'},
series: this.Series
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
if(msg.length == 0){
myChart.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 0.8)',
}
);
}else{
myChart.hideLoading();
}
window.onresize = function(){
myChart.resize();
}
},
ChartsTwo(msg){
let sourceArr = [
[ 'amount', 'product'],
].concat(msg);
var optionTwo = {
title:{
text:'违规话数统计',
x: '50%',
textAlign: 'center'
},
dataset: {
source: sourceArr
},
grid: {containLabel: true},
xAxis: {name: 'amount'},
yAxis: {type: 'category',boundaryGap:'20%'},
series: this.Series
};
var myChartTwo = echarts.init(document.getElementById('mainTwo'));
myChartTwo.setOption(optionTwo);
if(msg.length == 0){
myChartTwo.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 0.8)',
}
);
}else{
myChartTwo.hideLoading();
}
window.onresize = function(){
myChartTwo.resize();
}
},
getStatistics(task,start_date,end_date){
getRule(task,start_date,end_date,agentName){
let that = this;
this.$loading({text:'数据加载中...'});
RquestsPost('api/v1/tasks/seat_score/',{task,start_date,end_date}).then(data => {
let arr = [];
//this.$loading({text:'数据加载中...'});
RquestsPost('api/v1/tasks/seat_rule/',{task,start_date,end_date,agentName}).then(data => {
console.log(data.data);
let arr = [];
if(data.code != 0){
that.$message(data.msg);
if(data.msg){
that.$message(data.msg);
}else{
that.$message('服务器错误')
}
}
if(!data.data){
this.$loading().close();
return false;
}
for(let key in data.data){
arr.push([data.data[key],key])
}
console.log(arr);
that.ChartsOne(arr);
});
RquestsPost('api/v1/tasks/seat_session/',{task,start_date,end_date}).then(data => {
console.log(data.data);
let arr = [];
if(data.code != 0){
if(data.msg){
that.$message(data.msg);
}else{
that.$message('服务器错误')
}
}
}
this.tableData = data.data;
if(!data.data){
this.$loading().close();
return false;
}
for(let key in data.data){
arr.push([data.data[key],key])
};
console.log(arr);
that.ChartsTwo(arr);
//for(let key in data.data){
// arr.unshift([data.data[key],key])
//}
this.$loading().close();
});
})
},
dateFormat(date){
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
},
init(){
this.dateRange = [new Date(new Date()-24*60*60*1000*30), new Date()];
this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000*30));
this.dateRange = [new Date(new Date()-24*60*60*1000), new Date()];
this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000));
this.end_date = this.dateFormat(new Date());
this.getTask(); // 获取任务
let that = this;
//this.getTake(); // 获取坐席
console.log(this.dateRange);
this.getStatistics(this.taskvalue,this.start_date,this.end_date); // 获取统计数据
this.getRule(this.taskvalue,this.start_date,this.end_date,this.takevalue); // 获取统计数据
}
},
......@@ -197,4 +123,4 @@ new Vue({
this.init()
},
})
\ No newline at end of file
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment