crm/app/empcrm/view/community/designer_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;
    z-index:99;
  }

  .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;
  }

  .wdatefast2 a {
    padding-left: 6px;
    padding-right: 6px;
    color: #0033CC;
  }
  .wdatefast {
    width: 290px;
    height: 35px;
    line-height: 35px;
    top: 38px;
    right: 48px;
    position: absolute;
    background-color: #FCFCFC;
    text-indent: 20px;
    font-family: Arial;
  }
  .wdatefast a {
    padding-left: 6px;
    padding-right: 6px;
  }
</style>

<body class="clearfix">
  <div class="dailybox">
    <div class="message_title " style="margin-bottom:8px;">
      您当前的操作 · <b><span class="red2">{$data.company_name}每天报表明细</span></b>
      <div class="wdatepicker" style="display:none;">
        <select class="left" name="org_id" id="org_id" {if $is_manager neq 1} style="display:none;"{/if}>
          <option value="">==所有部门==</option>
          {volist name="org_data" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
        <select class="left" name="source_id" id="source_id1">
          <option value="">==来源账户==</option>
          {volist name="soudata" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
        <select class="left validbox" name="wuxiao" id="valid">
          <option value="">==包含==</option>
          <option value="1">统计无效</option>
        </select>
        <input name="nowyear" type="text" id="nowyear1" class="wdatebtn left" readonly="readonly" placeholder="开始时间 到 结束时间">
        <button id="searchbtn1" class="btn left" type="button">查 看</button>
        <div class="wdatefast">
          推荐检索：
          <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>
    <div class="wdatepicker2 tcenter">
      <div id="seafrom" class="inline-block clearfix" style="margin:0px">
        <select class="left" name="org_ids" id="org_ids" {if $is_manager neq 1} style="display:none;"{/if}>
          <option value="">==所有部门==</option>
          {volist name="org_data" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
        <select class="left" name="source_id" id="source_id">
          <option value="">==来源账户==</option>
          {volist name="soudata" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
        <select class="left" name="wuxiao" id="wuxiao">
          <option value="">==包含==</option>
          <option value="1">统计无效</option>
        </select>
        <input name="nowyear" type="text" id="nowyear" 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}设计师<span class="month"></span>月份日报</h1>
      <table class="maintable tableother">
        <thead>
          <tr>
            <th rowspan="2">客服</th>
            <th colspan="10">基本数据</th>
            <th colspan="4" class="validnumbox" style="display:none;">注销</th>
          </tr>
          <tr>
            <th class="thtopline">线索量</th>
            <th class="thtopline">有效线索量</th>
            <th class="thtopline">有效率</th>
            <th class="thtopline">待确认</th>
            <th class="thtopline">见面量</th>
            <th class="thtopline">见面率</th>
            <th class="thtopline">预定合同</th>
            <th class="thtopline">成单率</th>
            <th class="thtopline">施工合同</th>
            <!-- <th class="thtopline" title="套餐整装或基础合同额">基本金额</th>
            <th class="thtopline" title="软装、电器、定制等合同额">其他金额</th> -->
            <th class="thtopline">业绩总额</th>
            <th class="thtopline fontnormal validnumbox" style="display:none;">无效</th>
            <th class="thtopline fontnormal validnumbox" style="display:none;">有效</th>
            <th class="thtopline fontnormal validnumbox" style="display:none;">见面</th>
            <th class="thtopline fontnormal validnumbox" style="display:none;">定金</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 time='', validtype='',source_id='',org_id='';
    laydate.render({
      elem: '#nowyear' //指定元素
      , 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';
      source_id=$('#source_id').val();
      validtype = $('#wuxiao').val();
      org_id=$('#org_ids').val();

      laydate.render({
        elem: '#nowyear1'
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })

    $('.lastmonth').click(function () {
      source_id=$('#source_id').val();
      org_id=$('#org_ids').val();
      validtype = $('#wuxiao').val();
      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: '#nowyear1' //指定元素
        , type: 'date'
        , range: '到'
        , trigger: 'click'//呼出事件改成click
        , value: time
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $('.nowmonth').click(function () {
      source_id=$('#source_id').val();
      org_id=$('#org_ids').val();
      validtype = $('#wuxiao').val();
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() * 1 + 1;
      time = year+'-'+ month+'-1'+ ' 到 ' + getLastDay();
 
      laydate.render({
        elem: '#nowyear1' //指定元素
        , type: 'date'
        , range: '到'
        , value: time
        , trigger: 'click'//呼出事件改成click
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $("#searchbtn1").click(function () {
      if (!$('#nowyear1').val()) {
        alert('提示：请务必选择统计时间')
        return false;
      }
      validtype= $('#valid').val();
      time = $('#nowyear1').val();
      source_id=$('#source_id1').val();
      org_id=$('#org_id').val();
      $('.month').html(time.split('-')[1]);
      laydate.render({
        elem: '#nowyear1' //指定元素
        , type: 'date'
        , range: '到'
        , value: time
        , trigger: 'click'//呼出事件改成click
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    $('#searchbtn').click(function(){
      if(!$('#nowyear').val()){
        alert('提示：请务必选择统计时间')
        return false;
      }
      validtype = $('#wuxiao').val();
      time= $('#nowyear').val();
      source_id=$('#source_id').val();
      org_id=$('#org_ids').val();
      laydate.render({
        elem: '#nowyear1' //指定元素
        , type: 'date'
        , range: '到'
        , value: time
        , trigger: 'click'//呼出事件改成click
        , max:0
      });
      $('.wdatepicker2').hide();
      $('.wdatepicker').show();
      $('.tablemsgbox').show();
      dailyfun(time);
    })
    resizefun = function () {
      dailyfun(time);
    };
    reload = function () {
      dailyfun(time);
    };
    function dailyfun(time) {
      $('#loading-mask').show();
      $.ajax({
        url: '{:url("community/designer_report")}'
        , data: {
          date: time,
          source_id:source_id,
          org_id:org_id
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
            let str="";
            if(!validtype){
              for(let j=0;j<$('.validnumbox').length;j++){
                $($('.validnumbox')[j]).hide();
              }
            }else{
              for (let j = 0; j < $('.validnumbox').length; j++) {
                $($('.validnumbox')[j]).show();
              }
            }
            for(let i in res.data){
              if(res.data[i].name!='求和'){
                str+=`<tr>
                      <td>${res.data[i].name}</td>
                      <td title="线索量" class="${res.data[i].clue_cont ? '' : 'baobaonum1'}">${ res.data[i].clue_cont}</td>
                      <td title="有效线索量" class="${res.data[i].valid_cont ? '' : 'baobaonum1'}">${res.data[i].valid_cont}</td>
                      <td title="有效率"  class="${res.data[i].valid_percen ? '' : 'baobaonum1'}">${res.data[i].valid_percen}%</td>
                      <td title="待确认"  class="${res.data[i].dai_confirmed ? '' : 'baobaonum1'}">${res.data[i].dai_confirmed}</td>
                      <td title="见面量" class="${res.data[i].meet_cont ? '' : 'baobaonum1'}">${res.data[i].meet_cont}</td>
                      <td title="见面率" class="${res.data[i].meet_percen ? '' : 'baobaonum1'}">${res.data[i].meet_percen}%</td>
                      <td title="预定合同量" class="${res.data[i].deposit_cont ?'':'baobaonum1'}">${res.data[i].deposit_cont}</td>
                      <td title="成单率"  class="${res.data[i].deposit_percen ? '' : 'baobaonum1'}">${res.data[i].deposit_percen}%</td>
                      <td title="施工合同量" class="${res.data[i].sign_cont ?'':'baobaonum1'}">${res.data[i].sign_cont}</td>
                      <td title="业绩总额" class="${res.data[i].basic_money ?'':'baobaonum1'}">${res.data[i].basic_money}</td>
                      <td title="无效线索注销量" class="validnumbox ${res.data[i].invalid_no ?'':'baobaonum1'}">${res.data[i].invalid_no}</td>
                      <td title="有效线索注销量" class="validnumbox ${res.data[i].invalid_yes ?'':'baobaonum1'}">${res.data[i].invalid_yes}</td>
                      <td title="见面注销量" class="validnumbox ${res.data[i].invalid_meet ?'':'baobaonum1'}">${res.data[i].invalid_meet}</td>
                      <td title="定金注销量" class="validnumbox ${res.data[i].invalid_deposit ?'':'baobaonum1'}">${res.data[i].invalid_deposit}</td>
                      </tr>`;
              }else{
                str+=`<tr id="totalRow">
                  <td>${res.data[i].name}</td>
                  <td class="sum_xiansuo ${res.data[i].clue_cont ? '' : 'baobaonum1'}">${res.data[i].clue_cont}</td>
                  <td class="sum_youxiao ${res.data[i].valid_cont ? '' : 'baobaonum1'}">${res.data[i].valid_cont}</td>
                  <td class="sum_youxiao_percent ${res.data[i].valid_percen ? '' : 'baobaonum1'}">${res.data[i].valid_percen}%</td>
                  <td class="sum_youxiao_percent ${res.data[i].dai_confirmed ? '' : 'baobaonum1'}">${res.data[i].dai_confirmed}</td>
                  <td class="sum_daofang ${res.data[i].meet_cont ? '' : 'baobaonum1'}">${res.data[i].meet_cont}</td>
                  <td class="sum_daofanglv_percent ${res.data[i].meet_percen ? '' : 'baobaonum1'}">${res.data[i].meet_percen}%</td>
                  <td  class="${res.data[i].deposit_cont ?'':'baobaonum1'}">${res.data[i].deposit_cont}</td>
                  <td class="sum_youxiao_percent ${res.data[i].deposit_percen ? '' : 'baobaonum1'}">${res.data[i].deposit_percen}%</td>
                  <td  class="${res.data[i].sign_cont ?'':'baobaonum1'}">${res.data[i].sign_cont}</td>
                  <td  class="${res.data[i].basic_money ?'':'baobaonum1'}">${res.data[i].basic_money}</td>
                  <td class="validnumbox ${res.data[i].invalid_no?'':'baobaonum1'}">${res.data[i].invalid_no}</td>
                  <td class="validnumbox ${res.data[i].invalid_yes ?'':'baobaonum1'}">${res.data[i].invalid_yes}</td>
                  <td class="validnumbox ${res.data[i].invalid_meet ?'':'baobaonum1'}">${res.data[i].invalid_meet}</td>
                  <td class="validnumbox ${res.data[i].invalid_deposit ?'':'baobaonum1'}">${res.data[i].invalid_deposit}</td>
                  </tr>`;
              }
            }
            $('.tbodybox').html(str);
            if (!validtype) {
              for (let j = 0; j < $('.validnumbox').length; j++) {
                $($('.validnumbox')[j]).hide();
              }
            } else {
              for (let j = 0; j < $('.validnumbox').length; j++) {
                $($('.validnumbox')[j]).show();
              }
            }
            $(".maintable td").mouseover(function () {
              if ($(this).text() == 0 || $(this).text() > 500) { $(this).html($(this).text()) }
              if ($(this).children("a").length > 0) { $(this).addClass("ablock2"); }
            }).mouseout(function () { $(this).removeClass("ablock2"); });
            $('.divlayer').on('click', function () {
              let date= time;
              layer.open({
                type: 2,
                title: '信息',
                shadeClose: true,
                scrollbar: false,
                shade: 0.8,
                area: ['99%', '96%'],
                content: "{:url('community/account_detail')}?date="+ date +'&state='+ $(this).attr('text'),
              });
            });
          }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}