mirror of
https://github.com/acepanel/panel.git
synced 2026-02-06 14:47:18 +08:00
330 lines
9.8 KiB
JavaScript
330 lines
9.8 KiB
JavaScript
/**
|
||
* console
|
||
*/
|
||
|
||
layui.define(function (exports) {
|
||
|
||
/*
|
||
下面通过 layui.use 分段加载不同的模块，实现不同区域的同时渲染，从而保证视图的快速呈现
|
||
*/
|
||
|
||
//区块轮播切换
|
||
layui.use(['admin', 'carousel'], function () {
|
||
var $ = layui.$
|
||
, admin = layui.admin
|
||
, carousel = layui.carousel
|
||
, element = layui.element
|
||
, device = layui.device()
|
||
|
||
//轮播切换
|
||
$('.layadmin-carousel').each(function () {
|
||
var othis = $(this)
|
||
carousel.render({
|
||
elem: this
|
||
, width: '100%'
|
||
, arrow: 'none'
|
||
, interval: othis.data('interval')
|
||
, autoplay: othis.data('autoplay') === true
|
||
, trigger: (device.ios || device.android) ? 'click' : 'hover'
|
||
, anim: othis.data('anim')
|
||
})
|
||
})
|
||
|
||
element.render('progress')
|
||
|
||
})
|
||
|
||
//数据概览
|
||
layui.use(['admin', 'carousel', 'echarts'], function () {
|
||
var $ = layui.$
|
||
, admin = layui.admin
|
||
, carousel = layui.carousel
|
||
, echarts = layui.echarts
|
||
|
||
var echartsApp = [], options = [
|
||
//今日流量趋势
|
||
{
|
||
title: {
|
||
text: '今日流量趋势',
|
||
x: 'center',
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['', '']
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
|
||
}],
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
series: [{
|
||
name: 'PV',
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: { normal: { areaStyle: { type: 'default' } } },
|
||
data: [111, 222, 333, 444, 555, 777, 3333, 33333, 55555, 88888, 33333, 3333, 7777, 11888, 28888, 38888, 58888, 42222, 39999, 28888, 17777, 9777, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1777, 999, 888, 777]
|
||
}, {
|
||
name: 'UV',
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: { normal: { areaStyle: { type: 'default' } } },
|
||
data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12312, 3333, 333, 777, 1188, 2777, 3888, 7777, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
|
||
}]
|
||
},
|
||
|
||
/*
|
||
//访客浏览器分布
|
||
{
|
||
title : {
|
||
text: '访客浏览器分布',
|
||
x: 'center',
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'left',
|
||
data:['Chrome','Firefox','IE 8.0','Safari','其它浏览器']
|
||
},
|
||
series : [{
|
||
name:'访问来源',
|
||
type:'pie',
|
||
radius : '55%',
|
||
center: ['50%', '50%'],
|
||
data:[
|
||
{value:9052, name:'Chrome'},
|
||
{value:1610, name:'Firefox'},
|
||
{value:3200, name:'IE 8.0'},
|
||
{value:535, name:'Safari'},
|
||
{value:1700, name:'其它浏览器'}
|
||
]
|
||
}]
|
||
},
|
||
*/
|
||
|
||
//新增的用户量
|
||
{
|
||
title: {
|
||
text: '最近一周新增的用户量',
|
||
x: 'center',
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: { //提示框
|
||
trigger: 'axis',
|
||
formatter: '{b}<br>新增用户：{c}'
|
||
},
|
||
xAxis: [{ //X轴
|
||
type: 'category',
|
||
data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
|
||
}],
|
||
yAxis: [{ //Y轴
|
||
type: 'value'
|
||
}],
|
||
series: [{ //内容
|
||
type: 'line',
|
||
data: [200, 300, 400, 610, 150, 270, 380],
|
||
}]
|
||
}
|
||
]
|
||
, elemDataView = $('#LAY-index-dataview').children('div')
|
||
, renderDataView = function (index) {
|
||
echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme)
|
||
echartsApp[index].setOption(options[index])
|
||
//window.onresize = echartsApp[index].resize;
|
||
admin.resize(function () {
|
||
echartsApp[index].resize()
|
||
})
|
||
}
|
||
|
||
//没找到DOM，终止执行
|
||
if (!elemDataView[0]) return
|
||
|
||
renderDataView(0)
|
||
|
||
//触发数据概览轮播
|
||
var carouselIndex = 0
|
||
carousel.on('change(LAY-index-dataview)', function (obj) {
|
||
renderDataView(carouselIndex = obj.index)
|
||
})
|
||
|
||
//触发侧边伸缩
|
||
layui.admin.on('side', function () {
|
||
setTimeout(function () {
|
||
renderDataView(carouselIndex)
|
||
}, 300)
|
||
})
|
||
|
||
//触发路由
|
||
layui.admin.on('hash(tab)', function () {
|
||
layui.router().path.join('') || renderDataView(carouselIndex)
|
||
})
|
||
})
|
||
|
||
//地图
|
||
layui.use(['carousel', 'echarts'], function () {
|
||
var $ = layui.$
|
||
, carousel = layui.carousel
|
||
, echarts = layui.echarts
|
||
|
||
var echartsApp = [], options = [
|
||
{
|
||
title: {
|
||
text: '访客地区分布',
|
||
subtext: '不完全统计'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
dataRange: {
|
||
orient: 'horizontal',
|
||
min: 0,
|
||
max: 60000,
|
||
text: ['高', '低'],
|
||
splitNumber: 0
|
||
},
|
||
series: [
|
||
{
|
||
name: '访客地区分布',
|
||
type: 'map',
|
||
mapType: 'china',
|
||
selectedMode: 'multiple',
|
||
itemStyle: {
|
||
normal: { label: { show: true } },
|
||
emphasis: { label: { show: true } }
|
||
},
|
||
data: [
|
||
{ name: '西藏', value: 60 },
|
||
{ name: '青海', value: 167 },
|
||
{ name: '宁夏', value: 210 },
|
||
{ name: '海南', value: 252 },
|
||
{ name: '甘肃', value: 502 },
|
||
{ name: '贵州', value: 570 },
|
||
{ name: '新疆', value: 661 },
|
||
{ name: '云南', value: 8890 },
|
||
{ name: '重庆', value: 10010 },
|
||
{ name: '吉林', value: 5056 },
|
||
{ name: '山西', value: 2123 },
|
||
{ name: '天津', value: 9130 },
|
||
{ name: '江西', value: 10170 },
|
||
{ name: '广西', value: 6172 },
|
||
{ name: '陕西', value: 9251 },
|
||
{ name: '黑龙江', value: 5125 },
|
||
{ name: '内蒙古', value: 1435 },
|
||
{ name: '安徽', value: 9530 },
|
||
{ name: '北京', value: 51919 },
|
||
{ name: '福建', value: 3756 },
|
||
{ name: '上海', value: 59190 },
|
||
{ name: '湖北', value: 37109 },
|
||
{ name: '湖南', value: 8966 },
|
||
{ name: '四川', value: 31020 },
|
||
{ name: '辽宁', value: 7222 },
|
||
{ name: '河北', value: 3451 },
|
||
{ name: '河南', value: 9693 },
|
||
{ name: '浙江', value: 62310 },
|
||
{ name: '山东', value: 39231 },
|
||
{ name: '江苏', value: 35911 },
|
||
{ name: '广东', value: 55891 }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
, elemDataView = $('#LAY-index-pagethree-home').children('div')
|
||
, renderDataView = function (index) {
|
||
echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme)
|
||
echartsApp[index].setOption(options[index])
|
||
window.onresize = echartsApp[index].resize
|
||
}
|
||
//没找到DOM，终止执行
|
||
if (!elemDataView[0]) return
|
||
|
||
renderDataView(0)
|
||
})
|
||
|
||
//table
|
||
layui.use('table', function () {
|
||
var $ = layui.$
|
||
, table = layui.table
|
||
|
||
//今日热搜
|
||
table.render({
|
||
elem: '#LAY-index-topSearch'
|
||
, url: './res/json/console/top-search.js' //模拟接口
|
||
, page: true
|
||
, cols: [[
|
||
{ type: 'numbers', fixed: 'left' }
|
||
, {
|
||
field: 'keywords',
|
||
title: '关键词',
|
||
minWidth: 300,
|
||
templet: '<div><a href="https://www.baidu.com/s?wd={{ d.keywords }}" target="_blank" class="layui-table-link">{{ d.keywords }}</div>'
|
||
}
|
||
, { field: 'frequency', title: '搜索次数', minWidth: 120, sort: true }
|
||
, { field: 'userNums', title: '用户数', sort: true }
|
||
]]
|
||
, skin: 'line'
|
||
})
|
||
|
||
//今日热贴
|
||
table.render({
|
||
elem: '#LAY-index-topCard'
|
||
, url: './res/json/console/top-card.js' //模拟接口
|
||
, page: true
|
||
, cellMinWidth: 120
|
||
, cols: [[
|
||
{ type: 'numbers', fixed: 'left' }
|
||
, {
|
||
field: 'title',
|
||
title: '标题',
|
||
minWidth: 300,
|
||
templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'
|
||
}
|
||
, { field: 'username', title: '发帖者' }
|
||
, { field: 'channel', title: '类别' }
|
||
, { field: 'crt', title: '点击率', sort: true }
|
||
]]
|
||
, skin: 'line'
|
||
})
|
||
|
||
//项目进展
|
||
table.render({
|
||
elem: '#LAY-home-homepage-console'
|
||
, url: './res/json/console/prograss.js' //模拟接口
|
||
, cols: [[
|
||
{ type: 'checkbox', fixed: 'left' }
|
||
, { field: 'prograss', title: '任务' }
|
||
, { field: 'time', title: '所需时间' }
|
||
, {
|
||
field: 'complete', title: '完成情况'
|
||
, templet: function (d) {
|
||
if (d.complete == '已完成') {
|
||
return '<del style="color: #16b777;">' + d.complete + '</del>'
|
||
} else if (d.complete == '进行中') {
|
||
return '<span style="color: #FFB800;">' + d.complete + '</span>'
|
||
} else {
|
||
return '<span style="color: #FF5722;">' + d.complete + '</span>'
|
||
}
|
||
}
|
||
}
|
||
]]
|
||
, skin: 'line'
|
||
})
|
||
})
|
||
|
||
exports('console', {})
|
||
}) |