<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户分析</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<script src="echarts.simple.min.js"></script>
<style type="text/css">
body {
font-family: 'Microsoft YaHei';
}
.my-head {
border: 1px solid #e9e9e9;
background-color: #fafafa;
color: #000000d8;
}
.mybox {
border-right: 1px solid #e9e9e9;
margin-right: 10px;
text-align: center;
font-size: 16px;
margin: 10px 0;
}
.mybox h2 {
margin-bottom: 15px;
font-weight: bold;
}
.no-border {
border: none;
}
.margin-top {
margin-top: 10px;
}
.text-right {
text-align: right;
}
.my-btn {
margin: 10px;
}
.my-head-1 {
border-bottom: 1px solid #e9e9e9;
padding-bottom: 10px;
}
.my-title {
line-height: 100%;
font-size: 16px;
padding-top: 10px;
color: #3398db;
}
.text-center {
text-align: center;
}
.article-title {
margin: 30px 0 5px 15px;
}
.article-content {
padding-top: 5px;
padding-left: 45px;
}
</style>
</head>
<body class="childrenBody">
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">用户统计</li>
<li>评价明细</li>
<!-- <li>用户属性</li> -->
<!-- <li>扫描分析</li> -->
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-card">
<div class="layui-card-header my-head">昨日关键指标：</div>
<div class="layui-card-body">
<div class="layui-row">
<div class="layui-col-md6">
<div class="mybox">
<h2>新扫码人数：</h2>
<div id="newScanNum">0</div>
</div>
</div>
<div class="layui-col-md6">
<div class="mybox no-border">
<h2>累计扫码人数：</h2>
<div id="sacanNumTotla">0</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-card-header my-head">趋势统计：</div>
<div class="layui-row margin-top my-head-1">
<div class="layui-col-md4">
<h2 class="my-title">扫描人数</h2>
</div>
<div class="layui-col-md8 text-right">
<!-- <a href="javascript:;" class="my-btn">今日</a>
<a href="javascript:;" class="my-btn">本周</a>
<a href="javascript:;" class="my-btn">本月</a>
<a href="javascript:;" class="my-btn">全年</a>
<div class="layui-inline">
<input type="text" class="layui-input " AUTOCOMPLETE="off" id="timeStart" />
<i class="layui-icon layui-icon-date" style="font-size: 22px; "></i>
</div>
~
<div class="layui-inline">
<input type="text" class="layui-input " AUTOCOMPLETE="off" id="timeEnd" />
</div> -->
</div>
</div>
<div id="mapContainer" style="width: 100%;height:400px;"></div>
</div>
<div class="layui-tab-item ">
<form class="layui-form" action="">
<div class="layui-input-inline">
<div class="layui-input-inline">
<input class="layui-input" placeholder="产品名称/用户名称/商品批次" style="margin-right: 15px;" type="text"
name="condStr" />
</div>
</div>
<div class="layui-input-inline">
<div class="layui-input-inline">
<select id="select2"></select>
</div>
</div>
<div class="layui-input-inline">
<div class="layui-input-inline">
<input class="layui-input" placeholder="评价时间" style="margin-right: 15px;" type="text" name="beginTime"
id="appraiseTime" />
</div>
</div>
<div class="layui-input-inline">
<div class="layui-input-inline">
<input class="layui-input" placeholder="评价内容" style="margin-right: 15px;" type="text"
name="commentVal" />
</div>
</div>
<button type="button" class="layui-btn" lay-submit lay-filter='commentInfoS'>搜索</button>
</form>
<table class="layui-hide" id="commentInfo" lay-filter="commentInfo"></table>
</div>
<div class="layui-tab-item ">
<div class="layui-card">
<div class="layui-card-header my-head">用户属性：</div>
<div class="layui-card-body">
<h3 class="article-title">
<i class="layui-icon layui-icon-rate-solid" style="font-size: 16px; color: #44b549;"></i>
申请条件
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
测试3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<h3 class="article-title">
<i class="layui-icon layui-icon-friends" style="font-size: 16px; color: #7cbae5;"></i>
申请条件
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
封面新闻记者随后联系到现场的民众张先生。他说，当时他所在的位置位于连云港市灌南县堆沟港镇海中洲船厂，“爆炸时，都跟地震差不多了，声音很大。”他告诉记者，他当时坐在车上，车还跳动了一下。灌河北边的灌南居民区及学校窗玻璃被震碎无数。
</p>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<h3 class="article-title">
<i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #f86161;"></i>
申请条件
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<div class="text-center " style="margin: 50px 0 20px 0;">
<a href="http://www.layui.com" class="layui-btn layui-btn-normal">去开通</a>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-card">
<div class="layui-card-header my-head">扫描明细：</div>
<div class="layui-card-body">
<h3 class="article-title">
<i class="layui-icon layui-icon-rate-solid" style="font-size: 16px; color: #44b549;"></i>
申请条件33
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
测试3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<h3 class="article-title">
<i class="layui-icon layui-icon-friends" style="font-size: 16px; color: #7cbae5;"></i>
申请条件
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<h3 class="article-title">
<i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #f86161;"></i>
申请条件2
</h3>
<p class="article-content">
<span class="layui-badge-dot layui-bg-gray"></span>
3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
</p>
<div class="text-center " style="margin: 50px 0 20px 0;">
<a href="http://www.layui.com" class="layui-btn layui-btn-normal">去开通</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadJS(url) {
document.write("<script src='" + url + "?ver=" + new Date().getTime() + "'><\/script>")
}
loadJS("../../layui/layui.js");
loadJS("../../js/ajaxhook.min.js");
loadJS("../../js/config.js");
</script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mapContainer'));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: []
}]
};
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use(['element', 'laydate', 'form', 'table', 'laytpl', 'jquery', 'layer'], function () {
var element = layui.element;
var laydate = layui.laydate,
form = layui.form,
table = layui.table,
laytpl = layui.laytpl,
$ = layui.jquery;
//获取文字统计信息
$.ajax({
url: "query_listTotal",
method: 'post',
contentType: "application/json",
data: JSON.stringify({}),
success: function (res) {
$("#newScanNum").text(res.data[0].newScanNum === null ? 0 : res.data[0].newScanNum)
$("#sacanNumTotla").text(res.data[0].scanNum === null ? 0 : res.data[0].scanNum)
}
});
var echartLable = [];
var echartValue = [];
//获取图标统计数据
$.ajax({
url: "qurey_echartTotal",
method: 'post',
contentType: "application/json",
data: JSON.stringify({}),
success: function (res) {
let data = res.data;
for (let i = 0; i < data.length; i++) {
echartLable.push(data[i].date + '月')
echartValue.push(data[i].num)
}
option.xAxis[0].data = echartLable;
option.series[0].data = echartValue;
// 回显图表
myChart.setOption(option);
}
});
// console.log(option.xAxis[0].data)
// console.log(option.series[0].data)
laydate.render({
elem: '#timeStart',
value: '2019-03-1'
});
laydate.render({
elem: '#timeEnd',
value: '2019-03-21'
});
//下拉框模板
function selectTpl(obj) {
let fun = function () {
obj.data.unshift({
value: '',
name: obj.title
});
laytpl(
`
{{# layui.each(d,function(i,item){ }}
<option value="{{item.value}}">{{item.name}}</option>
{{# })}}
`
).render(obj.data, function (html) {
$(obj.elem).html(html);
$(obj.elem).attr('name', obj.name);
form.render('select');
});
}
if (obj.url) {
$.ajax({
url: obj.url,
success: function (res) {
obj.data = res.data;
fun();
}
});
} else if (obj.data) {
fun()
}
}
//星级下拉
selectTpl({
title: '选择星级',
elem: '#select2',
name: 'gradeStar',
data: [{
name: "1级",
value: 1
}, {
name: "2级",
value: 2
}, {
name: "3级",
value: 3
}, {
name: "4级",
value: 4
}, {
name: "5级",
value: 5
}]
});
//时间
laydate.render({
elem: '#appraiseTime',
type: 'datetime'
});
//列表
table.render({
id: 'commentInfo',
elem: '#commentInfo',
url: "select_searchByPage",
method: 'post',
contentType: 'application/json',
request: {
pageName: 'pageNum',
limitName: 'pageSize'
},
toolbar: `<div>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>`,
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'tracedUserName',
title: '评价用户',
align: 'center'
}, {
field: 'goodsName',
title: '评价产品',
align: 'center'
}, {
field: 'goodsBatchNo',
title: '产品批次',
align: 'center'
}, {
field: 'gradeLevel',
title: '满意度星级',
align: 'center'
}, {
field: 'commentVal',
title: '评论内容',
align: 'center'
}, {
field: 'createTime',
title: '评论时间',
align: 'center'
}]
],
page: true
});
//搜索
form.on('submit(commentInfoS)', function (data) {
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
table.reload('commentInfo', {
where: data.field
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
//监听事件
table.on('toolbar(commentInfo)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
let data = checkStatus.data;
data = data.map(function (i) {
return i.guid
});
console.log(this);
if (data.length) {
layer.alert('确定要删除吗？', {
time: 0,
btn: ['确定', '取消'],
yes: function (index) {
layer.close(index);
switch (obj.event) {
case 'del':
$.ajax({
type: 'post',
url: "del_feedback",
data: JSON.stringify({
pkList: data
}),
contentType: 'application/json',
success: function (res) {
table.reload('commentInfo', {});
}
});
break;
};
}
});
} else {
layui.layer.tips('请勾选要删除的行', this);
}
});
});
</script>
</body>
</html>