|
|
<!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, shrink-to-fit=no">
|
|
|
<meta name="description" content="">
|
|
|
<meta name="author" content="">
|
|
|
|
|
|
<title>数据可视化系统</title>
|
|
|
|
|
|
<!-- Custom fonts for this template-->
|
|
|
<link href="static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
|
<link
|
|
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
|
|
rel="stylesheet">
|
|
|
|
|
|
<!-- Custom styles for this template-->
|
|
|
<link href="static/css/sb-admin-2.min.css" rel="stylesheet">
|
|
|
|
|
|
<!-- table表需要引入的Bootstrap文件 Custom styles for this table page -->
|
|
|
<link href="static/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
|
|
|
|
|
|
<!-- 页面时钟的js -->
|
|
|
<script>
|
|
|
//获取时间函数
|
|
|
function time1(){
|
|
|
var today = new Date();
|
|
|
var year = today.getFullYear();
|
|
|
var month = today.getMonth()+1;
|
|
|
var day = today.getDay() + 11;
|
|
|
var hour = today.getHours();
|
|
|
var minute = today.getMinutes();
|
|
|
var second = today.getSeconds();
|
|
|
|
|
|
minute = checkTime(minute);
|
|
|
second = checkTime(second);
|
|
|
|
|
|
document.getElementById("time").innerHTML =
|
|
|
year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
|
|
|
t = setTimeout("time1()",500);
|
|
|
}
|
|
|
//调整时间格式
|
|
|
function checkTime(i) {
|
|
|
if(i<10){
|
|
|
i="0"+i;
|
|
|
}
|
|
|
return i;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!-- 网站icon -->
|
|
|
<link rel="shortcut icon" href="static/img/mywebsite.svg" />
|
|
|
</head>
|
|
|
|
|
|
<body id="page-top" class="sidebar-toggled">
|
|
|
|
|
|
<!-- Page Wrapper -->
|
|
|
<div id="wrapper">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 网站icon -->
|
|
|
<link rel="shortcut icon" href="static/img/mywebsite.svg" />
|
|
|
</head>
|
|
|
|
|
|
<body id="page-top">
|
|
|
|
|
|
<!-- Page Wrapper -->
|
|
|
<div id="wrapper">
|
|
|
|
|
|
<!-- -----------------分割线----上面是页面内容----下面是注入js----分割线--------------- -->
|
|
|
|
|
|
<!-- 侧边栏 Sidebar -->
|
|
|
<ul class="navbar-nav bg-gray-800 sidebar sidebar-dark accordion" id="accordionSidebar">
|
|
|
|
|
|
<!-- 侧边栏 主人名称 Sidebar - Brand -->
|
|
|
<a class="sidebar-brand d-flex align-items-center justify-content-center">
|
|
|
<div class="sidebar-brand-icon rotate-n-15">
|
|
|
<i class="fas fa-laugh-wink"></i>
|
|
|
</div>
|
|
|
<div class="sidebar-brand-text mx-3">网易云音乐数据分析可视化平台</div>
|
|
|
</a>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider my-0">
|
|
|
|
|
|
<!-- Nav Item - 首页 -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/">
|
|
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
|
<span>首页 Home</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 基本功能 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
数据可视化
|
|
|
</div>
|
|
|
|
|
|
<!-- 后台数据 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item active">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
|
|
|
aria-expanded="true" aria-controls="collapseTwo">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>后台数据</span>
|
|
|
</a>
|
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">数据表</h6>
|
|
|
<a class="collapse-item" href="/playlist">歌单</a>
|
|
|
<a class="collapse-item" href="/songs">歌曲</a>
|
|
|
<a class="collapse-item" href="/comments">评论</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据图表 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
|
|
|
aria-expanded="true" aria-controls="collapseUtilities">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据图表</span>
|
|
|
</a>
|
|
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">My Echarts:</h6>
|
|
|
<a class="collapse-item" href="/language_charts">歌单语种</a>
|
|
|
<a class="collapse-item" href="/sentiment_charts">歌单情感</a>
|
|
|
<a class="collapse-item" href="/age_charts">评论年龄</a>
|
|
|
<a class="collapse-item" href="/days_charts">进村天数</a>
|
|
|
<a class="collapse-item" href="/listen_age_charts">年龄听歌</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据词云 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseThree"
|
|
|
aria-expanded="true" aria-controls="collapseThree">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据词云</span>
|
|
|
</a>
|
|
|
<div id="collapseThree" class="collapse" aria-labelledby="collapseThree"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">词云图</h6>
|
|
|
<a class="collapse-item" href="/all_lyric_word">歌词</a>
|
|
|
<a class="collapse-item" href="/hot_comments_word">热评</a>
|
|
|
<a class="collapse-item" href="/diy_song_word">定制</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider 分割线 -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 其他信息 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
其他信息
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 技术实现 Nav Item - -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/techno">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>技术说明</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- 作者 Nav Item -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/team">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>我的信息</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider d-none d-md-block">
|
|
|
|
|
|
<!-- 隐藏侧边栏按钮 Sidebar Toggler (Sidebar) -->
|
|
|
<div class="text-center d-none d-md-inline">
|
|
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
|
|
</div>
|
|
|
|
|
|
</ul>
|
|
|
<!-- End of Sidebar -->
|
|
|
|
|
|
<!-- 内容容器 Content Wrapper -->
|
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
|
|
<!-- 内容 Main Content -->
|
|
|
<div id="content">
|
|
|
|
|
|
<!-- 顶部 部分 -->
|
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow text-secondary">
|
|
|
|
|
|
<!-- 侧边栏隐藏按钮 （竖屏使用）Sidebar Toggle (Topbar) -->
|
|
|
<form class="form-inline">
|
|
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
<form class="form-inline">
|
|
|
<img src="static/img/mywebsite.svg" width="20px">
|
|
|
</form>
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<form class="form-inline text-secondary" style="font-size: x-large">
|
|
|
<!-- 系统 标题 -->网易云音乐数据分析可视化平台
|
|
|
</form>
|
|
|
|
|
|
<!-- 顶部栏里的右边栏 Topbar Navbar -->
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<!-- Nav Item - 用户头像 易名 User Information -->
|
|
|
<li class="nav-item dropdown no-arrow">
|
|
|
<a class="nav-link dropdown-toggle" href="{{ url_for('team') }}" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small"> 管理员 </span>
|
|
|
<img class="img-profile rounded-circle" src="static/img/touxiang.jpeg">
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
<!-- 顶部结束 -->
|
|
|
|
|
|
<!-- Begin Page Content -->
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- 页面标题 说明网页内容 Page Heading -->
|
|
|
<h1 class="h3 mb-0 text-gray-800 py-2">后台数据</h1>
|
|
|
<p class="mb-4">数据源: <a target="_blank"
|
|
|
href="https://music.163.com/discover/playlist">网易云音乐</a>.</p>
|
|
|
|
|
|
<!-- 页面表格 DataTales Example -->
|
|
|
<div class="card shadow mb-4">
|
|
|
<div class="card-header py-3">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">评论</h6>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="table-responsive">
|
|
|
<div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4">
|
|
|
<div class="row">
|
|
|
<div class="col-sm-12">
|
|
|
<table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 140%;">
|
|
|
<!-- 表头 -->
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th >头像</th>
|
|
|
<th style="width: 80px;">名称</th>
|
|
|
<th>等级</th>
|
|
|
<th>介绍</th>
|
|
|
<th>评论</th>
|
|
|
<th>点赞</th>
|
|
|
<th style="width: 78px;">日期</th>
|
|
|
<th>年龄</th>
|
|
|
<th>性别</th>
|
|
|
<th style="width: 72px">动态</th>
|
|
|
<th>关注</th>
|
|
|
<th>粉丝</th>
|
|
|
<th>听过</th>
|
|
|
<th>有歌单</th>
|
|
|
<th>被订阅</th>
|
|
|
<th>注册时间</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 表尾 -->
|
|
|
<tfoot>
|
|
|
<tr>
|
|
|
<th >头像</th>
|
|
|
<th style="width: 80px;">名称</th>
|
|
|
<th>等级</th>
|
|
|
<th>介绍</th>
|
|
|
<th>评论</th>
|
|
|
<th>点赞</th>
|
|
|
<th style="width: 78px;">日期</th>
|
|
|
<th>年龄</th>
|
|
|
<th>性别</th>
|
|
|
<th style="width: 72px">动态</th>
|
|
|
<th>关注</th>
|
|
|
<th>粉丝</th>
|
|
|
<th>听过</th>
|
|
|
<th>有歌单</th>
|
|
|
<th>被订阅</th>
|
|
|
<th>注册时间</th>
|
|
|
</tr>
|
|
|
</tfoot>
|
|
|
<tbody class="text-dark">
|
|
|
{% for data in datalist %}
|
|
|
<tr>
|
|
|
<td><img class="img-profile" src="{{ data['userAvatar'] }}" alt="头像" width="70" height="70" ></img></td>
|
|
|
<td><a href="https://music.163.com/user?id={{ data['user_id'] }}" target="_blank">{{ data['user_name'] }}</a></td>
|
|
|
<td>{{ data['level'] }}</td>
|
|
|
<td>
|
|
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#{{ data['target_id'] }}">
|
|
|
<i class="fas fa-fw fa-folder"></i>
|
|
|
<p> 介绍 </p>
|
|
|
</a>
|
|
|
<div class="modal fade" id="{{ data['target_id'] }}" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="exampleModalLabel"><a href="https://music.163.com/user?id={{ data['user_id'] }}" target="_blank">{{ data['user_name'] }}</a></h5>
|
|
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">其他信息</div>
|
|
|
<div class="card-body">
|
|
|
<br>
|
|
|
播放记录：{{ data['ifOpenPlayRecord'] }}<br><br>
|
|
|
已来云村：{{ data['createDays'] }} 天<br><br>
|
|
|
所在地：{{ data['user_province'] }} {{ data['user_city'] }}<br><br>
|
|
|
介绍：{{ data['user_introduce'] | safe }}<br><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#{{ data['comment_id'] }}">
|
|
|
<i class="fas fa-fw fa-folder"></i>
|
|
|
<p> 评论 </p>
|
|
|
</a>
|
|
|
<div class="modal fade" id="{{ data['comment_id'] }}" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="exampleModalLabel"><a href="https://music.163.com/song?id={{ data['song_id'] }}" target="_blank">歌曲</a></h5>
|
|
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">
|
|
|
评论:{{ data['totalCount'] }}
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<br>
|
|
|
类型：{{ data['comment_type'] }}<br><br>
|
|
|
内容：{{ data['content'] }}<br>
|
|
|
<br><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">
|
|
|
<a target="_blank" href="https://music.163.com/user?id={{ data['beR_userId'] }}" >被评论人：</a>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<br>
|
|
|
内容：{{ data['beReplied_content'] }}
|
|
|
<br><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>{{ data['likeCount'] }}</td>
|
|
|
<td>{{ data['comment_date'] }}</td>
|
|
|
<td>{{ data['user_age'] }}</td>
|
|
|
<td>{{ data['user_gender'] }}</td>
|
|
|
<td>{{ data['eventCount'] }}</td>
|
|
|
<td>{{ data['follows'] }}</td>
|
|
|
<td>{{ data['followeds'] }}</td>
|
|
|
<td>{{ data['listenSongs'] }}</td>
|
|
|
<td>{{ data['playlistCount'] }}</td>
|
|
|
<td>{{ data['listBeStowCount'] }}</td>
|
|
|
<td>{{ data['createTime'] }}</td>
|
|
|
</tr>
|
|
|
{% endfor %}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- /.container-fluid -->
|
|
|
|
|
|
</div>
|
|
|
<!-- End Page Content -->
|
|
|
<!-- End of Main Content -->
|
|
|
|
|
|
<!-- 低端 Footer -->
|
|
|
<footer class="sticky-footer bg-white">
|
|
|
<div class="container my-auto">
|
|
|
<div class="copyright text-center my-auto">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<!-- End of Footer -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div><!-- End of Content Wrapper -->
|
|
|
</div>
|
|
|
<!-- End of Page Wrapper -->
|
|
|
|
|
|
<!-- 回到顶端按钮 Scroll to Top Button-->
|
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
|
<i class="fas fa-angle-up"></i>
|
|
|
</a>
|
|
|
|
|
|
<!-- -----------------分割线----上面是页面内容----下面是注入js----分割线--------------- -->
|
|
|
|
|
|
<!-- Bootstrap core JavaScript-->
|
|
|
<script src="static/vendor/jquery/jquery.min.js"></script>
|
|
|
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<!-- Core plugin JavaScript-->
|
|
|
<script src="static/vendor/jquery-easing/jquery.easing.min.js"></script>
|
|
|
|
|
|
<!-- Custom scripts for all pages-->
|
|
|
<script src="static/js/sb-admin-2.min.js"></script>
|
|
|
|
|
|
<!-- Page level plugins -->
|
|
|
<script src="static/vendor/datatables/jquery.dataTables.min.js"></script>
|
|
|
<script src="static/vendor/datatables/dataTables.bootstrap4.min.js"></script>
|
|
|
|
|
|
<!-- Page level custom scripts -->
|
|
|
<script src="static/js/demo/datatables-demo.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
