| 提交 | 用户 | 时间 | ||
| e7c126 | 1 | /** |
| H | 2 | * Created by xuxueli on 17/4/24. |
| 3 | */ | |
| 4 | $(function () { | |
| 5 | ||
| 6 | // filter Time | |
| 7 | var rangesConf = {}; | |
| 8 | rangesConf[I18n.daterangepicker_ranges_today] = [moment().startOf('day'), moment().endOf('day')]; | |
| 9 | rangesConf[I18n.daterangepicker_ranges_yesterday] = [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')]; | |
| 10 | rangesConf[I18n.daterangepicker_ranges_this_month] = [moment().startOf('month'), moment().endOf('month')]; | |
| 11 | rangesConf[I18n.daterangepicker_ranges_last_month] = [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]; | |
| 12 | rangesConf[I18n.daterangepicker_ranges_recent_week] = [moment().subtract(1, 'weeks').startOf('day'), moment().endOf('day')]; | |
| 13 | rangesConf[I18n.daterangepicker_ranges_recent_month] = [moment().subtract(1, 'months').startOf('day'), moment().endOf('day')]; | |
| 14 | ||
| 15 | $('#filterTime').daterangepicker({ | |
| 16 | autoApply:false, | |
| 17 | singleDatePicker:false, | |
| 18 | showDropdowns:false, // 是否显示年月选择条件 | |
| 19 | timePicker: true, // 是否显示小时和分钟选择条件 | |
| 20 | timePickerIncrement: 10, // 时间的增量，单位为分钟 | |
| 21 | timePicker24Hour : true, | |
| 22 | opens : 'left', //日期选择框的弹出位置 | |
| 23 | ranges: rangesConf, | |
| 24 | locale : { | |
| 25 | format: 'YYYY-MM-DD HH:mm:ss', | |
| 26 | separator : ' - ', | |
| 27 | customRangeLabel : I18n.daterangepicker_custom_name , | |
| 28 | applyLabel : I18n.system_ok , | |
| 29 | cancelLabel : I18n.system_cancel , | |
| 30 | fromLabel : I18n.daterangepicker_custom_starttime , | |
| 31 | toLabel : I18n.daterangepicker_custom_endtime , | |
| 32 | daysOfWeek : I18n.daterangepicker_custom_daysofweek.split(',') , // '日', '一', '二', '三', '四', '五', '六' | |
| 33 | monthNames : I18n.daterangepicker_custom_monthnames.split(',') , // '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' | |
| 34 | firstDay : 1 | |
| 35 | }, | |
| 36 | startDate: rangesConf[I18n.daterangepicker_ranges_recent_week][0] , | |
| 37 | endDate: rangesConf[I18n.daterangepicker_ranges_recent_week][1] | |
| 38 | }, function (start, end, label) { | |
| 39 | freshChartDate(start, end); | |
| 40 | }); | |
| 41 | freshChartDate(rangesConf[I18n.daterangepicker_ranges_recent_week][0], rangesConf[I18n.daterangepicker_ranges_recent_week][1]); | |
| 42 | ||
| 43 | /** | |
| 44 | * fresh Chart Date | |
| 45 | * | |
| 46 | * @param startDate | |
| 47 | * @param endDate | |
| 48 | */ | |
| 49 | function freshChartDate(startDate, endDate) { | |
| 50 | $.ajax({ | |
| 51 | type : 'POST', | |
| 52 | url : base_url + '/chartInfo', | |
| 53 | data : { | |
| 54 | 'startDate':startDate.format('YYYY-MM-DD HH:mm:ss'), | |
| 55 | 'endDate':endDate.format('YYYY-MM-DD HH:mm:ss') | |
| 56 | }, | |
| 57 | dataType : "json", | |
| 58 | success : function(data){ | |
| 59 | if (data.code == 200) { | |
| 60 | lineChartInit(data) | |
| 61 | pieChartInit(data); | |
| 62 | } else { | |
| 63 | layer.open({ | |
| 64 | title: I18n.system_tips , | |
| 65 | btn: [ I18n.system_ok ], | |
| 66 | content: (data.msg || I18n.job_dashboard_report_loaddata_fail ), | |
| 67 | icon: '2' | |
| 68 | }); | |
| 69 | } | |
| 70 | } | |
| 71 | }); | |
| 72 | } | |
| 73 | ||
| 74 | /** | |
| 75 | * line Chart Init | |
| 76 | */ | |
| 77 | function lineChartInit(data) { | |
| 78 | var option = { | |
| 79 | title: { | |
| 80 | text: I18n.job_dashboard_date_report | |
| 81 | }, | |
| 82 | tooltip : { | |
| 83 | trigger: 'axis', | |
| 84 | axisPointer: { | |
| 85 | type: 'cross', | |
| 86 | label: { | |
| 87 | backgroundColor: '#6a7985' | |
| 88 | } | |
| 89 | } | |
| 90 | }, | |
| 91 | legend: { | |
| 92 | data:[I18n.joblog_status_suc, I18n.joblog_status_fail, I18n.joblog_status_running] | |
| 93 | }, | |
| 94 | toolbox: { | |
| 95 | feature: { | |
| 96 | /*saveAsImage: {}*/ | |
| 97 | } | |
| 98 | }, | |
| 99 | grid: { | |
| 100 | left: '3%', | |
| 101 | right: '4%', | |
| 102 | bottom: '3%', | |
| 103 | containLabel: true | |
| 104 | }, | |
| 105 | xAxis : [ | |
| 106 | { | |
| 107 | type : 'category', | |
| 108 | boundaryGap : false, | |
| 109 | data : data.content.triggerDayList | |
| 110 | } | |
| 111 | ], | |
| 112 | yAxis : [ | |
| 113 | { | |
| 114 | type : 'value' | |
| 115 | } | |
| 116 | ], | |
| 117 | series : [ | |
| 118 | { | |
| 119 | name:I18n.joblog_status_suc, | |
| 120 | type:'line', | |
| 121 | stack: 'Total', | |
| 122 | areaStyle: {normal: {}}, | |
| 123 | data: data.content.triggerDayCountSucList | |
| 124 | }, | |
| 125 | { | |
| 126 | name:I18n.joblog_status_fail, | |
| 127 | type:'line', | |
| 128 | stack: 'Total', | |
| 129 | label: { | |
| 130 | normal: { | |
| 131 | show: true, | |
| 132 | position: 'top' | |
| 133 | } | |
| 134 | }, | |
| 135 | areaStyle: {normal: {}}, | |
| 136 | data: data.content.triggerDayCountFailList | |
| 137 | }, | |
| 138 | { | |
| 139 | name:I18n.joblog_status_running, | |
| 140 | type:'line', | |
| 141 | stack: 'Total', | |
| 142 | areaStyle: {normal: {}}, | |
| 143 | data: data.content.triggerDayCountRunningList | |
| 144 | } | |
| 145 | ], | |
| 146 | color:['#00A65A', '#c23632', '#F39C12'] | |
| 147 | }; | |
| 148 | ||
| 149 | var lineChart = echarts.init(document.getElementById('lineChart')); | |
| 150 | lineChart.setOption(option); | |
| 151 | } | |
| 152 | ||
| 153 | /** | |
| 154 | * pie Chart Init | |
| 155 | */ | |
| 156 | function pieChartInit(data) { | |
| 157 | var option = { | |
| 158 | title : { | |
| 159 | text: I18n.job_dashboard_rate_report , | |
| 160 | /*subtext: 'subtext',*/ | |
| 161 | x:'center' | |
| 162 | }, | |
| 163 | tooltip : { | |
| 164 | trigger: 'item', | |
| 165 | formatter: "{b} : {c} ({d}%)" | |
| 166 | }, | |
| 167 | legend: { | |
| 168 | orient: 'vertical', | |
| 169 | left: 'left', | |
| 170 | data: [I18n.joblog_status_suc, I18n.joblog_status_fail, I18n.joblog_status_running ] | |
| 171 | }, | |
| 172 | series : [ | |
| 173 | { | |
| 174 | //name: '分布比例', | |
| 175 | type: 'pie', | |
| 176 | radius : '55%', | |
| 177 | center: ['50%', '60%'], | |
| 178 | data:[ | |
| 179 | { | |
| 180 | name:I18n.joblog_status_suc, | |
| 181 | value:data.content.triggerCountSucTotal | |
| 182 | }, | |
| 183 | { | |
| 184 | name:I18n.joblog_status_fail, | |
| 185 | value:data.content.triggerCountFailTotal | |
| 186 | }, | |
| 187 | { | |
| 188 | name:I18n.joblog_status_running, | |
| 189 | value:data.content.triggerCountRunningTotal | |
| 190 | } | |
| 191 | ], | |
| 192 | itemStyle: { | |
| 193 | emphasis: { | |
| 194 | shadowBlur: 10, | |
| 195 | shadowOffsetX: 0, | |
| 196 | shadowColor: 'rgba(0, 0, 0, 0.5)' | |
| 197 | } | |
| 198 | } | |
| 199 | } | |
| 200 | ], | |
| 201 | color:['#00A65A', '#c23632', '#F39C12'] | |
| 202 | }; | |
| 203 | var pieChart = echarts.init(document.getElementById('pieChart')); | |
| 204 | pieChart.setOption(option); | |
| 205 | } | |
| 206 | ||
| 207 | }); | |
