517 lines
14 KiB
HTML
517 lines
14 KiB
HTML
|
<!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">
|
|||
|
|
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
|||
|
|
<link rel="stylesheet" href="../../admin/css/other/console2.css" />
|
|||
|
|
</head>
|
|||
|
|
<body class="pear-container">
|
|||
|
|
<div class="layui-row layui-col-space10">
|
|||
|
|
<div class="layui-col-md8">
|
|||
|
|
<div class="layui-row layui-col-space10">
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
快捷菜单
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<div class="layui-row layui-col-space10">
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home1" data-title="主页"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-home"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">主页</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home2" data-title="弹层"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-camera"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">弹层</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home2" data-title="聊天"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-star"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">聊天</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home3" data-title="相机"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-camera"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">相机</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home4" data-title="表单"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-console"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">表单</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home5" data-title="安全"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-auz"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">安全</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home6" data-title="公告"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-cart"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">公告</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|||
|
|
<div class="pear-card" data-id="home7" data-title="更多"
|
|||
|
|
data-url="http://www.baidu.com">
|
|||
|
|
<i class="layui-icon layui-icon-app"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="pear-card-title">更多</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
代办任务
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<div class="layui-row layui-col-space10">
|
|||
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|||
|
|
<div class="pear-card2">
|
|||
|
|
<div class="title">待审评论</div>
|
|||
|
|
<div class="count pear-text">21</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|||
|
|
<div class="pear-card2">
|
|||
|
|
<div class="title">待审帖子</div>
|
|||
|
|
<div class="count pear-text">32</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|||
|
|
<div class="pear-card2">
|
|||
|
|
<div class="title">待审文章</div>
|
|||
|
|
<div class="count pear-text">14</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|||
|
|
<div class="pear-card2">
|
|||
|
|
<div class="title">待审用户</div>
|
|||
|
|
<div class="count pear-text">63</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md12">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
|||
|
|
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">
|
|||
|
|
使用记录
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<table id="role-table" lay-filter="role-table"></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-col-md4">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">留言板</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<ul class="pear-card-status">
|
|||
|
|
<li>
|
|||
|
|
<p>要不要作为我的家人，搬来我家。</p>
|
|||
|
|
<span>12月25日 19:92</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
|
|||
|
|
<span>4月30日 22:43</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>夏天真的来了，尽管它还有些犹豫。</p>
|
|||
|
|
<span>4月30日 22:43</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
|
|||
|
|
<span>4月30日 22:43</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
|
|||
|
|
<span>4月30日 22:43</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
|
|||
|
|
<span>5月12日 01:25</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
|
|||
|
|
<span>6月11日 15:33</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>一切都在不可避免的走向庸俗。</p>
|
|||
|
|
<span>2月09日 13:40</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>路上没有灯火的时候，就点亮自己的头颅。</p>
|
|||
|
|
<span>3月11日 12:30</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
|
|||
|
|
<span>4月30日 22:43</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>接近，是我对一切的态度，是我对一切态度的距离</p>
|
|||
|
|
<span>6月11日 15:33</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
|
|||
|
|
<span>2月09日 13:40</span>
|
|||
|
|
<a href="javascript:;" data-id="1"
|
|||
|
|
class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--</div>-->
|
|||
|
|
<script src="../../component/layui/layui.js"></script>
|
|||
|
|
<script src="../../component/pear/pear.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
|
|||
|
|
var $ = layui.jquery,
|
|||
|
|
layer = layui.layer,
|
|||
|
|
element = layui.element,
|
|||
|
|
echarts = layui.echarts,
|
|||
|
|
table = layui.table,
|
|||
|
|
carousel = layui.carousel;
|
|||
|
|
|
|||
|
|
let cols = [
|
|||
|
|
[{
|
|||
|
|
type: 'checkbox'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '角色名',
|
|||
|
|
field: 'roleName',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Key值',
|
|||
|
|
field: 'roleCode',
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '描述',
|
|||
|
|
field: 'details',
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '是否可用',
|
|||
|
|
field: 'enable',
|
|||
|
|
align: 'center',
|
|||
|
|
templet: '#role-enable'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
table.render({
|
|||
|
|
elem: '#role-table',
|
|||
|
|
url: '../../admin/data/role.json',
|
|||
|
|
page: true,
|
|||
|
|
cols: cols,
|
|||
|
|
skin: 'line'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
|||
|
|
|
|||
|
|
$("body").on("click", "[data-url]", function() {
|
|||
|
|
parent.layui.tab.addTabOnlyByElem("content", {
|
|||
|
|
id: $(this).attr("data-id"),
|
|||
|
|
title: $(this).attr("data-title"),
|
|||
|
|
url: $(this).attr("data-url"),
|
|||
|
|
close: true
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
let bgColor = "#fff";
|
|||
|
|
let color = [
|
|||
|
|
"#0090FF",
|
|||
|
|
"#36CE9E",
|
|||
|
|
"#FFC005",
|
|||
|
|
"#FF515A",
|
|||
|
|
"#8B5CFF",
|
|||
|
|
"#00CA69"
|
|||
|
|
];
|
|||
|
|
let echartData = [{
|
|||
|
|
name: "1",
|
|||
|
|
value1: 100,
|
|||
|
|
value2: 233
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "2",
|
|||
|
|
value1: 138,
|
|||
|
|
value2: 233
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "3",
|
|||
|
|
value1: 350,
|
|||
|
|
value2: 200
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "4",
|
|||
|
|
value1: 173,
|
|||
|
|
value2: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "5",
|
|||
|
|
value1: 180,
|
|||
|
|
value2: 199
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "6",
|
|||
|
|
value1: 150,
|
|||
|
|
value2: 233
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "7",
|
|||
|
|
value1: 180,
|
|||
|
|
value2: 210
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "8",
|
|||
|
|
value1: 230,
|
|||
|
|
value2: 180
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let xAxisData = echartData.map(v => v.name);
|
|||
|
|
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
|||
|
|
let yAxisData1 = echartData.map(v => v.value1);
|
|||
|
|
// [100, 138, 350, 173, 180, 150, 180, 230]
|
|||
|
|
let yAxisData2 = echartData.map(v => v.value2);
|
|||
|
|
// [233, 233, 200, 180, 199, 233, 210, 180]
|
|||
|
|
const hexToRgba = (hex, opacity) => {
|
|||
|
|
let rgbaColor = "";
|
|||
|
|
let reg = /^#[\da-f]{6}$/i;
|
|||
|
|
if (reg.test(hex)) {
|
|||
|
|
rgbaColor =
|
|||
|
|
`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|||
|
|
"0x" + hex.slice(3, 5)
|
|||
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|||
|
|
}
|
|||
|
|
return rgbaColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
backgroundColor: bgColor,
|
|||
|
|
color: color,
|
|||
|
|
legend: {
|
|||
|
|
right: 10,
|
|||
|
|
top: 10
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
formatter: function(params) {
|
|||
|
|
let html = '';
|
|||
|
|
params.forEach(v => {
|
|||
|
|
html +=
|
|||
|
|
`<div style="color: #666;font-size: 14px;line-height: 24px">
|
|||
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
|||
|
|
${v.seriesName}.${v.name}
|
|||
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
|||
|
|
万元`;
|
|||
|
|
})
|
|||
|
|
return html
|
|||
|
|
},
|
|||
|
|
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
shadowColor: 'rgba(225,225,225,1)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: 100,
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: "category",
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}月',
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#333"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#D9D9D9"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: xAxisData
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: "value",
|
|||
|
|
name: '单位：万千瓦时',
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#666"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#666",
|
|||
|
|
fontSize: 12,
|
|||
|
|
lineHeight: 40
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "dashed",
|
|||
|
|
color: "#E9E9E9"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: "2018",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
zlevel: 3,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: color[0],
|
|||
|
|
shadowBlur: 3,
|
|||
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
|||
|
|
shadowOffsetY: 8
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[{
|
|||
|
|
offset: 0,
|
|||
|
|
color: hexToRgba(color[0], 0.3)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: hexToRgba(color[0], 0.1)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
|||
|
|
shadowBlur: 10
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: yAxisData1
|
|||
|
|
}, {
|
|||
|
|
name: "2019",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
symbolSize: 8,
|
|||
|
|
zlevel: 3,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: color[1],
|
|||
|
|
shadowBlur: 3,
|
|||
|
|
shadowColor: hexToRgba(color[1], 0.5),
|
|||
|
|
shadowOffsetY: 8
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[{
|
|||
|
|
offset: 0,
|
|||
|
|
color: hexToRgba(color[1], 0.3)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: hexToRgba(color[1], 0.1)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
shadowColor: hexToRgba(color[1], 0.1),
|
|||
|
|
shadowBlur: 10
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: yAxisData2
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
echartsRecords.setOption(option);
|
|||
|
|
|
|||
|
|
window.onresize = function() {
|
|||
|
|
echartsRecords.resize();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|