工业互联网平台
查看 | 历史 | 提交 | 提交对比
Jay
2024-10-12 f6a1e4196efbddd6fc4bcf7191a5ccb30ccae946
提交 | 用户 | 时间
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 });