scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
							{extend name="public/layout"}
{block name="body"}
<style>
  .layui-layer-content {
    overflow: unset !important;
  }

  tr td:first-child a {
    float: right;
  }

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

  td a {
    margin-left: 5px;
    margin-right: 5px;
    color: blue;
  }

  td a:hover {
    color: rgb(85, 26, 139);
  }

  #edit .layui-form-item {
    padding: 0 10px;
  }

  #user {
    height: 100%;
    overflow: auto;
  }

  #user ul {
    padding-left: 10px;
    padding-right: 10px;
  }

  #user li {
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
  }

  .none {
    display: none;
  }
  .layui-tab-title .layui-this {
    background-color: #249EFB;
    color: #fff;
  }

  .layui-tab-title .layui-this:after {
    border-bottom: none;
    border: none;
  }

  .layui-tab-title li {
    background-color: #F2F2F2;
    margin: 0px 5px;
    padding: 0px 20px;
  }
  .layui-btn-xs,.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}
  .layui-btn-danger,.layui-btn-danger:hover{
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}
  .layui-btn-border,.layui-btn-border:hover {
    background-color: #fff;
    color: #249EFB;
    border: 1px solid #249EFB;
  }
</style>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12" style="background-color:#ffffff">
      <div class="tplay-body-div">
        <div class="layui-tab" lay-filter="title">
          <ul class="layui-tab-title">
            <li style="margin-left: 0px;">
              <a href="{:url('broad/promoter')}"></a>新建推广</a>
            </li>
            <li class="layui-this">
              数据报表
            </li>
          </ul>
        </div>
        <div class="layui-card-body">
          <div class="layui-form">
            <div class="layui-inline">
              <button class="layui-btn layui-btn-border" data-type="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新建场次</button>
              <span style="color:#afb1b6;margin-left: 20px;">当前页面可统计在某个时间区间内员工的推广情况，以及监看客户的实时行为轨迹，并同步给员工。</span>
            </div>
          </div>
          <table class="layui-hide" id="data" lay-filter="dataTable"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="add" class="none">
  <div class="layui-tab" style="padding: 10px 20px 0px;">
    <ul class="layui-tab-title">
      <li class="layui-this" style="margin-left: 0px;">自定义时间新建</li>
      <li>按直播活动新建</li>
    </ul>
    <div class="layui-tab-content" style="margin-top: 10px;">
      <div class="layui-tab-item layui-show">
        <form class="layui-form">
          <div class="layui-form-item">
            <label class="layui-form-label" for="title">时间区间：</label>
            <div class="layui-input-block">
              <input type="text" name="date" id="date" placeholder="选择时间区间" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" for="title">活动标题：</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="设置活动标题" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-form-item" style="float: right;margin-right: 50px;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="date">确定</button>
          </div>
        </form>
      </div>
      <div class="layui-tab-item">
        <form class="layui-form">
          <div class="layui-form-item">
            <label class="layui-form-label" for="title">开始活动：</label>
            <div class="layui-input-block">
              <select name="start">
                <option value="">请选择开始时间</option>
                {volist name="course" id="item"}
                <option value="{$item.cid}">{$item.title}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" for="title">结束活动：</label>
            <div class="layui-input-block">
              <select name="end">
                <option value="">请选择结束时间</option>
                {volist name="course" id="item"}
                <option value="{$item.cid}">{$item.title}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" for="title">活动标题：</label>
            <div class="layui-input-inline">
              <input type="text" name="title" placeholder="设置活动标题" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-form-item" style="float: right;margin-right: 50px;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="course">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div id="edit" style="text-align: center;" class="none">
  <form class="layui-form">
    <div class="layui-form-item">
      <input type="text" name="date" id="date1" placeholder="时间区间" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-item">
      <input type="text" name="title" placeholder="场次标题" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <input type="hidden" name="id" value="">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="edit">确定</button>
      </div>
    </div>
    <input type="hidden" name="type" value="1">
  </form>
</div>
<div id="course" style="width: 600px;height:400px;" class="none">
</div>
<div id="user" class="none">
  <ul class="flow-default" id="behaver"></ul>
</div>
</body>
{/block}
{block name="js"}
<script src="__STATIC__/js/echarts.min.js"></script>
<script type="text/html" id="scene_title">
  {{d.title}}
  <a title="删除" lay-event="del"  class="layui-btn layui-btn-xs">删除</a>
  <a title="修改" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-danger">修改</a>
</script>
<script type="text/html" id="scene">
  {{d.start_date}} - {{d.end_date}}
</script>
<script type="text/html" id="tongji">
  <a title="活动监控" lay-event="course" class="layui-btn layui-btn-xs">PK监控</a>
  <a title="客户监控" lay-event="user" class="layui-btn layui-btn-xs">客户行为</a>
  <a title="排行榜" lay-event="rank" class="layui-btn layui-btn-xs">数据排行</a>
</script>
<script type="text/html" id="op">
  <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="show" {{ d.show == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="team">
  <a lay-event="team">{{d.promoter}}</a>
</script>
<script>
  var indexurl = '{:url("broad/promoter_scene")}';
  var delurl = '{:url("promoter/delScene")}';
  var addurl = '{:url("promoter/addScene")}';
  var editurl = '{:url("promoter/editScene")}';
  var courseurl = '{:url("promoter/courseStatistics")}';
  var userurl = '{:url("promoter/userBehavior")}';
  var rankrurl = '{:url("promoter/rank")}';
  var showurl = '{:url("promoter/show")}';
  var myChart = echarts.init(document.getElementById('course'));
  var option = {
    tooltip: {},
    legend: {
      data: ['邀约人数', '预约人数', '观看人数', '下单人数']
    },
    xAxis: {
      data: []
    },
    yAxis: {
      minInterval: 1
    },
    series: [{
      name: '邀约人数',
      type: 'bar',
      data: []
    }, {
      name: '预约人数',
      type: 'bar',
      data: []
    }, {
      name: '观看人数',
      type: 'bar',
      data: []
    }, {
      name: '下单人数',
      type: 'bar',
      data: []
    }]
  };
  var t;
  layui.use(['table', 'form', 'laydate', 'element', 'flow'], function () {
    var form = layui.form
            , table = layui.table
            , laydate = layui.laydate
            , $ = layui.jquery
            , element = layui.element
            , flow = layui.flow
            , active = {
      reload: function () {
        //执行重载
        table.reload('dataTable', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      }
      , del: function () {
        var id = this.data.id;
        layer.confirm('确定删除该场次么？',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function () {
          $.post(delurl, { id: id }, function (rs) {
            if (rs.code == 1) {
              layer.msg(rs.msg, { anim: 6 });
            } else {
              layer.msg(rs.msg, { anim: 0 });
              active.reload();
            }
          });
        });
      }
      , add: function () {
        layer.open({
          type: 1
          , content: $('#add')
          , title: ['新建', 'color:#333333;background-color:#D8E6F1;']
          , resize: false,
          area: ['50%','50%']
        });
      }
      , edit: function () {
        var data = this.data;
        var input = $('#edit').find('input');
        input[0].value = data.start_date + ' - ' + data.end_date;
        input[1].value = data.title;
        input[2].value = data.id;
        layer.open({
          type: 1
          , content: $('#edit')
          , title: ['修改场次', 'color:#333333;background-color:#D8E6F1;'],
          resize: false,
        });
      }
      , course: function () {
        var id = this.data.id;
        $.post(courseurl, { id: id }, function (rs) {
          if (rs.code == 1) {
            layer.msg(rs.msg, { anim: 6 });
          } else {
            option.xAxis.data = rs.data.team;
            option.series[0].data = rs.data.user;
            option.series[1].data = rs.data.appoint;
            option.series[2].data = rs.data.join;
            option.series[3].data = rs.data.order;
            myChart.setOption(option);
            layer.open({
              type: 1
              , area: ['80%', '80%']
              , content: $('#course')
              , title: ['活动监控', 'color:#333333;background-color:#D8E6F1;']
              , closeBtn: 0
              , shadeClose: true
              , resize: false,
            });
          }
        });
      }
      , user: function () {
        var id = this.data.id;
        var max = 0;
        $('#behaver').html('');
        flow.load({
          elem: '#behaver' //流加载容器
          , done: function (page, next) {
            var lis = [];
            $.post(userurl, { id: id, page: page, max: max }, function (res) {
              max = res.max;
              layui.each(res.data, function (index, item) {
                lis.push('<li>' + item + '</li>');
              });
              next(lis.join(''), page < res.pages);
            });
          }
        });
        layer.open({
          type: 1
          , area: ['300px', '450px']
          , content: $('#user')
          , title: ['活动监控', 'color:#333333;background-color:#D8E6F1;']
          , closeBtn: 0
          , shadeClose: true
          , resize: false,
        });
      }
      , rank: function () {
        var id = this.data.id;
        layer.open({
          type: 2
          , area: ['380px', '560px']
          , content: rankrurl + '?id=' + id
          , title: ['排行榜', 'color:#333333;background-color:#D8E6F1;']
          , closeBtn: 0
          , shadeClose: true
          , resize: false,
        });
      }
    };
    element.on('tab(title)', function (data) {
      if ($(this).has('a').length) {
        location.href = $(this).find('a').eq(0).attr('href');
      }
    });
    laydate.render({
      elem: "#date",
      type: 'date',
      range: true
    });
    laydate.render({
      elem: "#date1",
      type: 'date',
      range: true
    });
    //展示已知数据
    t = table.render({
      elem: '#data'
      , page: true
      , height: 'full-180'
      , url: indexurl
      , cols: [[ //标题栏
        { field: 'title', templet: '#scene_title', title: '场次标题' }
        , { field: 'scene', templet: '#scene', title: '活动时间区间' }
        , { field: 'data', templet: '#tongji', title: '推广数据' }
        , { field: 'show', title: '在员工端展示', toolbar: '#op', width: 120, align: 'center', fixed: 'right' }
      ]]
      , id: 'dataTable'
    });

    $('.layui-form .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    table.on('tool(dataTable)', function (obj) {
      var type = obj.event;
      active[type] ? active[type].call(obj) : '';
    })

    form.on('switch(show)', function (obj) {
      var id = obj.value;
      var show = obj.elem.checked ? 1 : 0;
      if (show == 1) {
        var tobei = $(obj.elem).closest('tr').siblings('tr');
        tobei.find('input').attr('checked', false);
        tobei.find('.layui-form-switch').removeClass('layui-form-onswitch');
        tobei.find('.layui-form-switch').find('em').text('否');
      }

      $.post(showurl, { id: id, show: show }, function (rs) {
        if (rs.code == 1) {
          layer.msg(rs.msg, { anim: 6 });
        } else {
          layer.msg(rs.msg, { anim: 0 });
        }
      });
    });
    form.on('submit(course)', function (data) {
      layer.closeAll();
      var param = data.field;
      param.type = 2;
      addscene(param);
      return false;
    });
    form.on('submit(date)', function (data) {
      layer.closeAll();
      var param = data.field;
      param.type = 1;
      addscene(param);
      return false;
    });
    form.on('submit(edit)', function (data) {
      layer.closeAll();
      var param = data.field;
      $.post(editurl, param, function (rs) {
        if (rs.code == 1) {
          layer.msg(rs.msg, { anim: 6 });
        } else {
          layer.msg(rs.msg, { anim: 0 });
          active.reload();
        }
      });
      return false;
    });
    function addscene(data) {
      $.post(addurl, data, function (rs) {
        if (rs.code == 1) {
          layer.msg(rs.msg, { anim: 6 });
        } else {
          layer.msg(rs.msg, { anim: 0 });
          active.reload();
        }
      });
    }
  });
</script>
{/block}