check_xdata_xfrontend/index.html
2021-09-23 14:13:51 +08:00

635 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css"><!-- layui样式文件 -->
<script src="js/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<style>
*{margin: 0; padding: 0;}
.box{ margin: 60px 60px 0 60px; }
.delete { width: 16px; height: 16px; margin-top: 10px; cursor: pointer; padding-right: 15px; }
.delete:hover { color: red; }
.content-box { display: flex; justify-content: space-around; width: 100%; margin-top: 90px; }
.info-content-box { width: 600px; height: 400px; background-color: #b0b0b0; overflow-y: auto; padding: 15px; }
.title { font-size: 17px; padding: 15px 0; }
.zhezhao { width: 100%; height: 100%; top: 0; background-color: rgba(000, 000, 000, 0.5); position: fixed; z-index: 1000; }
.popup-box { width: 500px; height: 230px; background-color:#fff; position: fixed; margin: auto; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999; }
.but-box { width: 100%; display: flex; justify-content: space-evenly; align-items: center; border-radius: 8px; }
.but-box div { cursor: pointer;width: 40px;height: 30px;line-height: 30px;text-align: center;margin: 0 8px;padding: 0 16px;font-weight: 400;font-size: 14px;text-shadow: none;border-radius: 2px; }
.but-qd { background: #3d90ff; color: #fff; }
.but-qx { border: 1px solid #d9d9d9; color: #42546d; }
.baocun-tit { padding: 16px 24px; text-align: center; }
.save-list-but { float: right; cursor: pointer; }
.save-list-box { width: 300px; height: 100%; position: fixed; right: 0; top: 0; z-index: 99999; background: #fff;}
.save-list-tit-box { padding: 16px; text-align: center; border-bottom: 1px solid #eee;}
.save-list-content-box { height: calc(100% - 110px); overflow-y: auto; }
.save-list { padding: 16px; cursor: pointer;}
.save-list:hover { background-color: #f1f8ff; }
.save-list-but-box { width: 100%; display: flex; align-items: center; border-radius: 8px; }
.save-list-but-box div{ cursor: pointer; background-color: #FF5722; color: #fff;width: 100%;height: 45px;line-height: 45px;text-align: center;margin: 0 8px;padding: 0 16px;font-weight: 400;font-size: 14px;text-shadow: none;border-radius: 2px; }
.baseevent-box { width: 600px; height: 400px; background-color: #fff; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
.baseevent-tit-box { padding: 16px; text-align: center; }
.baseevent-checkbox-box { margin: 30px; }
.baseevent-checkbox-box input { }
.layui-form-checkbox[lay-skin=primary]{ margin-top: 10px; }
.baseevent-but-box { display: flex; justify-content: end; align-items: center; margin: 0 30px; }
.baseevent-but-box div { cursor: pointer;width: 40px;height: 30px;line-height: 30px;text-align: center;margin: 0 8px;padding: 0 16px;font-weight: 400;font-size: 14px;text-shadow: none;border-radius: 2px; }
.baseevent-but-qb { border: 1px solid #d9d9d9; color: #42546d; }
.baseevent-but-qx { background: #FF5722; color: #fff; }
.baseevent-but-ok { background: #3d90ff; color: #fff; }
.baseevent-but-qc { background: #FF5722; color: #fff; }
.cankao {display: flex; justify-content: right; position: relative;top: 16px; right: 30px; }
.save-list { display: flex; justify-content: space-between; align-items: center; }
</style>
</head>
<body>
<a href="http://10.0.0.5/leguwiki/?app=view&id=588&key=" target="_blank" class="cankao">基础埋点参考</a>
<div class="box">
<form class="layui-form layui-form-pane" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">游戏名</label>
<div class="layui-input-block">
<input type="text" name="game" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">数据库名</label>
<div class="layui-input-inline">
<input type="text" name="db_name" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">事件名</label>
<div class="layui-input-inline">
<input type="text" name="eventname" autocomplete="off" class="layui-input">
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal chaxun">查询</button>
<button type="button" class="layui-btn save">保存</button>
<div class="save-list-but">
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="layui-form-item" pane="">
<label class="layui-form-label">是否唯一</label>
<div class="layui-input-block">
<input type="radio" name="only" value="true" title="是">
<input type="radio" name="only" value="false" title="否" checked="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="margin-top: 15px">事件属性</label>
<div style="display:flex; flex-flow:row wrap; align-items: center;" id="eventattr-box">
</div>
</div>
<button type="button" class="layui-btn layui-btn-sm baseevent"><i class="layui-icon layui-icon-add-1"></i> 默认属性</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal eventattr-add" style="float: right;"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
<div class="layui-form-item" style="padding-top: 15px">
<label class="layui-form-label" style="margin-top: 15px">其他条件</label>
<div style="display:flex; flex-flow:row wrap; align-items: center;" id="condition-box">
</div>
</div>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal condition-add" style="float: right;"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
</form>
<div class="content-box">
<div class="left-box">
<p class="title">通过</p>
<div class="info-content-box adopt-box">
<!-- <p style="color:green;font-size:17px;">通过:字段#province 是期望的类型</p> -->
</div>
</div>
<div class="left-box">
<p class="title">错误</p>
<div class="info-content-box error-box">
<!-- <p style="color:red;font-size:17px;">错误字段online_ts 期望integer类型得到</p> -->
</div>
</div>
</div>
</div>
<div class="zhezhao baocun-pup" style="display: none;">
<div class="popup-box">
<p class="baocun-tit">保存报表</p>
<div class="layui-form-item" style="padding: 30px 15px;">
<div class="layui-form-item">
<label class="layui-form-label">保存名称:</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" class="layui-input save-title">
</div>
</div>
</div>
<div class="but-box">
<div class="but-qx">取消</div>
<div class="but-qd">确定</div>
</div>
</div>
</div>
<div class="zhezhao save-pop" style="display: none;">
<div class="save-list-box">
<p class="save-list-tit-box">保存列表</p>
<div class="save-list-content-box">
</div>
<div class="save-list-but-box">
<div class="save-list-qx">
取消
</div>
</div>
</div>
</div>
<div class="zhezhao baseevent-pop" style="display: none;">
<div class="baseevent-box">
<p class="baseevent-tit-box">基础属性</p>
<form class="layui-form" action="" lay-filter="baseeventexample">
<div class="baseevent-checkbox-box">
</div>
</form>
<div class="baseevent-but-box">
<div class="baseevent-but-qc">清除</div>
<div class="baseevent-but-qb">全选</div>
<div class="baseevent-but-qx">取消</div>
<div class="baseevent-but-ok">确定</div>
</div>
</div>
</div>
</body>
</html>
<script id="eventattr-box-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div style="display: flex; margin-top: 15px; ">
<div class="layui-input-inline">
<input type="text" name="eventattr" lay-verify="required" placeholder="请输入事件属性名" autocomplete="off" data-index="{{index}}" class="layui-input eventattr-input" value="{{item.attrname}}">
</div>
<div class="layui-input-inline">
<select name="quiz2" class="eventattr-select" lay-filter="eventattr_filter">
<option value="">请选择事件属性</option>
{{# if(item.v == 'string'){ }}
<option value="string_{{index}}" selected="">字符串</option>
{{# } else { }}
<option value="string_{{index}}">字符串</option>
{{# } }}
{{# if(item.v == 'integer'){ }}
<option value="integer_{{index}}" selected="">数值</option>
{{# } else { }}
<option value="integer_{{index}}">数值</option>
{{# } }}
{{# if(item.v == 'array'){ }}
<option value="array_{{index}}" selected="">数组</option>
{{# } else { }}
<option value="array_{{index}}">数组</option>
{{# } }}
</select>
</div>
<div class="delete attrname-del" data-index="{{index}}">
<i class="layui-icon layui-icon-delete"></i>
</div>
</div>
{{# }); }}
</script>
<script id="condition-box-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div style="display: flex; margin-top: 15px;">
<div class="layui-input-inline">
<input type="text" name="condition_name" lay-verify="required" placeholder="请输入属性名" autocomplete="off" data-index="{{index}}" class="layui-input conditionname-input" value="{{item.conditionname}}">
</div>
<div class="layui-input-inline">
<input type="text" name="condition_val" lay-verify="required" placeholder="请输入值" autocomplete="off" data-index="{{index}}" class="layui-input v-input" value="{{item.v}}">
</div>
<div class="delete condition-del" data-index="{{index}}">
<i class="layui-icon layui-icon-delete"></i>
</div>
</div>
{{# }); }}
</script>
<script id="save-list-content-box-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="save-list" data-index="{{index}}">
<span>{{item.title}}</span> <span class="save-list-del" data-title="{{item.title}}"><i class="layui-icon layui-icon-delete"></i></span>
</div>
{{# }); }}
</script>
<script id="baseevent-checkbox-box-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
{{# if(item.on == 1){ }}
<input type="checkbox" name="{{item.title}}" lay-skin="primary" title="{{item.title}}" checked="">
{{# } else { }}
<input type="checkbox" name="{{item.title}}" lay-skin="primary" title="{{item.title}}">
{{# } }}
{{# }); }}
</script>
<script>
var eventarr = [];
var conditionarr = [];
$(document).on('click','.eventattr-add',function(){
var arr = {
'attrname':'',
'v':''
}
eventarr.push(arr);
laytpldata("#eventattr-box-dot",eventarr,"#eventattr-box");
layui.form.render();
});
$(document).on("click",'.attrname-del',function(){
var index = $(this).attr('data-index');
eventarr.splice(index,1);
laytpldata("#eventattr-box-dot",eventarr,"#eventattr-box");
layui.form.render();
});
$(document).on('click','.condition-add',function(){
var arr = {
'conditionname':'',
'v':''
}
conditionarr.push(arr);
laytpldata("#condition-box-dot",conditionarr,"#condition-box");
layui.form.render();
});
$(document).on("click",'.condition-del',function(){
var index = $(this).attr('data-index');
conditionarr.splice(index,1);
laytpldata("#condition-box-dot",conditionarr,"#condition-box");
layui.form.render();
});
laytpldata("#eventattr-box-dot",eventarr,"#eventattr-box");
laytpldata("#condition-box-dot",conditionarr,"#condition-box");
$(document).on('blur','.eventattr-input',function(){
var index = $(this).attr('data-index');
eventarr[index]['attrname'] = $(this).val();
});
layui.form.on('select(eventattr_filter)',function(data){
var value = data.value;
var valarr = value.split('_');
var index = valarr[1];
var val = valarr[0];
eventarr[index]['v'] = val;
});
$(document).on('blur','.conditionname-input',function(){
var index = $(this).attr('data-index');
conditionarr[index]['conditionname'] = $(this).val();
});
$(document).on('blur','.v-input',function(){
var index = $(this).attr('data-index');
conditionarr[index]['v'] = $(this).val();
});
$(document).on('click','.but-qx',function(){
$('.save-title').val('');
$(".baocun-pup").hide();
});
$(document).on('click','.save',function(){
$(".baocun-pup").show();
});
$(document).on('click','.save-list-qx',function(){
$('.save-pop').hide();
});
$(document).on('click','.baseevent-but-qx',function(){
baseeventdata = {};
$('.baseevent-pop').hide();
});
var baseeventdata={};
$(document).on('click','.baseevent-but-ok',function(){
var fromdata = layui.form.val('baseeventexample');
var defaultfield = {};
for(let i in fromdata){
defaultfield[i] = default_field[i]
}
baseeventdata = defaultfield;
$('.baseevent-pop').hide();
})
var default_field;
$(document).on('click','.baseevent',function(){
$(".baseevent-pop").show();
});
$.ajax({
url: 'http://10.0.0.77:7997/v1/check/default_field',
type:'get',
dataType: 'json',
async:true,
contentType:'application/json',
beforeSend: function () {
// loading 显示
},
success:function(d){
default_field = d.data;
var listarr = [];
if(JSON.stringify(baseeventdata) != "{}"){
for(let i in default_field){
var arr= {
'title': i,
'on': 0
}
for(let j in baseeventdata){
if(i == j){
arr['on'] = 1;
break;
}
}
listarr.push(arr);
}
}else {
for(let i in default_field){
var arr = {
'title': i,
'on':1
}
listarr.push(arr);
}
}
console.log(listarr);
baseeventdata = default_field;
laytpldata("#baseevent-checkbox-box-dot",listarr,".baseevent-checkbox-box");
layui.form.render();
},
error:function(error){
layer.msg('条件错误');
}
});
$(document).on('click','.baseevent-but-qb',function(){
// console.log(default_field);
var listarr = [];
for(let i in default_field){
var arr = {
'title': i,
'on':1
}
listarr.push(arr);
}
laytpldata("#baseevent-checkbox-box-dot",listarr,".baseevent-checkbox-box");
layui.form.render();
});
$(document).on('click','.baseevent-but-qc',function(){
// console.log(default_field);
var listarr = [];
for(let i in default_field){
var arr = {
'title': i,
'on':0
}
listarr.push(arr);
}
laytpldata("#baseevent-checkbox-box-dot",listarr,".baseevent-checkbox-box");
layui.form.render();
});
$(document).on('click','.save-list-del',function(e){
e.stopPropagation();
var title = $(this).attr("data-title");
var data = {
title: title
}
$.ajax({
url: 'http://10.0.0.77:7997/v1/check/del_template',
type:'post',
dataType: 'json',
async:true,
data: JSON.stringify(data),
contentType:'application/json',
beforeSend: function () {
// loading 显示
},
success:function(d){
if(d.data){
layer.msg('删除成功');
posttemplate();
}
},
error:function(error){
layer.msg('条件错误');
}
});
});
$(document).on("click",'.save-list',function(){
var index = $(this).attr('data-index');
var data = savelist[index];
var props = data.check.props;
var where = data.check.where;
var eventData=[];
var conditionData=[];
for(let i in props){
var arr = {
'attrname':i,
'v':props[i]
}
eventData.push(arr);
}
eventarr = eventData;
for(let i in where){
var arr = {
'conditionname':i,
'v':props[i]
}
conditionData.push(arr);
}
conditionarr = conditionData;
layui.form.val('example',{
'game':data['game'],
'db_name':data['db_name'],
'eventname':data['check']['event_name'],
'only':data['check']['is_unique'],
});
laytpldata("#eventattr-box-dot",eventarr,"#eventattr-box");
laytpldata("#condition-box-dot",conditionarr,"#condition-box");
layui.form.render();
$('.save-pop').hide();
});
var savelist;
$(document).on('click','.save-list-but',function(){
$('.save-pop').show();
posttemplate();
});
function posttemplate(){
$.ajax({
url: 'http://10.0.0.77:7997/v1/check/template',
type:'get',
dataType: 'json',
async:true,
contentType:'application/json',
beforeSend: function () {
// loading 显示
},
success:function(d){
savelist = d.data;
laytpldata("#save-list-content-box-dot",d.data,".save-list-content-box");
},
error:function(error){
layer.msg('条件错误');
}
});
}
$(document).on('click','.but-qd',function(){
var fromdata = layui.form.val('example');
var is_unique;
if(fromdata.eventname == "true"){
is_unique = true
}else {
is_unique = false
}
var props={},where={};
for(let i in eventarr){
props[eventarr[i]['attrname']] = eventarr[i]['v']
}
for(let i in conditionarr){
where[conditionarr[i]['conditionname']] = conditionarr[i]['v']
}
var check={
'event_name':fromdata.eventname,
'is_unique':is_unique,
'props':props,
'where':where
};
var data = {
check:check,
title: $('.save-title').val()
}
$.ajax({
url: 'http://10.0.0.77:7997/v1/check/save?game='+fromdata.game+'&db_name='+fromdata.db_name,
type:'post',
data: JSON.stringify(data),
dataType: 'json',
async:true,
contentType:'application/json',
beforeSend: function () {
// loading 显示
},
success:function(d){
if(d.data == true){
layer.msg('保存成功');
$('.save-title').val('');
$(".baocun-pup").hide();
}
},
error:function(error){
layer.msg('条件错误');
}
});
});
$(document).on('click','.chaxun',function(){
var fromdata = layui.form.val('example');
var is_unique;
console.log(fromdata);
if(fromdata.only == "true"){
is_unique = true
}else {
is_unique = false
}
var props={},where={};
for(let i in eventarr){
props[eventarr[i]['attrname']] = eventarr[i]['v']
}
for(let i in conditionarr){
where[conditionarr[i]['conditionname']] = conditionarr[i]['v']
}
var data={
'event_name':fromdata.eventname,
'is_unique':is_unique,
'props':props,
'where':where,
'default_field':baseeventdata
};
$.ajax({
url: 'http://10.0.0.77:7997/v1/check/check?game='+fromdata.game+'&db_name='+fromdata.db_name,
type:'post',
data: JSON.stringify(data),
dataType: 'json',
async:true,
contentType:'application/json',
beforeSend: function () {
// loading 显示
},
success:function(d){
$(".adopt-box").html("");
$(".error-box").html("");
var data=d.data;
var pass_list = data.pass_list;
var fail_list = data.fail_list;
for(let i in pass_list){
$(".adopt-box").append(pass_list[i]);
}
for(let i in fail_list){
$(".error-box").append(fail_list[i]);
}
},
error:function(error){
layer.msg('条件错误');
}
});
})
//模板
function laytpldata(mbid ,data,wzid,callback){
var getTpl = $(mbid).html();
layui.laytpl(getTpl).render(data, function(html){
wzid && $(wzid).html(html);
layui.element.init(); //重新渲染
callback && callback(html);
});
}
</script>