Skip to content

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

质检数据统计第二版

parent f5d45e3d
Expand all Show 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 @@ ...@@ -9,11 +9,11 @@
<!-- 引入组件库 --> <!-- 引入组件库 -->
<link rel='stylesheet' type='text/css' href="{% static "inspect/css/all.css" %}"> <link rel='stylesheet' type='text/css' href="{% static "inspect/css/all.css" %}">
</head> </head>
<body style='height:100%;min-width:1000px'> <body style='height:100%'>
<div class='child-title'>语音坐席</div> <div class='child-title'>语音坐席</div>
<div class='child-main' id='childApp'> <div class='child-main' id='childApp'>
<div style='text-align:right;margin-bottom:30px;' class='childTitle'> <div style='text-align:right;' class='childTitle'>
<div class='childTitleName'>违规坐席分析</div> <div class='childTitleName'>违规项分析</div>
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
@change='changeRange' @change='changeRange'
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
end-placeholder="结束日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"> :default-time="['00:00:00', '23:59:59']">
</el-date-picker> </el-date-picker>
<el-select filterable v-model="taskvalue" placeholder="请选择" @change="changeTask"> <el-select v-model="taskvalue" filterable placeholder="请选择" @change="changeTask">
<el-option <el-option
v-for="item in taskList" v-for="item in taskList"
:key="item.id" :key="item.id"
...@@ -32,23 +32,66 @@ ...@@ -32,23 +32,66 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </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>
<div class='childStatistics'> <div id='main' style='margin-top:20px'>
<div> <el-table
<div id='main' v-loading='true' style='height:600px;display:inline-block;'></div> :data="tableData"
</div> border
<div> height="600"
<div id='mainTwo' v-loading='true' style='height:600px;display:inline-block;'></div> style="width: 100%">
</div> <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>
</div> </div>
<script type="text/javascript">
window.onload = function(){
};
</script>
<script src="{% static "inspect/js/vue.min.js" %}"></script> <script src="{% static "inspect/js/vue.min.js" %}"></script>
<script src="{% static "inspect/js/element.js" %}"></script> <script src="{% static "inspect/js/element.js" %}"></script>
<script src="{% static "inspect/js/echarts.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/http.js" %}"></script>
<script type="text/javascript" src="{% static "inspect/js/violator.js" %}"></script> <script type="text/javascript" src="{% static "inspect/js/violator.js" %}"></script>
<script type="text/javascript">
</script>
</body> </body>
</html> </html>
src/inspect_report/urls.py
View file @ 5577c600
...@@ -15,10 +15,11 @@ Including another URLconf ...@@ -15,10 +15,11 @@ Including another URLconf
""" """
from django.contrib import admin from django.contrib import admin
from django.urls import path from django.urls import path
from .api.tasksapi import rule, seat from .api.tasksapi import rule, seat, group
urlpatterns = [ urlpatterns = [
# path('admin/', admin.site.urls), # path('admin/', admin.site.urls),
path('inspect/rule/', rule), path('inspect/rule/', rule),
path('inspect/seat/', seat), path('inspect/seat/', seat),
path('inspect/group/', group),
] ]
static/inspect/js/all.js
View file @ 5577c600
...@@ -33,15 +33,36 @@ new Vue({ ...@@ -33,15 +33,36 @@ new Vue({
}, },
getTask(){ getTask(){
let that = this; let that = this;
RquestsGet('api/v1/tasks/obtain/').then(data => { that.taskList = [
//console.log(data); {id:'',name:'全省'},
if(data.code != 0){ {id:'合肥',name:'合肥'},
that.taskList = [{id:'',name:'全部任务'}]; {id:'芜湖',name:'芜湖'},
}else{ {id:'蚌埠',name:'蚌埠'},
that.taskList = [{id:'',name:'全部任务'}].concat(data.data); {id:'淮南',name:'淮南'},
that.getTake() {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(){ getTake(){
let that = this; let that = this;
...@@ -57,9 +78,15 @@ new Vue({ ...@@ -57,9 +78,15 @@ new Vue({
}, },
Charts(msg){ 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 = [ let sourceArr = [
[ 'product', 'amount'], [ 'product', 'amount'],
].concat(msg); ].concat(msgArr);
var option = { var option = {
dataZoom : [ dataZoom : [
{ {
...@@ -184,8 +211,8 @@ new Vue({ ...@@ -184,8 +211,8 @@ new Vue({
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate(); return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
}, },
init(){ init(){
this.dateRange = [new Date(new Date()-24*60*60*1000*30), new Date()]; 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*30)); this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000));
this.end_date = this.dateFormat(new Date()); this.end_date = this.dateFormat(new Date());
this.getTask(); // 获取任务 this.getTask(); // 获取任务
//this.getTake(); // 获取坐席 //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){ function RquestsGet(url){
let uri = window_url + url; let uri = window_url + url;
......
static/inspect/js/violator.js
View file @ 5577c600
...@@ -8,33 +8,10 @@ new Vue({ ...@@ -8,33 +8,10 @@ new Vue({
taskvalue: '', taskvalue: '',
start_date: '', start_date: '',
end_date:'', end_date:'',
takeList:[],
takevalue: '',
loading: true, loading: true,
Series:[ tableData: []
{
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'
}
}
]
} }
}, },
methods: { methods: {
...@@ -42,154 +19,103 @@ new Vue({ ...@@ -42,154 +19,103 @@ new Vue({
console.log(dateRange); console.log(dateRange);
this.start_date = dateRange[0]; this.start_date = dateRange[0];
this.end_date = dateRange[1]; 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){ changeTask(msg){
console.log(msg); console.log(msg);
this.taskvalue = 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(){ getTask(){
let that = this; 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); //console.log(data);
if(data.code != 0){ if(data.code != 0){
that.taskList = [{id:'',name:'全部任务'}]; //that.takeList = [{agentName:'全部坐席'}]
}else{ }else{
that.taskList = [{id:'',name:'全部任务'}].concat(data.data); that.takeList = data.data;
} }
}) })
}, },
ChartsOne(msg){ getRule(task,start_date,end_date,agentName){
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){
let that = this; let that = this;
this.$loading({text:'数据加载中...'});
RquestsPost('api/v1/tasks/seat_score/',{task,start_date,end_date}).then(data => {
console.log(data.data);
let arr = []; let arr = [];
if(data.code != 0){ //this.$loading({text:'数据加载中...'});
if(data.msg){ RquestsPost('api/v1/tasks/seat_rule/',{task,start_date,end_date,agentName}).then(data => {
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); console.log(data.data);
let arr = [];
if(data.code != 0){ if(data.code != 0){
that.$message(data.msg);
if(data.msg){ if(data.msg){
that.$message(data.msg); that.$message(data.msg);
}else{ }else{
that.$message('服务器错误') that.$message('服务器错误')
} }
} }
this.tableData = data.data;
if(!data.data){ if(!data.data){
this.$loading().close(); this.$loading().close();
return false; return false;
} }
for(let key in data.data){ //for(let key in data.data){
arr.push([data.data[key],key]) // arr.unshift([data.data[key],key])
}; //}
console.log(arr);
that.ChartsTwo(arr);
this.$loading().close();
});
this.$loading().close();
})
}, },
dateFormat(date){ dateFormat(date){
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate(); return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
}, },
init(){ init(){
this.dateRange = [new Date(new Date()-24*60*60*1000*30), new Date()]; 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*30)); this.start_date = this.dateFormat(new Date(new Date()-24*60*60*1000));
this.end_date = this.dateFormat(new Date()); this.end_date = this.dateFormat(new Date());
this.getTask(); // 获取任务 this.getTask(); // 获取任务
let that = this; //this.getTake(); // 获取坐席
console.log(this.dateRange); 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); // 获取统计数据
} }
}, },
......
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