'use strict'; app.controller('deck_reportCtrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "SweetAlert", "Restangular", "api_report", "api_statistic", "moment", 'api_user_data','api_deck_report', function ($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, SweetAlert, Restangular, api_report, api_statistic, moment, api_user_data,api_deck_report) { $scope.tap = 'LDZS'; // 选择日期: $scope.dateSelected = [{ name: '近90天', id: 0 }, { name: '近1年', id: 1 }, { name: '近3年', id: 2 }, { name: '近5年', id: 3 }] $scope.parameters = {}; $scope.nowdata = moment(new Date()).format('YYYY/MM/DD HH:ss:mm'); var weeks = new Date().getDay(); $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD'); $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD'); $scope.changeForm = function (paramDateFrom) { $scope.starttimes = moment(paramDateFrom).format('YYYY-MM-DD'); } $scope.changeTo = function (paramDateTo) { $scope.endtimes = moment(paramDateTo).format('YYYY-MM-DD'); } $scope.parameters.paramDateFrom = $scope.starttimes; $scope.parameters.paramDateTo = $scope.endtimes; $scope.searchkeys = { dateSelected: {id:-1,name:""}//选中 }; // 重置 $scope.reset = function(){ $scope.parameters.paramDateFrom = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD'); $scope.parameters.paramDateTo = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD'); $scope.searchkeys.dateSelected = {id:-1,name:""} $scope.getData(); } // n天前 $scope.GetDateStr = function (AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1); //获取当前月份的日期,不足10补0 var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号,不足10补0 return y + "-" + m + "-" + d; } //上周 $scope.week = function () { $scope.searchstate = "week"; var weeks = new Date().getDay(); $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD'); $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD'); $scope.parameters.paramDateFrom = $scope.starttimes; $scope.parameters.paramDateTo = $scope.endtimes; // $scope.parameters = parseDateParameter($scope.parameters); // $scope.mdxquery(); } //上月 $scope.month = function () { $scope.searchstate = "month"; $scope.starttimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth() - 1)).format('YYYY-MM-DD'); $scope.endtimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth()) - 86400000).format('YYYY-MM-DD'); $scope.parameters.paramDateFrom = $scope.starttimes; $scope.parameters.paramDateTo = $scope.endtimes; // $scope.parameters = parseDateParameter($scope.parameters); // $scope.mdxquery(); } //上年 //今年(1月1日-至今) $scope.year = function () { $scope.searchstate = "year"; $scope.starttimes = moment().startOf('year').format('YYYY-MM-DD'); $scope.endtimes = moment().format('YYYY-MM-DD'); $scope.parameters.paramDateFrom = $scope.starttimes; $scope.parameters.paramDateTo = $scope.endtimes; } // 近n年 $scope.nearYear = function (n) { $scope.parameters.paramDateFrom = moment().subtract(n, "years").format("YYYY-MM-DD"); $scope.parameters.paramDateTo = $scope.endtimes; console.log($scope.parameters.paramDateFrom, $scope.parameters.paramDateTo) } /** *日历 */ $scope.open = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = !$scope.opened; }; $scope.endOpen = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.startOpened = false; $scope.endOpened = !$scope.endOpened; }; $scope.startOpen = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.endOpened = false; $scope.startOpened = !$scope.startOpened; }; //选择类型 $scope.active = function (name) { $scope.tap = name if ($scope.tap == 'LDZS') { $scope.getData(); } else { setTimeout(function () { barechart2(); barechart3(); }, 500); } } // 请求人 // api_user_data.fetchDataList('requester', { // "idx": 0, // "sum": 10 // }).then(function (response) { // if (response) { // if (response.status = 200) { // $scope.requester = response.list; // } // } // }) //获取数据 $scope.total = 0;//来电总数 $scope.trans = 0;//建单总数 $scope.trans_percent = 0;//来电转换率 $scope.dataList = [];//柱状图-按月统计来电量 $scope.dataList_name = [];//横轴名称 $scope.dataList_totalNum = [];//来电总数 $scope.dataList_buildNum = [];//建单总数 $scope.hourList = [];//24小时来电趋势图-按小时统计来电量 $scope.hourList_name = []; $scope.hourList_countNum = []; $scope.timeList = [];//未接听数-按月统计 $scope.timeList_name = []; $scope.timeList_sumNum = []; $scope.timeList_avgNum = []; $scope.missList = [];//接听通话时长和平均时长-按月统计 $scope.missList_name = []; $scope.missList_countNum = []; $scope.getData = function(){ api_deck_report.fetchLdzsNumList({ "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo, }).then(function (res) { if(res){ // 来电总数顶部数字 if(res.title){ $scope.total = res.title.total || 0; $scope.trans = res.title.trans || 0; $scope.trans_percent = res.title.trans_percent || 0; } // 柱状图-按月统计来电量 if(res.dataList){ var arr = Object.values(res.dataList); $scope.dataList = arr.map(ress=>{ return { time:ress.time, total:ress.total || 0, trans:ress.trans || 0 } }) $scope.dataList_name = $scope.dataList.map(v=>v.time);//横轴名称 $scope.dataList_totalNum = $scope.dataList.map(v=>v.total);//来电总数 $scope.dataList_buildNum = $scope.dataList.map(v=>v.trans);//建单总数 } // 24小时来电趋势图-按小时统计来电量 if(res.hourList){ $scope.hourList = res.hourList || []; $scope.hourList_name = $scope.hourList.map(v=>v.time);//横轴名称 $scope.hourList_countNum = $scope.hourList.map(v=>v.count);//数量 } // 接听通话时长和平均时长-按月统计 if(res.timeList){ $scope.timeList = res.timeList || []; $scope.timeList_name = $scope.timeList.map(v=>v.time);//横轴名称 $scope.timeList_sumNum = $scope.timeList.map(v=>v.sum);//通话时长 $scope.timeList_avgNum = $scope.timeList.map(v=>v.avg);//平均时长 } // 未接听数-按月统计 if(res.missList){ $scope.missList = res.missList || []; $scope.missList_name = $scope.missList.map(v=>v.time);//横轴名称 $scope.missList_countNum = $scope.missList.map(v=>v.count);//未接听数 } //渲染图表 barechart(); barechart1({id:"sjfx1",name:'来电数量',unit:'个',data:{x:$scope.hourList_name,y:$scope.hourList_countNum}}); barechart1({id:"sjfx2",name:' 接听通话时长',unit:'秒',data:{x:$scope.timeList_name,y:$scope.timeList_sumNum}}); barechart1({id:"sjfx3",name:' 接听电话平均时长',unit:'秒',data:{x:$scope.timeList_name,y:$scope.timeList_avgNum}}); barechart1({id:"sjfx4",name:'未接电话',unit:'个',data:{x:$scope.missList_name,y:$scope.missList_countNum}}); } }) } $scope.getData(); // 选择日期 $scope.onChangeDate = function (s) { console.log(s) switch (s) { case 0: // 最近90天 console.log('最近90天'); $scope.parameters.paramDateFrom = $scope.GetDateStr(-90); break; case 1: // 最近一年 console.log('最近一年'); $scope.nearYear(1) break; case 2: // 最近三年 console.log('最近三年'); $scope.nearYear(3) break; case 3: // 最近五年 console.log('最近五年'); $scope.nearYear(5) break; } } //图表 来电转换 function barechart() { console.log(echarts) var dom = document.getElementById("ldzh"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({   text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['来电总数', '建单总数'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '.5%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: $scope.dataList_name }], yAxis: [{ type: 'value', scale: true, name: '数量 (个)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, } // { // type: 'value', // scale: true, // name: '来电转换率', // min: 0, // max: 100, // boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value} %', // textStyle: { // color: '#7B7B7B', // // fontSize: '14', // } // }, // axisLine: { // show: true, // lineStyle: { // color: '#7B7B7B', // // type: 'dotted' // }, // }, // } ], series: [ { name: '来电总数', type: 'bar', itemStyle: { normal: { color: '#005395' } }, data: $scope.dataList_totalNum }, { name: '建单总数', type: 'bar', itemStyle: { normal: { color: '#1CA58F' } }, data: $scope.dataList_buildNum } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); myChart.hideLoading(); } } //图表 事件趋势 function barechart1(options) { console.log(echarts) var dom = document.getElementById(options.id); console.log(dom) var myChart1 = echarts.init(dom); var option1 = null; console.log(myChart1) myChart1.showLoading({   text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart1.hideLoading(); option1 = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#49A9EE', type: 'dotted' }, } }, legend: { data: [options.name], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '1%', right: '0%', bottom: '15%', top: '10%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: options.data.x }], yAxis: [{ type: 'value', scale: true, name: options.name + '(' + options.unit +')', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: [{ name: options.name, type: 'line', itemStyle: { normal: { color: '#005395', } }, lineStyle: { normal: { color: '#005395' } }, data: options.data.y }] }; if (option1 && typeof option1 === "object") { myChart1.setOption(option1, true); myChart1.hideLoading(); } } //图表 来电转换 function barechart2() { console.log(echarts) var dom = document.getElementById("sjqs"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({   text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['直接处理', '事件派单', '来电转换率'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '.5%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12'] }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value}' // } axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, { type: 'value', scale: true, name: '来电转换率', min: 0, max: 100, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', }, formatter: '{value} %' }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: [{ name: '直接处理', type: 'bar', itemStyle: { normal: { color: '#005395' } }, data: [20, 12, 31, 23, 56, 78, 92, 12, 23] }, { name: '事件派单', type: 'bar', itemStyle: { normal: { color: '#1CA58F' } }, data: [10, 20, 5, 5, 2, 32, 34, 56, 23] }, { name: '来电转换率', type: 'line', itemStyle: { normal: { color: '#49A9EE' } }, lineStyle: { normal: { color: '#49A9EE' } }, data: [10, 20, 5, 43, 12, 34, 12, 56, 67] } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); myChart.hideLoading(); } } //图表 来电转换 function barechart3() { console.log(echarts) var dom = document.getElementById("sjpd"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({   text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['事件派单', '请求重新指派', '派单准确率'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '.5%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12'] }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value}', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, { type: 'value', scale: true, name: '派单准确率', min: 0, max: 100, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', }, formatter: '{value} %' }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, } ], series: [{ name: '事件派单', type: 'bar', itemStyle: { normal: { color: '#005395' } }, data: [20, 12, 31, 23, 56, 78, 92, 12, 23] }, { name: '请求重新指派', type: 'bar', itemStyle: { normal: { color: '#1CA58F' } }, data: [10, 20, 5, 5, 2, 32, 34, 56, 23] }, { name: '派单准确率', type: 'line', itemStyle: { normal: { color: '#49A9EE' } }, lineStyle: { normal: { color: '#49A9EE' } }, data: [10, 20, 5, 43, 12, 34, 12, 56, 67] } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); myChart.hideLoading(); } } }])