crm/app/empcrm/view/empcrm/invalid_report.html

{extend name="public/layout"}
{block name="body"}
<link rel="stylesheet" href="__LAYUI__/layui/css/layui.css" media="all">
<link rel="stylesheet" " href=" /static/css/common.css">
<script src="/static/js/jquery.min.js"></script>
<style>
  body {
    background-color: #F3F3F3;
    padding-bottom: 40px;
  }

  .message_title {
    border: 1px solid #F0F0F0;
    background: #FCFCFC;
    margin-top: 5px;
    margin-bottom: 10px;
    position: relative;
    min-width: 800px;
    padding: 18px;
  }

  .wdatepicker2 {
    width: fit-content;
    margin: 50px auto;
    position: relative;
  }

  select {
    height: 26px;
    line-height: auto;
    vertical-align: middle;
    box-sizing: content-box;
    font-size: 13px;
    -webkit-appearance: menulist-button;
    border: #CCC solid 1px;
  }

  .wdatebtn {
    width: 180px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #4479ba;
    vertical-align: top;
  }

  #searchbtn,
  #searchbtn1 {
    vertical-align: top;
  }

  .btn {
    cursor: pointer;
    color: #000;
    background: url(__STATIC__/img/btn_bg.gif) repeat-x;
    border: 1px solid #C0C0C0;
    padding: 0 12px;
    *padding: 0 6px;
    height: 28px;
  }

  .abouts {
    width: 99%;
    position: relative;
    margin-bottom: 15px;
    margin-top: 5px;
  }

  .wdatepicker {
    top: 15px;
    right: 69px;
    position: absolute;
  }

  .abouts h1 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    letter-spacing: 2px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .tableother {
    text-align: center;
  }

  .maintable {
    table-layout: fixed;
    _width: 100%;
    width: 100%;
    border: 1px solid #DFDFDF;
    border-collapse: separate !important;
    background-color: #FFF;
    border-right: 0;
    border-bottom: 2px solid #DFDFDF;
  }

  .maintable th {
    background-color: #F2F3F7;
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    line-height: 25px;
    padding: 5px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
    color: #333
  }

  .maintable td {
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #EAEAEC;
    padding: 7px;
    line-height: 25px;
    font-size: 13px;
    position: relative;
  }

  .tablelist th,
  .tablelist td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }

  .tbcenter td {
    text-align: center
  }

  .maintable h2 {
    border-bottom: 1px solid #999;
    margin: 0;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    margin-top: 5px;
    text-indent: 3px;
    font-family: Arial;
    letter-spacing: 1px;
  }

  .maintable td label {
    cursor: pointer
  }

  .baobaonum1 {
    color: #CCC
  }

  .baobaonum1 a {
    color: #CCC
  }

  .fontnormal {
    font-weight: normal;
  }

  .ablock td a {
    width: 100%;
    height: 28px;
    display: block;
  }

  .ablock2 {
    background-color: #d0af4c;
    font-weight: bold;
  }

  .ablock2 a {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none
  }

  .ablock2 a:hover {
    color: #0000FF;
    text-decoration: underline
  }

  #loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 15000;
    display: none
  }

  #loading-mask div {
    width: 25%;
    height: 179px;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #FFFFFF;
    text-align: center
  }

  #loading-mask div img {
    padding-top: 40px;
  }

  #loading-mask div p {
    padding-top: 25px;
    color: #006600
  }

  .weekday {
    position: absolute;
    right: 0;
    bottom: -5px;
    text-decoration: none;
    font-size: 8px;
    color: #CCC;
    font-style: normal;
  }
  .wdatefast {
    width: 290px;
    height: 35px;
    line-height: 35px;
    top: 48px;
    right: 48px;
    position: absolute;
    background-color: #FCFCFC;
    text-indent: 20px;
    font-family: Arial;
  }
  .wdatefast a {
    padding-left: 6px;
    padding-right: 6px;
  }
  .wdatefast2 a {
    padding-left: 6px;
    padding-right: 6px;
    color: #0033CC;
  }
</style>

<body class="clearfix">
  <div class="dailybox">
    <div class="message_title " style="margin-bottom:8px;">
      您当前的操作 · <b><span class="red2">各渠道账户无效数据报表</span></b>
      <div class="wdatepicker" style="display:none;">
        <input name="nowyear1" type="text" id="select_date1" class="wdatebtn left" readonly="readonly" placeholder="开始时间 到 结束时间">
        <button id="searchbtn1" class="btn left" type="button">查 看</button>
      </div>
      <div class="wdatefast" style="display:none;">
        推荐检索：
        <a class="nowmonth" href="javascript:void(0)">本月度</a>
        <a class="lastmonth" href="javascript:void(0)">上个月</a>
        <a class="nowyearbtn" href="javascript:void(0)">本年度</a>
      </div>
    </div>
    <div class="wdatepicker2 tcenter">
      <div id="seafrom" class="inline-block clearfix" style="margin:0px">
        <input name="nowyear" type="text" id="select_date" class="wdatebtn left" readonly="readonly" placeholder="开始时间 到 结束时间">
        <button id="searchbtn" class="btn left" type="button">查 看</button>
      </div>

      <div class="wdatefast2">
        推荐检索：
        <a class="nowmonth" href="javascript:void(0)">本月度</a>
        <a class="lastmonth" href="javascript:void(0)">上个月</a>
        <a class="nowyearbtn" href="javascript:void(0)">本年度</a>
      </div>
    </div>
    <div class="abouts tablemsgbox" style="display:none;">
      <h1>{$data.company_name}各渠道无效报表</h1>
      <table class="maintable tableother">
        <thead>
          <tr>
            <th rowspan="2" width="75">渠道</th>
            <th colspan="2">基本数据</th>
            <th colspan="10">无效理由</th>
          </tr>
          <tr>
            <th class="thtopline">线索</th>
            <th class="thtopline">无效线索</th>
            <th class="thtopline fontnormal">同行</th>
            <th class="thtopline fontnormal">空错号</th>
            <th class="thtopline fontnormal">不是本人</th>
            <th class="thtopline fontnormal">局部装修</th>
            <th class="thtopline fontnormal">超服务区域</th>
            <th class="thtopline fontnormal">与内部撞单</th>
            <th class="thtopline fontnormal">多次联系不上</th>
            <th class="thtopline fontnormal">装修预算太低</th>
            <th class="thtopline fontnormal">没有装修需求</th>
            <th class="thtopline fontnormal">精装修</th>
          </tr>
        </thead>
        <tbody class="tbodybox">

        </tbody>
      </table>
    </div>
    <div class="abouts" style="text-align:right; color:#999; padding-bottom:15px; line-height:23px;">
      注：<br>
      1、基本数据：线索是根据信息录入的报名认时间统计。<br>
      2、基本数据：加微是根据信息录入的时报名时间统计。<br>
      3、基本数据：见面到访是根据首次洽谈的时间统计。<br>
      4、基本数据：预定合同是根据定金时间统计，和报名、见面到访时间无关。<br>
      5、基本数据：施工合同是根据合同时间统计，和报名、见面到访时间无关。<br>
      6、注销：线索是根据变更线索无效的默认时间统计，和线索报名无关。<br>
      7、注销：见面到访是根据首次洽谈时间统计，和线索报名时间无关。
    </div>
  </div>
  <div id="loading-mask">
    <div><img src="__STATIC__/img/large-loading.gif" />
      <p>...加载中...</p>
    </div>
  </div>
</body>
<script src="__LAYUI__/layui/layui.js"></script>
{/block}{block name="js"}
<script type="text/html" id="designer_name">
  {{# if(d.designer){ }}
    <span>{{d.designer.name}}</span>
  {{# }else{ }}
    <span style="color: #cccccc;">无</span>
  {{# } }}
</script>
<script type="text/javascript">
  var reload = null, resizefun = null;
  layui.config({
    base: '__LAYUI__/',
    urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['table', 'laydate'], function () {
    var table = layui.table, laydate = layui.laydate,
      $ = layui.$;
    let date=new Date();
    let year=date.getFullYear();
    let month = date.getMonth()*1+1;
    let day= date.getDate();
    let time='';
    laydate.render({
      elem: '#select_date'
      , type: 'date'
      , range: '到'
      , trigger: 'click'//呼出事件改成click
      , max:0
    });
    laydate.render({
      elem: '#select_date1'
      , type: 'date'
      , range: '到'
      , trigger: 'click'//呼出事件改成click
      , max:0
    });
    $('.nowyearbtn').click(function () {
      let date = new Date();
      let year = date.getFullYear();

      time = year + '-1-1' + ' 到 ' + year+'-12-31';
      laydate.render({
        elem: '#select_date1'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      $('.wdatefast').show();
      dailyfun(time);
    })
    $('.lastmonth').click(function () {
      // 2022-11-01 - 2022-11-26
      const getLastMonthLast = () => {
        const date = new Date()
        // 获取上个月的最后一天是几号day
        const day = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
        const enddate = new Date(date.getFullYear(), date.getMonth() - 1, day)
        return enddate
      }
      $('.wdatefast').show();
      time = getPreMonth()+'-1 到 '+ getPreMonth()+'-'+ getLastMonthLast().getDate();
      laydate.render({
        elem: '#select_date1'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $('.nowmonth').click(function () {
      // 2022-11-01 - 2022-11-26 
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() * 1 + 1;
      $('.wdatefast').show();
      time = year+'-'+ month+'-1'+ ' 到 ' + getLastDay();
      laydate.render({
        elem: '#select_date1'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatefast').show();
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $("#searchbtn1").click(function () {
      if (!$('#select_date1').val()) {
        alert('提示：请务必选择统计时间')
        return false;
      }
      time = $('#select_date1').val();
      laydate.render({
        elem: '#select_date'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatefast').show();
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $('#searchbtn').click(function(){
      if(!$('#select_date').val()){
        alert('提示：请务必选择统计时间')
        return false;
      }
      time= $('#select_date').val();
      laydate.render({
        elem: '#select_date1'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        ,value: time
        , max:0
      });
      $('.wdatefast').show();
      $('.wdatepicker2').hide();
      $('.wdatepicker').show(); 
      $('.tablemsgbox').show();
      dailyfun();
    })
    resizefun = function () {
      dailyfun();
    };
    reload = function () {
      dailyfun();
    };
    function dailyfun() {
      $('#loading-mask').show();
      $.ajax({
        url: '{:url("empcrm/invalid_report")}'
        , data: {
          date: time,
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
            let str="";
            for(let i in res.data){
              str += `<tr>
                <td>${res.data[i].name}</td>
                <td class="${res.data[i].clue_cont ? '' : 'baobaonum1'}">${res.data[i].clue_cont}</td>	
                <td class="${res.data[i].invalid_no ? '' : 'baobaonum1'}">${res.data[i].invalid_no}</td>		
                <td class="${res.data[i].remark1 ? '' : 'baobaonum1'}">${res.data[i].remark1}</td>
                <td class="${res.data[i].remark2 ? '' : 'baobaonum1'}">${res.data[i].remark2}</td>
                <td class="${res.data[i].remark3 ? '' : 'baobaonum1'}">${res.data[i].remark3}</td>
                <td class="${res.data[i].remark4 ? '' : 'baobaonum1'}">${res.data[i].remark4}</td>
                <td class="${res.data[i].remark5 ? '' : 'baobaonum1'}">${res.data[i].remark5}</td>
                <td class="${res.data[i].remark6 ? '' : 'baobaonum1'}">${res.data[i].remark6}</td>
                <td class="${res.data[i].remark7 ? '' : 'baobaonum1'}">${res.data[i].remark7}</td>
                <td class="${res.data[i].remark8 ? '' : 'baobaonum1'}">${res.data[i].remark8}</td>
                <td class="${res.data[i].remark9 ? '' : 'baobaonum1'}">${res.data[i].remark9}</td>
                <td class="${res.data[i].remark10 ? '' : 'baobaonum1'}">${res.data[i].remark10}</td>	
		          </tr>`;
            }
            $('.tbodybox').html(str);
          }else if(res.code == 403){
				$(".exitbtn").trigger("click");
			} else {
            alert(res.msg)
          }
          $('#loading-mask').hide();
        }
      });
    }
    

  })
  // 本月最后一天
  function getLastDay() {
    var y = new Date().getFullYear(); //获取年份
    var m = new Date().getMonth() + 1; //获取月份
    var d = new Date(y, m, 0).getDate(); //获取当月最后一日
    m = m < 10 ? '0' + m : m; //月份补 0
    d = d < 10 ? '0' + d : d; //日数补 0

    return [y, m, d].join("-")
  }

  function getNowMonth() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    month = month > 9 ? month : "0" + month;
    var nowMonth = year + "-" + month;
    return nowMonth;
  }

  /**获取上一个月 */
  function getPreMonth() {
    var arr = getNowMonth().split("-");
    var year = arr[0]; //获取当前日期的年份
    var month = arr[1]; //获取当前日期的月份

    var year2 = year;
    var month2 = parseInt(month) - 1;
    if (month2 == 0) {
      //1月的上一月是前一年的12月
      year2 = parseInt(year2) - 1;
      month2 = 12;
    }
    var preMonth = year2 + "-" + month2;
    return preMonth;
  }
</script>
{/block}