crm/app/sys/view/statistics/behavior_statistics.html

{extend name="public/layout" /} {block name="title"}行为统计{/block} {block
name="head"} {include file="public/head"}
<style>
  html,
  body {
    min-width: 1100px;
  }

  .layui-table th:last-child {
    border-right: none;
  }

  .layui-table-view .layui-table {
    /* width:100% */
  }

  .layui-table thead tr,
  .layui-table-header {
    background-color: #d8e6f1 !important;
  }

  .line-middle {
    width: 10px;
    height: 100%;
    margin: 0px 10px;
  }

  .line {
    width: 10px;
    height: 2px;
    background-color: #999999;
  }

  .mb0 {
    margin-bottom: 0px;
  }

  .layui-btn {
    background-color: #fff;
    color: #555;
    border: 1px solid #c9c9c9;
  }

  .layui-btn:hover {
    background-color: #fff;
    color: #555;
    border: 1px solid #249efb;
  }

  .layui-btn-primary,
  .sBtn {
    background-color: #249efb;
    color: #fff;
    border: 1px solid #249efb;
  }

  .layui-btn-primary:hover {
    background-color: #249efb;
    color: #fff;
    border: 1px solid #249efb;
  }

  .sBtn:hover {
    background-color: #249efb;
    color: #fff;
    border: 1px solid #249efb;
  }

  .flex-row,
  .row {
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .ml10 {
    margin-left: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .padding-tlr {
    padding: 15px 15px 0px;
  }

  .layui-input-block {
    margin-left: 0px;
  }

  .justify-between {
    justify-content: space-between;
  }

  table tr td a {
    color: #249efb;
  }

  .qdtj_m {
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0 10px;
  }

  .qdtj_ul {
    overflow: hidden;
    border: 1px solid #94d0ff;
    padding: 15px 0;
    background-color: #fbfdff;
  }

  .qdtj_ul li {
    float: left;
    position: relative;
    text-align: center;
    width: 10%;
  }

  .qdtj_1 {
    font-size: 20px;
    font-weight: 400;
  }

  .qdtj_2 {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
  }

  .qdtj_r_x {
    height: 40px;
    width: 1px;
    background: #d8d8d9;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
  }

  .layui-card-body .layui-table-body {
    overflow-y: auto !important;
    height: 75vh;
  }

  .layui-table td,
  .layui-table th,
  .layui-table-col-set,
  .layui-table-fixed-r,
  .layui-table-grid-down,
  .layui-table-header,
  .layui-table-page,
  .layui-table-tips-main,
  .layui-table-tool,
  .layui-table-total,
  .layui-table-view,
  .layui-table[lay-skin="line"],
  .layui-table[lay-skin="row"] {
    border-color: #ccc !important;
  }

  .layui-table-fixed-r .layui-table-body {
    overflow: hidden !important;
  }

  .relative {
    position: relative;
  }

  .lay-setting {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 999 !important;
    cursor: pointer;
  }

  .selectDateBox {
    position: absolute;
    width: 330px;
    height: 100px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
    background-color: #fff;
    z-index: 99999 !important;
    top: 45px;
    box-sizing: border-box;
    padding: 5px 8px;
  }

  .selecstDateBox {
    position: absolute;
    width: 330px;
    height: 100px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
    background-color: #fff;
    z-index: 99999 !important;
    top: 45px;
    right: 0;
    box-sizing: border-box;
    padding: 5px 8px;
  }

  .date-flex,
  .date-flex1 {
    display: flex;
    align-items: center;
  }

  .date-box {
    padding: 15px 0px 10px;
  }

  #rangeDepart {
    width: 260px;
    height: 38px;
  }

  xm-select>.xm-body {
    z-index: 99999 !important;
  }
</style>
{/block} {block name="body"}
<div class="layui-fluid" style="background-color: #fff">
  <div class="layui-card">
    <div class="search-form layui-form padding-tlr">
      <div class="flex-row align-center justify-between">
        <div class="flex-row align-center">
          <div class="layui-input-block" style="margin-right: 10px">
            <button class="layui-btn ml10" id="tablebtn">导出</button>
          </div>
          <div class="layui-input-block" style="line-height:36px;">
            <a href="javascript:void(0)" id="behavior-export-list" style="color:#249efb;">查看</a>
          </div>
        </div>
        <div class="flex-row align-center">
          <div class="layui-input-block">
            <input type="text" class="layui-input" id="keyword" autocomplete="off" name="keyword"
              placeholder="请输入员工名称" />
          </div>
          <div class="layui-input-inline layui-form ml10">
            <div id="rangeDepart"></div>
          </div>
          <div class="layui-input-inline layui-form ml10" style="display: inline-block;width:200px;">
            <!-- <label class="layui-form-label" style="width: 60px;">跟进时间</label> -->
            <div class="layui-input-inline select-date relative">
              <!-- 注意：这一层元素并不是必须的 -->
              <input type="text" class="layui-input" id="sDate" name="start_date" placeholder="开始日期 - 结束日期"
                autocomplete="off" />
              <div data-type="" class="selecstDateBox layui-hide">
                <div data-type="" class="date-flex1">
                  <div data-type="today" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    今日
                  </div>
                  <div data-type="yesterday" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    昨日
                  </div>
                  <div data-type="week" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    本周
                  </div>
                  <div data-type="lastWeek" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    上周
                  </div>
                  <div data-type="month" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    本月
                  </div>
                  <div data-type="lastMonth" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    上月
                  </div>
                  <div data-type="all" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                    累计
                  </div>
                </div>
                <div data-type="" class="date-box">
                  <input data-type="" type="text" id="select_sDate" placeholder="选择开始时间 - 结束时间" readonly
                    autocomplete="off" class="layui-input" />
                </div>
              </div>
            </div>
          </div>
          <button class="layui-btn sBtn ml10 submitbtn" lay-submit lay-filter="table-search">
            筛选
          </button>
          <button class="layui-btn sBtn" style="margin-left: 18px;" id="resetbtn">重置</button>
        </div>
      </div>
    </div>
    <div class="layui-card-body relative">
      <i class="layui-icon layui-icon-set-fill lay-setting"></i>
      <table lay-filter="datalist" id="list"></table>
    </div>
  </div>
</div>
{/block} {block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="share_count">
  {{# if(d.share_count){ }}
  <a href="javascript:void(0)" lay-event="noFinishList" style="color:blue;"
    >{{d.share_count}}</a
  >
  {{# }else{ }}
  <span>{{d.share_count}}</span>
  {{# } }}
</script>
<script type="text/html" id="explain_count">
  {{# if(d.explain_count){ }}
  <a href="javascript:void(0)" lay-event="explain_count" style="color:blue;"
    >{{d.explain_count}}</a
  >
  {{# }else{ }}
  <span>{{d.explain_count}}</span>
  {{# } }}
</script>
<script>
  layui.use(["table", "form", "laydate", "element"], function () {
    let table = layui.table,
      laydate = layui.laydate,
      form = layui.form,
      element = layui.element,
      $ = layui.$,
      tableData = [];
    $("body").attr("layadmin-themealias", "default");
    var bodyH = $(".body-h").height() * 0.82;
    var istypes = 0;
    document.onkeydown = function (event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 13) {
        $(".submitbtn").trigger("click");
      }
    };
    //执行一个laydate实例
    // laydate.render({
    //     elem: '#sDate' //指定元素
    // });
    // laydate.render({
    //     elem: '#eDate' //指定元素
    // });

    $("#addWechatTime").click(function () {
      $(".selectDateBox").toggleClass("layui-hide");
      $(".selecstDateBox").addClass("layui-hide");
    });
    $("#sDate").click(function () {
      $(".selecstDateBox").toggleClass("layui-hide");
      $(".selectDateBox").addClass("layui-hide");
    });
    laydate.render({
      elem: "#select_date",
      type: "date",
      range: true,
      format: "yyyy/MM/dd",
      trigger: "click", //呼出事件改成click
      done: function (value, date, endDate) {
        $(".selectDateBox").addClass("layui-hide");
        $("#addWechatTime").val(value);
      },
    });
    laydate.render({
      elem: "#select_sDate", //指定元素
      type: "date",
      format: "yyyy/MM/dd",
      range: true,
      trigger: "click", //呼出事件改成click
      done: function (value, date, endDate) {
        $(".selecstDateBox").addClass("layui-hide");
        $("#sDate").val(value);
      },
    });
    var dateObj = {};
    setDate();
    function setDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let lastDate = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000);
      let lastYear = lastDate.getFullYear();
      let lastMonth = lastDate.getMonth() + 1;
      let lastDay = lastDate.getDate();

      let weekObj = getMondayAndSunday();
      let monthObj = getMonthFirstDayAndLastDay();
      dateObj = {
        today: `${year}/${month}/${day}`,
        yesterday: `${lastYear}/${lastMonth}/${lastDay}`,
        ...weekObj,
        ...monthObj,
      };
    }


    var departTree = xmSelect.render({
      el: "#rangeDepart",
      name: 'org_id',
      autoRow: true,
      filterable: true,
      tips: '请选择',
      radio: true,
      tree: {
        show: true,
        showFolderIcon: true,
        showLine: true,
        indent: 20,
        expandedKeys: [-3],
        //是否严格遵守父子模式
        strict: false,
      },
      height: "200px",
      data: [],
      //文本显示模式
      //处理方式
    });

    $.ajax({
      url: '{:url("statistics/get_person")}',
      type: "post",
      data: {},
      success: function (res) {
        departTree.update({ data: res })
      }
    })



    $(".date-flex div").click(function () {
      let type = $(this).prop("dataset").type;
      if (type == "today") {
        $("#select_date").val(`${dateObj.today} - ${dateObj.today}`);
        $("#addWechatTime").val(`${dateObj.today} - ${dateObj.today}`);
      } else if (type == "yesterday") {
        $("#select_date").val(`${dateObj.yesterday} - ${dateObj.yesterday}`);
        $("#addWechatTime").val(`${dateObj.yesterday} - ${dateObj.yesterday}`);
      } else if (type == "week") {
        $("#select_date").val(
          `${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`
        );
        $("#addWechatTime").val(
          `${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`
        );
      } else if (type == "lastWeek") {
        $("#select_date").val(
          `${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`
        );
        $("#addWechatTime").val(
          `${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`
        );
      } else if (type == "month") {
        $("#select_date").val(
          `${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`
        );
        $("#addWechatTime").val(
          `${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`
        );
      } else if (type == "lastMonth") {
        $("#select_date").val(
          `${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`
        );
        $("#addWechatTime").val(
          `${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`
        );
      } else {
        $("#select_date").val("");
        $("#sDate").val("");
        $("#addWechatTime").val("");
      }
      $(".selectDateBox").addClass("layui-hide");
    });

    $(".date-flex1 div").click(function () {
      let type = $(this).prop("dataset").type;
      if (type == "today") {
        itmesss = dateToYYYYMMDD(dateObj.today);
        itmesss2 = dateToYYYYMMDD(dateObj.today);
        $('#select_sDate').val(itmesss + ' - ' + itmesss2);
        $('#sDate').val(itmesss + ' - ' + itmesss2);
      } else if (type == "yesterday") {
        itmesss = dateToYYYYMMDD(dateObj.yesterday);
        itmesss2 = dateToYYYYMMDD(dateObj.yesterday);
        $('#select_sDate').val(itmesss + ' - ' + itmesss2);
        $('#sDate').val(itmesss + ' - ' + itmesss2);
      } else if (type == "week") {
        $("#select_sDate").val(
          `${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`
        );
        $("#sDate").val(
          `${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`
        );
      } else if (type == "lastWeek") {
        $("#select_sDate").val(
          `${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`
        );
        $("#sDate").val(
          `${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`
        );
      } else if (type == "month") {
        $("#select_sDate").val(
          `${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`
        );
        $("#sDate").val(
          `${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`
        );
      } else if (type == "lastMonth") {
        $("#select_sDate").val(
          `${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`
        );
        $("#sDate").val(
          `${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`
        );
      } else {
        $("#select_sDate").val("");
        $("#sDate").val("");
      }
      $(".selecstDateBox").addClass("layui-hide");
    });

    function getMondayAndSunday() {
      var today = new Date();

      //构建当前日期,格式：2022-08-22 00:00:00
      var year = today.getFullYear(); //本年
      var month = today.getMonth() + 1; //本月
      var day = today.getDate(); //本日
      var newDate = new Date(year + "/" + month + "/" + day + " 00:00:00"); //年月日拼接

      var nowTime = newDate.getTime(); //当前的时间戳
      var weekDay = newDate.getDay(); //当前星期 0.1.2.3.4.5.6 【0 = 周日】

      var oneDayTime = 24 * 60 * 60 * 1000; //一天的总ms

      // 当前星期减去天数，如今天为周五，则本周一为周五的时间戳减去4天的时间戳。但周日特殊，周一至周六是周几的到的weekDay就是几，但是周日的到的为0，需特殊处理
      var thisWeekMondayTime = (1 - weekDay) * oneDayTime + nowTime; //本周一的时间戳
      if (weekDay == 0) {
        // weekDay = 0 为周日，此时本周一时间为周日减去6天的时间
        thisWeekMondayTime = nowTime - 6 * oneDayTime;
      }

      var thisWeekSundayTime = thisWeekMondayTime + 6 * 24 * 60 * 60 * 1000; // 本周日

      var lastWeekMondayTime = thisWeekMondayTime - 7 * oneDayTime; // 上周一
      var lastWeekSundayTime = thisWeekMondayTime - oneDayTime; // 上周日

      var res = {
        thisWeekMonday: dateToYYYYMMDD(thisWeekMondayTime),
        thisWeekSunday: dateToYYYYMMDD(thisWeekSundayTime),
        lastWeekMonday: dateToYYYYMMDD(lastWeekMondayTime),
        lastWeekSunday: dateToYYYYMMDD(lastWeekSundayTime),
      };
      return res;
    }

    function getMonthFirstDayAndLastDay() {
      var date = new Date();
      // 值得注意的是，如果day取值为0，意味着取的是date时间的上一个月的最后一天，简单理解：date当前月的第一天，再减去一天
      var thisMonthFirstDay = date.setDate(1); // 本月第一天
      var thisMonthLastDay = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
      ); // 本月最后一天

      var lastMonthFirstDay = new Date(
        date.getFullYear(),
        date.getMonth() - 1,
        1
      ); // 上月第一天

      var lastMonthLastDay = date.setDate(0); // 上月最后一天
      // var day = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
      // var lastMonthLastDay = new Date(date.getFullYear(), date.getMonth() - 1, day) // 上月最后一天
      var res = {
        thisMonthFirstDay: dateToYYYYMMDD(thisMonthFirstDay),
        thisMonthLastDay: dateToYYYYMMDD(thisMonthLastDay),
        lastMonthFirstDay: dateToYYYYMMDD(lastMonthFirstDay),
        lastMonthLastDay: dateToYYYYMMDD(lastMonthLastDay),
      };
      return res;
    }

    function dateToYYYYMMDD(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      var d = time.getDate();
      d = d > 9 ? d : "0" + d;

      return y + "/" + m + "/" + d;
    }

    window.parent.ajaxslist = function () {
      ajaxlist();
    };
    ajaxlist();
    function ajaxlist() {
      $.ajax({
        type: "post",
        url: '{:url("statistics/fieldList")}',
        data: {
          type: 1,
        },
        success: function (res) {
          data = res.data;
          tableData = data;
          var cols = [[]];
          $.each(data, function (key, val) {
            if (key == "share_count") {
              if (val["show"] == 1) {
                cols[0].push({
                  field: key,
                  title: val["name"],
                  width: val["width"],
                  align: "center",
                  templet: "#share_count",
                });
              }
            } else if (key == "explain_count") {
              if (val["show"] == 1) {
                cols[0].push({
                  field: key,
                  title: val["name"],
                  width: val["width"],
                  align: "center",
                  templet: "#explain_count",
                });
              }
            } else {
              if (val["show"] == 1) {
                cols[0].push({
                  field: key,
                  title: val["name"],
                  width: val["width"],
                  align: "center",
                  show: val["show"],
                });
              }
            }
          });
          cols[0].push({
            title: "",
            width: 30,
            align: "center",
            fixed: "right",
          });
          let url = '{:url("statistics/behaviorStatisticsData")}';
          table.render({
            elem: "#list",
            url: url,
            page: true,
            height: bodyH,
            cols: cols,
            id: "tablelist",
            limit: 50,
          });
        },
      });
    }

    $(".lay-setting").click(function () {
      let arr = [];
      $.each(data, function (key, val) {
        arr.push({ ...val, field: key });
      });
      localStorage.setItem('XQ$SORT', '1');
      window.parent.dialogFunc(arr, 1);
    });

    function setYMD(time) {
      let dateTime = new Date(time);
      let year = dateTime.getFullYear();
      let Month = dateTime.getMonth() + 1;
      let days = dateTime.getDate();
      return `${year}-${Month > 9 ? Month : "0" + Month}-${days > 9 ? days : "0" + days}`;
    }

    var dateArr = {};
    var today = new Date().getTime();
    var oneTime = 24 * 60 * 60 * 1000;
    var threeDay1 = today - 3 * oneTime;
    var sevenDay1 = today - 6 * oneTime;
    var oneMonth = today - 30 * oneTime;
    dateArr = {
      nowS: setYMD(today),
      nowE: setYMD(today),
      threeDayS: setYMD(threeDay1),
      threeDayE: setYMD(today),
      sevenDayS: setYMD(sevenDay1),
      sevenDayE: setYMD(today),
      oneMonthS: setYMD(oneMonth),
      oneMonthE: setYMD(today),
    };

    $("#timeBtn").on("click", function (e) {
      if (!!(e.target.localName != "input")) return;
      let o = document.querySelector("#timeBtn").children;
      if (e.target.classList.contains("layui-btn-primary") == true) {
        for (var i = 0; i < o.length; i++) {
          o[i].className = "layui-btn";
        }
        $("#sDate").val("");
        $("#eDate").val("");
        return;
      } else {
        for (var i = 0; i < o.length; i++) {
          o[i].className = "layui-btn";
        }
        e.target.className = "layui-btn layui-btn-primary";
        if (!!(e.target.className.indexOf("layui-btn-primary") > 0)) {
          if (e.target.value == "今日") {
            $("#sDate").val(dateArr.nowS);
            $("#eDate").val(dateArr.nowE);
          } else if (e.target.value == "3天") {
            $("#sDate").val(dateArr.threeDayS);
            $("#eDate").val(dateArr.threeDayE);
          } else if (e.target.value == "7天") {
            $("#sDate").val(dateArr.sevenDayS);
            $("#eDate").val(dateArr.sevenDayE);
          } else {
            $("#sDate").val(dateArr.oneMonthS);
            $("#eDate").val(dateArr.oneMonthE);
          }
        }
      }
    });

    form.on("submit(table-search)", function (data) {
      let field = data.field;
      let element = $(".layui-btn-primary");
      if (element && element[0]) {
        let el = element[0].value;
      }
      let option = {
        where: field,
        page: {
          curr: 1,
        },
      };
      //执行重载
      table.reload("tablelist", option);
    });
    //重置
    $("#resetbtn").click(function () {
      $("#keyword").val("");
      $("#sDate").val("");
      $("#eDate").val("");
      $("#timeBtn input").attr("class", "layui-btn");
      layui.form.render();
      departTree.setValue([]);
      let option = {
        where: { keyword: "", start_date: "", end_date: "", org_id: ""},
        page: {
          curr: 1,
        },
      };
      table.reload("tablelist", option);
    });

    //导出
    $("#tablebtn").click(function () {
      let sdate = $("#sDate").val();
      let edate = $("#eDate").val();
      let keyword = $("#keyword").val();
      // let org_id = $("#org_id").val();
      let org_id = departTree.getValue();
      orgid = org_id.length == 0 ? '' : org_id[0].id;
      let url = "{:url('statistics/export2',['m'=>'behaviorStatisticsData'])}"

      layer.confirm('确定要导出该查询结果么？', function () {
        $.post(url, { start_date: sdate, end_date: edate, keyword: keyword, org_id: orgid }, function (rs) {
          if (typeof rs == 'string') rs = JSON.parse(rs);
          layer.msg(rs.msg);
        })
      })
    });
    setTimeout(function () {
      //调用内容
      table.on("tool(datalist)", function (obj) {
        switch (obj.event) {
          case "noFinishList":
            layer.open({
              type: 2,
              title: ["调用内容", "color:#333333;background-color:#D8E6F1;"],
              content:
                '{:url("statistics/behaviorStatisticsShareLog")}?index=' +
                obj.data.index,
              resize: false,
              area: ["80%", "80%"],
            });
            break;
          case "explain_count":
            layer.open({
              type: 2,
              title: ["合同客户", "color:#333333;background-color:#D8E6F1;"],
              content:
                '{:url("statistics/addWechat")}?type=explain_count&index=' +
                obj.data.index,
              resize: false,
              area: ["80%", "80%"],
            });
            break;
        }
      });
    }, 100);

    $('#behavior-export-list').click(function () {
      layer.open({
        type: 2,
        area: ['600px', '600px'],
        content: '{:url("statistics/exportList2",array("type"=>"behaviorStatisticsData"))}'
      });
    });
  });
</script>
{/block}