| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>投诉产品分布表</title>
- <!--[if lt IE 9]>
- <meta http-equiv="refresh" content="0;ie.html" />
- <![endif]-->
- <script src="../../Script/Common/huayi.load.js"></script>
- <script src="../../Script/Common/huayi.config.js"></script>
- <link rel="stylesheet" href="../../js/select2/css/select2.min.css" />
- <link rel="stylesheet" href="../../css/init.css" />
- <style>
- .zxtable {
- font-size: 12px;
- background: #F5F5F5;
- }
-
- .zxt-top {
- background: #FFFFFF;
- height: 60px;
- width: 95%;
- margin: 40px auto 0 auto;
- padding: 10px 20px;
- }
-
- .topCon {
- float: right;
- margin-right: 45px;
- }
-
- .zxt-content {
- width: 95%;
- margin: 0 auto;
- }
-
- .zxt-table {
- overflow-x: auto;
- }
-
- .zxt-table table {
- font-size: 12px;
- margin: 30px auto;
- max-width: 100%;
- background: #FFFFFF;
- }
-
- .header-num-date {
- position: relative;
- }
-
- .num-header {
- position: absolute;
- top: 10px;
- right: 10px;
- }
-
- .date-header {
- position: absolute;
- left: 10px;
- bottom: 10px;
- }
- </style>
- </head>
- <body class="gray-bg" style="background: #fefefe;">
- <div class="zxtable">
- <div class="daoHang clearfix">
- <div class="dhLeft">
- <sapn><i class="syIcon"></i>位置:
- <a id="ReIndex" href="javaScript:;">首页</a>>
- <a href="javaScript:;">报表分析</a>>
- <a href="javaScript:;">业务数据分析</a>>
- <a href="" class="nowPosition">投诉产品分布表</a>
- </sapn>
- </div>
- <div class="dhRight">
- <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
- </div>
- </div>
- <div class="zxt-top clearfix">
- <div class="topCon">
- <div class="form-inline th-bar clearfix">
- <div class="time-box form-group">
- <i class="tub fa fa-calendar"></i>
- <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
- </div>
- <div class="form-group tool_bars pull-right">
- <button class="btns sear">搜索</button>
- <a class="btns export">导出</a>
- </div>
- </div>
- </div>
- </div>
- <div class="zxt-content">
- <div class="zxt-table">
- <table class="table table-bordered text-center zjTable">
- </table>
- </div>
- </div>
- </div>
- <script src="../../js/jquery.min.js"></script>
- <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
- <script src="../../js/jquery.cookie.js"></script>
- <script src="../../js/laydate/laydate.js"></script>
- <script src="../../js/select2/js/select2.min.js"></script>
- <script>
- $(function() {
- //日期
- laydate.render({
- elem: '#startTime',
- type: 'year',
- theme: '#1ab394',
- });
- var myDate = new Date();
- $('#startTime').val(myDate.getFullYear());
- function turn(aa) {
- if(aa < 10) {
- aa = "0" + aa;
- }
- return aa;
- }
- reportForm();
- //点击搜索事件
- $('.sear').click(function() {
- reportForm();
- })
- //按enter搜索
- document.onkeydown = function(e) { // 回车提交表单
- var theEvent = window.event || e;
- var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
- if(code == 13) {
- reportForm();
- }
- }
- //表格
- function reportForm() {
- $.ajax({
- type: "get",
- dataType: "json",
- url: huayi.config.callcenter_url + "Report/GetDateOfManufacture",
- async: true,
- data: {
- token: $.cookie("token"),
- year: $('#startTime').val(),
- isdc: 0,
- },
- success: function(data) {
- if(data.state.toLowerCase() == 'success') {
- var content = data.data;
- $('.table').html('');
- $('.table').append(
- '<tr>' +
- '<td rowspan="1" colspan="38" style="font-size: 16px; font-weight: 700">近三年投诉产品生产日期分布表</td>' +
- '</tr>' +
- '<tr>' +
- '<td rowspan="2" class="header-num-date"><div class="num-header">项目</div><div class="date-header">时间</div></td>' +
- '<td colspan="12">' + ($('#startTime').val() - 3) + '年</td>' +
- '<td colspan="12">' + ($('#startTime').val() - 2) + '年</td>' +
- '<td colspan="12">' + ($('#startTime').val() - 1) + '年</td>' +
- '<td rowspan="2">投诉起数</td>' +
- '</tr>' +
- '<tr>' +
- '<td>1月</td>' +
- '<td>2月</td>' +
- '<td>3月</td>' +
- '<td>4月</td>' +
- '<td>5月</td>' +
- '<td>6月</td>' +
- '<td>7月</td>' +
- '<td>8月</td>' +
- '<td>9月</td>' +
- '<td>10月</td>' +
- '<td>11月</td>' +
- '<td>12月</td>' +
- '<td>1月</td>' +
- '<td>2月</td>' +
- '<td>3月</td>' +
- '<td>4月</td>' +
- '<td>5月</td>' +
- '<td>6月</td>' +
- '<td>7月</td>' +
- '<td>8月</td>' +
- '<td>9月</td>' +
- '<td>10月</td>' +
- '<td>11月</td>' +
- '<td>12月</td>' +
- '<td>1月</td>' +
- '<td>2月</td>' +
- '<td>3月</td>' +
- '<td>4月</td>' +
- '<td>5月</td>' +
- '<td>6月</td>' +
- '<td>7月</td>' +
- '<td>8月</td>' +
- '<td>9月</td>' +
- '<td>10月</td>' +
- '<td>11月</td>' +
- '<td>12月</td>' +
- '</tr>'
- );
- // 年度质量投诉问题情况对比 Report/GetDateOfManufacture
- for(var i = 0; i < content.length; i++) {
- var html = '<tr>'
- for(const key in content[i]) {
- if(content[i].hasOwnProperty(key)) { // 过滤掉原型链上的属性
- html += '<td>' + content[i][key] + '</td>'
- // console.log(`Key: ${key}, Value: ${content[i][key]}`);
- }
- }
- html += '</tr>'
- $(".table").append(html)
- }
- } else {
- layer.msg(data.message);
- }
- }
- });
- }
- //导出
- $(".export").click(function() {
- var exportSttime = $('#startTime').val();
- var url = huayi.config.callcenter_url + "Report/GetDateOfManufacture?token=" + $.cookie("token");
- url += "&year=" + exportSttime + "&isdc=1";
- window.location.href = url;
- });
- })
- </script>
- </body>
- </html>
|