376 lines
8.8 KiB
HTML
376 lines
8.8 KiB
HTML
{extend name="common/base"/}
|
|
<!-- 主体 -->
|
|
{block name="body"}
|
|
<style>
|
|
.sm-st {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 3px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.sm-st-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: inline-block;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
background: #eee;
|
|
border-radius: 5px;
|
|
float: left;
|
|
margin-right: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.sm-st-info {
|
|
font-size: 12px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.sm-st-info span {
|
|
display: block;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
.col-sm-2{
|
|
width: 16%;
|
|
display: inline-block;
|
|
}
|
|
.panel{
|
|
background-color: #fff;
|
|
}
|
|
.dashboard-num table {width: 100%;}
|
|
.dashboard-num td {text-align: center; padding: 16px 0; width: 20%;border-left: 1px solid #f1f1f1; position: relative;}
|
|
.dashboard-num td:nth-child(1) { border-left: none}
|
|
.dashboard-num .num-title { padding-bottom: 10px; color: #999;}
|
|
.dashboard-num .blue {font-size: 20px; font-weight: 300;}
|
|
.dashboard-num td .badge {position: absolute;top: 0; right: 0;}
|
|
.dashboard-num td .badge span { padding: 2px 4px; font-size: 12px; border-radius: 0 0 0 4px;}
|
|
.dashboard-total td {border-top: 1px solid #f1f1f1}
|
|
.dashboard-logs .layui-timeline-item {padding-bottom: 1px;}
|
|
.info-td { width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
|
.info-td {width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
|
.layui-card-body .layui-timeline-title {
|
|
padding-bottom: 0;
|
|
font-size: 14px;
|
|
}
|
|
.layui-card-body .layui-timeline-item {
|
|
padding-bottom: 5px;
|
|
}
|
|
</style>
|
|
<div class="p-3 panel">
|
|
<form class="layui-form gg-form-bar border-t border-x" style="display: inline-block;">
|
|
<div class="layui-input-inline" style="width:300px;">
|
|
<select name="area_id" class="form-control selectpicker" lay-filter="area_id">
|
|
{if $is_admin ==1}
|
|
<option value="">请选择</option>
|
|
{/if}
|
|
|
|
{volist name="arealist" id="vo"}
|
|
<option value="{$vo.area_code}">{$vo.area_name}</option>
|
|
{/volist}
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline" style="width:300px;">
|
|
<label class="layui-form-label">街道/镇</label>
|
|
<div class="layui-input-block">
|
|
<div id="demo1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-input-inline" style="width:300px;">
|
|
<label class="layui-form-label">村/社区</label>
|
|
<div class="layui-input-block">
|
|
<div id="demo2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searcharea">提交</button>
|
|
</form>
|
|
|
|
<div class="panel" id="search_box">
|
|
|
|
<div class="col-sm-2 col-xs-6">
|
|
<div class="sm-st clearfix">
|
|
<div class="sm-st-info">
|
|
<span id="num_1">{$data.num_1}</span>
|
|
加工企业和品牌企业数量
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2 col-xs-6">
|
|
<div class="sm-st clearfix">
|
|
<div class="sm-st-info">
|
|
<span id="num_2">{$data.num_2}</span>
|
|
企业农产品销量
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2 col-xs-6">
|
|
<div class="sm-st clearfix">
|
|
<div class="sm-st-info">
|
|
<span id="num_3">{$data.num_3}</span>
|
|
企业通过我们平台采购量
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2 col-xs-6">
|
|
<div class="sm-st clearfix">
|
|
<div class="sm-st-info">
|
|
<span id="num_4">{$data.num_4}</span>
|
|
本镇已录入的商户
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{if $is_admin ==1}
|
|
<div class="layui-card">
|
|
<div id="chartView" style="width: 100%;height:300px;"></div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div id="chartView2" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<script type="text/html" id="status">
|
|
<i class="layui-icon {{# if(d.status == 1){ }}layui-icon-ok{{# } else { }}layui-icon-close{{# } }}"></i>
|
|
</script>
|
|
<script type="text/html" id="is_home">
|
|
<i class="layui-icon {{# if(d.is_home == 1){ }}layui-icon-ok{{# } else { }}layui-icon-close{{# } }}"></i>
|
|
</script>
|
|
|
|
|
|
{/block}
|
|
<!-- /主体 -->
|
|
|
|
<!-- 脚本 -->
|
|
{block name="script"}
|
|
<script src="/static/assets/js/xm-select.js"></script>
|
|
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
|
|
<script>
|
|
const moduleInit = ['tool'];
|
|
var group_access = "{:session('gougu_admin')['group_access']}";
|
|
var area_id = "{$row.area_id}";
|
|
var street_id = "{$row.street_id}";
|
|
var auth_range = "{$row.auth_range}";
|
|
function gouguInit() {
|
|
var table = layui.table,tool = layui.tool, form = layui.form;
|
|
if (area_id != 0) {
|
|
street(area_id)
|
|
}
|
|
if (street_id != 0) {
|
|
village(street_id)
|
|
|
|
}
|
|
form.on('select(area_id)', function (data) {
|
|
street(data.value)
|
|
});
|
|
function street (id) {
|
|
var demo1 = xmSelect.render({
|
|
name: 'street_id',
|
|
el: '#demo1',
|
|
prop: {
|
|
name: 'name',
|
|
value: 'code',
|
|
},
|
|
data: [],
|
|
radio: true,
|
|
initValue: ["{$row.street_id}"],
|
|
disabled: group_access == 2 || group_access==4 ? true : false,
|
|
on: function (data) {
|
|
var arr = data.arr;
|
|
if(arr.length > 0){
|
|
village(arr[0]['code']);
|
|
}else{
|
|
village();
|
|
}
|
|
},
|
|
})
|
|
$.get('/api/geo/street?pcode=' + id, function (result) {
|
|
demo1.update({
|
|
data: result.data
|
|
})
|
|
if("{$row.street_id}"!=''){
|
|
village("{$row.street_id}")
|
|
}
|
|
});
|
|
}
|
|
function village (id) {
|
|
var demo2 = xmSelect.render({
|
|
name: 'village_id',
|
|
el: '#demo2',
|
|
prop: {
|
|
name: 'name',
|
|
value: 'id',
|
|
},
|
|
data: [],
|
|
radio: true,
|
|
initValue: ["{$row.village_id}"],
|
|
disabled: group_access == 2 ? true : false,
|
|
})
|
|
// var demo3 = xmSelect.render({
|
|
// name: 'brigade_id',
|
|
// el: '#demo3',
|
|
// prop: {
|
|
// name: 'brigade_name',
|
|
// value: 'id',
|
|
// },
|
|
// data: [],
|
|
// radio: true,
|
|
// })
|
|
$.get('/api/geo/village?pcode=' + id, function (result) {
|
|
demo2.update({
|
|
data: result.data
|
|
})
|
|
});
|
|
// $.get('/api/geo/brigade', function (result) {
|
|
// demo3.update({
|
|
// data: result.data
|
|
// })
|
|
// });
|
|
}
|
|
//监听搜索提交
|
|
form.on('submit(searcharea)', function(data) {
|
|
tool.get("/admin/nk.analysis/index", data.field, function (res) {
|
|
let data = res.data;
|
|
$('#num_1').text(data.num_1);
|
|
$('#num_2').text(data.num_2);
|
|
$('#num_3').text(data.num_3);
|
|
$('#num_4').text(data.num_4);
|
|
});
|
|
return false;
|
|
});
|
|
get_view_data();
|
|
}
|
|
var chartView = echarts.init(document.getElementById('chartView'));
|
|
var chartView2 = echarts.init(document.getElementById('chartView2'));
|
|
function get_view_data() {
|
|
$.ajax({
|
|
url: "/admin/api/tongji",
|
|
type: 'post',
|
|
data: {},
|
|
success: function (e) {
|
|
if (e.code == 0) {
|
|
var data_first = e.data.day_time;
|
|
var data_second = e.data.total;
|
|
var visitUser = e.data.visitUser;
|
|
var payOrderUser = e.data.payOrderUser;
|
|
var orderUser = e.data.orderUser;
|
|
var myDate = new Date();
|
|
var nowHour = myDate.getHours(); //获取当前小时数(0-23)
|
|
var xData = [];
|
|
var yData1 = [];
|
|
var yData2 = [];
|
|
|
|
ops = {
|
|
title: {
|
|
text: '订单量数据'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: data_first
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '订单量',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: data_second
|
|
}
|
|
]
|
|
};
|
|
chartView.setOption(ops);
|
|
|
|
option = {
|
|
title: {
|
|
text: '成交用户'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c}'
|
|
},
|
|
legend: {
|
|
data: ['访问', '下单', '支付']
|
|
},
|
|
series: [
|
|
{
|
|
name: '用户',
|
|
type: 'funnel',
|
|
left: '10%',
|
|
top: 60,
|
|
bottom: 60,
|
|
width: '80%',
|
|
min: 0,
|
|
max: 100,
|
|
minSize: '0%',
|
|
maxSize: '100%',
|
|
sort: 'descending',
|
|
gap: 2,
|
|
label: {
|
|
show: true,
|
|
position: 'inside'
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
fontSize: 20
|
|
}
|
|
},
|
|
data: [
|
|
{ value: payOrderUser, name: '支付' },
|
|
{ value: orderUser, name: '下单' },
|
|
{ value: visitUser, name: '访问' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartView2.setOption(option);
|
|
|
|
setTimeout(function () {
|
|
window.onresize = function () {
|
|
chartView.resize();
|
|
myChart.resize();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
</script>
|
|
{/block}
|
|
<!-- /脚本 --> |