| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- var token = $.cookie("token");
- var date; //初始日期
- var myChart;
- var tabIndex = 0;
- $(document).ready(function() {
- layui.use('laydate', function() {
- var laydate = layui.laydate;
- //日期
- laydate.render({
- elem: '#chooseTime',
- format: 'yyyy',
- type: 'year',
- theme: '#1ab394',
- });
- });
- helper.getDropList.getDept($('#bumen'));//获取部门
- //tab切换
- $('.hu-tab li').click(function() {
- $(this).addClass('active')
- .siblings().removeClass('active');
- tabIndex = $(this).index();
- $('.hu-content >div').eq(tabIndex).show()
- .siblings().hide();
- loadDatas();
- });
- //柱形图
- //基于准备好的dom,初始化echarts实例
- myChart = echarts.init(document.getElementById('huData'));
- myChart.clear();
- myChart.showLoading();
- option = {
- color: ['#1ab394'],
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
- type: 'line' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- toolbox: {
- show: true,
- },
- calculable: true,
- xAxis: [{
- type: 'category',
- name: '月份',
- splitLine: {
- show: false
- }, //去除网格线
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- axisTick: {
- alignWithLabel: true
- }
- }],
- yAxis: [{
- type: 'value',
- name: '通话量',
- nameLocation: 'end',
- splitLine: {
- show: false
- } //去除网格线
- }],
- series: [{
- name: '通话量',
- type: 'bar',
- barWidth: '30%', //图形宽度
- data: [],
- itemStyle: {
- normal: {
- label: {
- show: true,
- textStyle: {
- color: '#800080' //顶部数据颜色
- }
- }
- }
- },
- label: {
- normal: {
- show: true,
- position: 'top' //顶部数据显示位置
- }
- }
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- loadDatas();
- //搜索事件
- $(".sear").click(function() {
- $(".huTable tbody").html('');
- date = $("#chooseTime").val();
- loadDatas();
- });
- })
- function getDataList() {
- var loadindex = layer.load();
- layui.use('table', function() {
- var table = layui.table;
- //方法级渲染
- table.render({
- elem: '#t_callTotal',
- url: huayi.config.callcenter_url + "TotalCall/GetDataList",
- method: 'get', //如果无需自定义HTTP类型,可不加该参数
- skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
- even: true, //开启隔行背景
- size: 'lg', //sm,lg尺寸的表格
- where: {
- years: date,
- dpt: $('#bumen').val(),
- token: token
- }, //如果无需传递额外参数,可不加该参数
- //request: {}, //如果无需自定义请求参数,可不加该参数
- response: {
- statusName: 'state', //数据状态的字段名称,默认:code
- statusCode: 'success', //成功的状态码,默认:0
- msgName: 'message', //状态信息的字段名称,默认:msg
- //countName: 'total', //数据总数的字段名称,默认:count
- //dataName: 'rows', //数据列表的字段名称,默认:data
- }, //如果无需自定义数据响应名称,可不加该参数
- cols: [
- [{
- field: '月份',
- title: '月份',
- fixed: true,
- align: 'center',
- width: 200,
- }, {
- field: '日期',
- title: '日期',
- align: 'center',
- sort: true,
- //width: '30%',
- }, {
- field: '总数',
- title: '总数(次)',
- align: 'center',
- //width: '30%',
- }]
- ],
- height: 'full-230',
- done:function(){
- layer.close(loadindex);
- }
- });
- });
- }
- //获取图形数据
- function tu() {
- $.ajax({
- type: "get",
- url: huayi.config.callcenter_url + "TotalCall/GetChartData",
- async: true,
- dataType: 'json',
- data: {
- years: date,
- dpt: $('#bumen').val(),
- token: token,
- },
- success: function(data) {
- myChart.hideLoading();
- if(data.data) {
- myChart.setOption({
- series: [{
- data: data.data
- }]
- });
- }
- }
- });
- }
- //导出
- $('.export').click(function() {
- dcexcel(this);
- })
- function dcexcel(obj) {
- var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
- url += "&years=" + $("#chooseTime").val();
- url += "&dpt=" + $("#bumen").val();
- obj.href = url;
- }
- function loadDatas() {
- if(tabIndex == 0) {
- tu(); //加载图形
- } else if(tabIndex == 1) {
- getDataList(); //加载表格
- }
- }
|