|
|
<!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="">
|
|
|
{# td 图片需要这个#}
|
|
|
<meta name="referrer" content="no-referrer"/>
|
|
|
<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">
|
|
|
<!-- talble样式 -->
|
|
|
<link href="/static/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
|
|
|
|
|
|
</head>
|
|
|
{#预告片样式#}
|
|
|
<style>
|
|
|
a {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
.movie_action {
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
width: 30%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.bg {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background: rgba(0, 0, 0, .2);
|
|
|
}
|
|
|
|
|
|
.nav-item:hover .dropdown-menu {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
{#更多 样式#}
|
|
|
<style>
|
|
|
/* 更多链接样式 */
|
|
|
.more-link {
|
|
|
color: #007bff; /* 设置链接颜色为蓝色 */
|
|
|
text-decoration: none; /* 去掉下划线 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示手型 */
|
|
|
font-weight: bold; /* 加粗文字 */
|
|
|
transition: color 0.3s ease; /* 添加平滑过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 鼠标悬停时的样式 */
|
|
|
.more-link:hover {
|
|
|
color: #0056b3; /* 鼠标悬停时改变颜色 */
|
|
|
text-decoration: underline; /* 鼠标悬停时显示下划线 */
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
/* 调整表头自适应宽度 */
|
|
|
#dataTable th {
|
|
|
white-space: nowrap; /* 防止标题换行 */
|
|
|
overflow: hidden; /* 防止标题溢出 */
|
|
|
text-overflow: ellipsis; /* 当标题过长时显示省略号 */
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<body id="page-top">
|
|
|
|
|
|
<!-- Page Wrapper -->
|
|
|
<div id="wrapper">
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
|
|
|
|
|
<!-- Sidebar - Brand -->
|
|
|
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/home">
|
|
|
<div class="sidebar-brand-icon rotate-n-15">
|
|
|
<i class="fas fa-laugh-wink"></i>
|
|
|
</div>
|
|
|
<div class="sidebar-brand-text mx-3">豆瓣数据分析<sup></sup></div>
|
|
|
</a>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider my-0">
|
|
|
|
|
|
<!-- Nav Item - Dashboard -->
|
|
|
<li class="nav-item active">
|
|
|
<a class="nav-link" href="/home">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-house-fill" viewBox="0 0 16 16">
|
|
|
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
|
|
|
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">首页</span></a>
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/search/1">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
|
|
|
viewBox="0 0 16 16">
|
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">搜索页面</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- Heading -->
|
|
|
<div class="sidebar-heading">
|
|
|
数据表
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/time_t">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm"
|
|
|
viewBox="0 0 16 16">
|
|
|
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
|
|
|
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">时间分析表</span></a>
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/rate_t/all">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-vector-pen" viewBox="0 0 16 16">
|
|
|
<path fill-rule="evenodd"
|
|
|
d="M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828L10.646.646zm-1.8 2.908-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z"/>
|
|
|
<path fill-rule="evenodd" d="M2.832 13.228 8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086.086-.026z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">评分分析表</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/map_t">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe"
|
|
|
viewBox="0 0 16 16">
|
|
|
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">地图分析表</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/type_t">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stack"
|
|
|
viewBox="0 0 16 16">
|
|
|
<path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z"/>
|
|
|
<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">类型分析表</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/actor_t">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-people-fill" viewBox="0 0 16 16">
|
|
|
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
|
|
<path fill-rule="evenodd"
|
|
|
d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
|
|
|
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">演员与导演分析表</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<div class="sidebar-heading">
|
|
|
操作
|
|
|
</div>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/table/0">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-grid-3x3" viewBox="0 0 16 16">
|
|
|
<path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5V5h4V1H1.5zM5 6H1v4h4V6zm1 4h4V6H6v4zm-1 1H1v3.5a.5.5 0 0 0 .5.5H5v-4zm1 0v4h4v-4H6zm5 0v4h3.5a.5.5 0 0 0 .5-.5V11h-4zm0-1h4V6h-4v4zm0-5h4V1.5a.5.5 0 0 0-.5-.5H11v4zm-1 0V1H6v4h4z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">数据操作</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<div class="sidebar-heading">
|
|
|
词云图
|
|
|
</div>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/comments_c">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-chat-left-dots" viewBox="0 0 16 16">
|
|
|
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
|
<path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">评论词云图</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/title_c">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-clipboard-data" viewBox="0 0 16 16">
|
|
|
<path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/>
|
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
|
|
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">标题词云图</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/summary_c">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-clipboard-pulse" viewBox="0 0 16 16">
|
|
|
<path fill-rule="evenodd"
|
|
|
d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1H3a1 1 0 0 0-1 1V14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3.5a1 1 0 0 0-1-1h-1v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Zm6.979 3.856a.5.5 0 0 0-.968.04L7.92 10.49l-.94-3.135a.5.5 0 0 0-.895-.133L4.232 10H3.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .416-.223l1.41-2.115 1.195 3.982a.5.5 0 0 0 .968-.04L9.58 7.51l.94 3.135A.5.5 0 0 0 11 11h1.5a.5.5 0 0 0 0-1h-1.128L9.979 5.356Z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">简介词云图</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/casts_c">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
|
class="bi bi-clipboard-check" viewBox="0 0 16 16">
|
|
|
<path fill-rule="evenodd"
|
|
|
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
|
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
|
|
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
|
</svg>
|
|
|
<span style="margin-left: 5px">演员名词云图</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<!-- Content Wrapper -->
|
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
|
|
<!-- Main Content -->
|
|
|
<div id="content">
|
|
|
|
|
|
<!-- Topbar -->
|
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
|
|
|
|
|
<!-- Sidebar Toggle (Topbar) -->
|
|
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<!-- Topbar Navbar -->
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
|
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
|
|
<li class="nav-item dropdown no-arrow d-sm-none">
|
|
|
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
|
|
|
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<i class="fas fa-search fa-fw"></i>
|
|
|
</a>
|
|
|
<!-- Dropdown - Messages -->
|
|
|
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
|
|
|
aria-labelledby="searchDropdown">
|
|
|
<form class="form-inline mr-auto w-100 navbar-search">
|
|
|
<div class="input-group">
|
|
|
<input type="text" class="form-control bg-light border-0 small"
|
|
|
placeholder="Search for..." aria-label="Search"
|
|
|
aria-describedby="basic-addon2">
|
|
|
<div class="input-group-append">
|
|
|
<button class="btn btn-primary" type="button">
|
|
|
<i class="fas fa-search fa-sm"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<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="#" 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">{{ email }}</span>
|
|
|
|
|
|
</a>
|
|
|
<!-- Dropdown - User Information -->
|
|
|
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
|
|
|
aria-labelledby="userDropdown">
|
|
|
|
|
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
|
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
|
|
退出登陆
|
|
|
</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
|
|
|
<!-- End of Topbar -->
|
|
|
|
|
|
<!-- Begin Page Content -->
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- Page Heading -->
|
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
|
<h1 class="h3 mb-0 text-gray-800">首页</h1>
|
|
|
</div>
|
|
|
|
|
|
<!-- Content Row -->
|
|
|
<div class="row">
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-primary shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
|
|
电影个数
|
|
|
</div>
|
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maxMovieLen }}个</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-dark shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
|
|
|
豆瓣最高评分
|
|
|
</div>
|
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maxRate }}分</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-danger shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
|
|
|
出场最多演员
|
|
|
</div>
|
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maxCasts }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-success shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
|
|
制片国家最多数
|
|
|
</div>
|
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maxCountry }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-info shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
|
|
电影种类数
|
|
|
</div>
|
|
|
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{ maxTypes }}个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-2 mb-4">
|
|
|
<div class="card border-left-warning shadow h-100 py-2">
|
|
|
<div class="card-body">
|
|
|
<div class="row no-gutters align-items-center">
|
|
|
<div class="col mr-2">
|
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
|
|
|
电影语言最多数
|
|
|
</div>
|
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maxLang }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Content Row -->
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<!-- Area Chart -->
|
|
|
<div class="col-xl-6 col-lg-6">
|
|
|
<div class="card shadow mb-4">
|
|
|
<!-- Card Header - Dropdown -->
|
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">电影种类饼状图</h6>
|
|
|
</div>
|
|
|
<!-- Card Body -->
|
|
|
<div class="card-body">
|
|
|
<div id="mains" style="width: 100%;height: 450px">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Pie Chart -->
|
|
|
<div class="col-xl-6 col-lg-6">
|
|
|
<div class="card shadow mb-4">
|
|
|
<!-- Card Header - Dropdown -->
|
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">电影评分折线图</h6>
|
|
|
</div>
|
|
|
<!-- Card Body -->
|
|
|
<div class="card-body">
|
|
|
<div id="main" style="width: 100%;height: 450px"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 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">
|
|
|
|
|
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
|
|
|
style="text-align: center">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>ID</th>
|
|
|
<th>电影名</th>
|
|
|
<th>图片</th>
|
|
|
<th>评分</th>
|
|
|
<th>导演</th>
|
|
|
<th>演员</th>
|
|
|
<th>语言</th>
|
|
|
<th>片长</th>
|
|
|
<th>上映时间</th>
|
|
|
<th>电影类型</th>
|
|
|
<th>制片国家</th>
|
|
|
<th>短评个数</th>
|
|
|
<th>预告片</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
{% for item in tableData %}
|
|
|
<tr style="font-size: 15px">
|
|
|
<td>{{ item[0] }}</td>
|
|
|
|
|
|
{# <td style="text-decoration: underline">#}
|
|
|
{# <a style="color: #000" href="/search/{{ item[0] }}">#}
|
|
|
{# {{ item[3] }}#}
|
|
|
{# </a>#}
|
|
|
{# </td>#}
|
|
|
|
|
|
<td style="text-decoration: underline">
|
|
|
<a style="color: #000" href="/search/{{ item[0] }}">
|
|
|
<span>{{ item[3][:30].replace(' ', '') }}</span> <!-- 假设只显示前30个字符 -->
|
|
|
{% if item[3]|length > 30 %}
|
|
|
{% set remaining_content = item[3][30:].replace(' ', '') %}
|
|
|
<span class="more-content"
|
|
|
style="display: none;">{{ remaining_content }}</span>
|
|
|
<a href="#" class="more-link">更多</a>
|
|
|
{% endif %}
|
|
|
</a>
|
|
|
</td>
|
|
|
|
|
|
<td style="text-align: center;width: 175px">
|
|
|
<a target="_blank" href="{{ item[6] }} ">
|
|
|
<img style="width: 100%;object-fit:cover;height: 150px;"
|
|
|
src="{{ item[5] }} "
|
|
|
alt="">
|
|
|
</a>
|
|
|
</td>
|
|
|
|
|
|
<td><span class="text-primary">{{ item[2] }}分</span></td>
|
|
|
|
|
|
<td>
|
|
|
<span>{{ item[1][:30].replace(' ', '') }}</span> <!-- 假设只显示前30个字符 -->
|
|
|
{% if item[1]|length > 30 %}
|
|
|
{% set remaining_content = item[1][30:].replace(' ', '') %}
|
|
|
<span class="more-content"
|
|
|
style="display: none;">{{ remaining_content }}</span>
|
|
|
<a href="#" class="more-link">更多</a>
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
|
|
|
<td>
|
|
|
<span>{{ item[4][:30].replace(' ','') }}</span> <!-- 假设只显示前30个字符 -->
|
|
|
{% if item[4]|length > 30 %}
|
|
|
{% set remaining_content = item[4][30:].replace(' ', '') %}
|
|
|
<span class="more-content"
|
|
|
style="display: none;">{{ remaining_content }}</span>
|
|
|
<a href="#" class="more-link">更多</a>
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
|
|
|
|
|
|
{# <td style="text-align: center;width: 60px">{{ item[4] }}</td>#}
|
|
|
|
|
|
<td>{{ item[10] }}</td>
|
|
|
<td>{{ item[12] }}分钟</td>
|
|
|
<td>{{ item[7] }}</td>
|
|
|
<td>{{ item[8] }}</td>
|
|
|
<td>{{ item[9] }}</td>
|
|
|
<td>{{ item[13] }}个短评</td>
|
|
|
|
|
|
<td style="position: relative;width: 175px">
|
|
|
|
|
|
|
|
|
{% if item[18] =='0' %}
|
|
|
|
|
|
{% if item[17][1] =='0' %}
|
|
|
<img style="width: 100%;object-fit: cover;height: 150px;"
|
|
|
src="https://img2.doubanio.com/cuphead/movie-static/pics/movie_default_large.png"
|
|
|
alt="">
|
|
|
{% else %}
|
|
|
|
|
|
<img style="width: 100%;object-fit: cover;height: 150px;"
|
|
|
src="{{ item[17][1] }}"
|
|
|
alt="">
|
|
|
{% endif %}
|
|
|
|
|
|
{% else %}
|
|
|
|
|
|
<a target="_blank" href="/movie/{{ item[3] }}">
|
|
|
<div class="bg"></div>
|
|
|
</a>
|
|
|
|
|
|
<a target="_blank" href="/movie/{{ item[3] }}">
|
|
|
<img class="movie_action" src="/static/img/action.png"
|
|
|
alt=""></img>
|
|
|
</a>
|
|
|
|
|
|
<img style="width: 100%;object-fit: cover;height: 150px;"
|
|
|
src="{{ item[17][0] }}" alt="">
|
|
|
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Footer -->
|
|
|
<footer class=" sticky-footer bg-white">
|
|
|
<div class="container my-auto">
|
|
|
<div class="copyright text-center my-auto">
|
|
|
<span>豆瓣电影数据可视化分析@<a target="_blank"
|
|
|
href="http://sc.chinaz.com/moban/">Flask + Mysql + Echarts</a></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
|
<i class="fas fa-angle-up"></i>
|
|
|
</a>
|
|
|
|
|
|
<!-- Logout Modal-->
|
|
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
|
|
|
aria-labelledby="exampleModalLabel"
|
|
|
aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="exampleModalLabel">确认要退出吗?</h5>
|
|
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消
|
|
|
</button>
|
|
|
<a class="btn btn-primary" href="/loginout">确认</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 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/chart.js/Chart.min.js"></script>
|
|
|
|
|
|
<!-- Page level custom scripts -->
|
|
|
<script src="/static/js/demo/chart-area-demo.js"></script>
|
|
|
<script src="/static/js/demo/chart-pie-demo.js"></script>
|
|
|
|
|
|
<!-- echarts视图js -->
|
|
|
<script src="/static/js/echarts.js"></script>
|
|
|
|
|
|
<!-- table 引用js -->
|
|
|
<script src="/static/vendor/datatables/jquery.dataTables.min.js"></script>
|
|
|
<script src="/static/vendor/datatables/dataTables.bootstrap4.min.js"></script>
|
|
|
<script src="/static/js/demo/datatables-demo.js"></script>
|
|
|
|
|
|
<script>
|
|
|
var chartDoms = document.getElementById('mains');
|
|
|
var myCharts = echarts.init(chartDoms);
|
|
|
|
|
|
// 假设 typeEcharData 是从服务器获取到的类别数据，格式为 [{value: num, name: '类型名称'}]
|
|
|
var typeEcharData = {{ typeEcharData|tojson }};
|
|
|
|
|
|
// 对数据进行排序和处理，将数量小于10的归并到“其他”类别
|
|
|
typeEcharData.sort(function (a, b) {
|
|
|
return b.value - a.value;
|
|
|
}); // 降序排序
|
|
|
var otherCount = 0; // “其他”类别的计数
|
|
|
var otherData = []; // “其他”类别的数据
|
|
|
for (var i = 0; i < typeEcharData.length; i++) {
|
|
|
if (typeEcharData[i].value < 20) {
|
|
|
otherCount += typeEcharData[i].value;
|
|
|
} else {
|
|
|
if (otherCount > 0) {
|
|
|
otherData.push({value: otherCount, name: '其他'});
|
|
|
otherCount = 0; // 重置计数
|
|
|
}
|
|
|
otherData.push(typeEcharData[i]);
|
|
|
}
|
|
|
}
|
|
|
// 如果最后还有“其他”类别的数据没有被添加，在这里添加
|
|
|
if (otherCount > 0) {
|
|
|
otherData.push({value: otherCount, name: '其他'});
|
|
|
}
|
|
|
|
|
|
var options = {
|
|
|
title: {
|
|
|
text: '电影种类饼状图',
|
|
|
subtext: '数据来源于字段types',
|
|
|
left: 'center'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
left: 'left'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '种类个数',
|
|
|
type: 'pie',
|
|
|
radius: '50%',
|
|
|
data: otherData, // 使用处理后的数据
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
options && myCharts.setOption(options);
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
var chartDom = document.getElementById('main');
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
|
|
|
option = {
|
|
|
title: {
|
|
|
text: '电影评分折线图',
|
|
|
subtext: '数据来源于字段Rate',
|
|
|
left: 'center'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis', // 使用 axis 触发类型以显示交叉线
|
|
|
axisPointer: {
|
|
|
type: 'cross', // 交叉线类型
|
|
|
label: {
|
|
|
backgroundColor: '#6a7985'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
left: 'left'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: {{ row }}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: {{ columns }},
|
|
|
type: 'line',
|
|
|
areaStyle: {}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener("click", function (event) {
|
|
|
if (event.target.classList.contains("more-link")) {
|
|
|
event.preventDefault();
|
|
|
const content = event.target.parentNode.querySelector(".more-content");
|
|
|
if (content.style.display === "none") {
|
|
|
content.style.display = "inline"; // 显示全部内容
|
|
|
event.target.textContent = "收起"; // 更改链接文本
|
|
|
} else {
|
|
|
content.style.display = "none"; // 隐藏全部内容
|
|
|
event.target.textContent = "更多"; // 恢复链接文本
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
$('#dataTable').dataTable({
|
|
|
"language": {
|
|
|
"search": "<label>搜索:</label>",
|
|
|
{#"search": "<label>Custom Search:<input type='search' class='form-control form-control-sm' placeholder='' aria-controls='dataTable'></label>",#}
|
|
|
// 可以根据需要添加其他语言选项的自定义内容
|
|
|
"lengthMenu": "<select name='dataTable_length' aria-controls='dataTable' class='custom-select custom-select-sm form-control form-control-sm'><option value='10'>10</option><option value='25'>25</option><option value='50'>50</option><option value='100'>100</option></select> 选择每页显示个数",
|
|
|
"info": "显示 _START_ 到 _END_，共 _TOTAL_ 条记录",
|
|
|
"paginate": {
|
|
|
"previous": "上一页",
|
|
|
"next": "下一页"
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
