万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
戒酒的李白
061a2a13 1 parent 46cb2308

【base_page.html】基础首页框架搭建

Inline Side-by-side
Showing 1 changed file with 518 additions and 0 deletions
  1 +
  2 +<!doctype html>
  3 +<html lang="en">
  4 + <head>
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 + <title>{% block title %}首页{% endblock %}</title>
  8 +
  9 + <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
  10 + <link rel="stylesheet" href="/static/css/backend.css">
  11 + <meta name="referrer" content="no-referrer" />
  12 + </head>
  13 + <body class=" ">
  14 + <!-- loader Start -->
  15 + <div id="loading">
  16 + <div id="loading-center">
  17 + </div>
  18 + </div>
  19 + <!-- loader END -->
  20 + <!-- Wrapper Start -->
  21 + <div class="wrapper">
  22 + <div class="iq-sidebar sidebar-default ">
  23 + <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
  24 + <a href="" class="header-logo">
  25 + <img src="https://weibo.com/favicon.ico" class="img-fluid rounded-normal light-logo" alt="logo">
  26 + <span>微博舆情数据分析</span>
  27 + </a>
  28 + <div class="side-menu-bt-sidebar-1">
  29 + <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  30 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
  31 + </svg>
  32 + </div>
  33 + </div>
  34 + <div class="data-scrollbar" data-scroll="1">
  35 + {% block nav %}
  36 + <nav class="iq-sidebar-menu">
  37 + <ul id="iq-sidebar-toggle" class="side-menu">
  38 + <li class="px-3 pt-3 pb-2 ">
  39 + <span class="text-uppercase small font-weight-bold">首页</span>
  40 + </li>
  41 + <li class="active sidebar-layout">
  42 + <a href="/page/home" class="svg-icon">
  43 + <i class="">
  44 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  45 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
  46 + </svg>
  47 + </i>
  48 + <span class="ml-2">首页</span>
  49 + </a>
  50 + </li>
  51 + <li class=" sidebar-layout">
  52 + <a href="/page/hotWord" class="svg-icon ">
  53 + <i class="">
  54 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  55 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
  56 + </svg>
  57 + </i>
  58 + <span class="ml-2">热词统计</span>
  59 + </a>
  60 + </li>
  61 + <li class=" sidebar-layout">
  62 + <a href="/page/tableData" class="svg-icon">
  63 + <i class="">
  64 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  65 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
  66 + </svg>
  67 + </i>
  68 + <span class="ml-2">微博舆情统计</span>
  69 + </a>
  70 + </li>
  71 + <li class="px-3 pt-3 pb-2 ">
  72 + <span class="text-uppercase small font-weight-bold">数据可视化</span>
  73 + </li>
  74 + <li class=" sidebar-layout">
  75 + <a href="/page/articleChar" class="svg-icon">
  76 + <i class="">
  77 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  78 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
  79 + </svg>
  80 + </i>
  81 + <span class="ml-2">文章分析</span>
  82 + </a>
  83 + </li>
  84 + <li class=" sidebar-layout">
  85 + <a href="/page/ipChar" class="svg-icon">
  86 + <i class="">
  87 + <svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
  88 + <path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
  89 + <line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
  90 + </svg>
  91 + </i>
  92 + <span class="ml-2">IP分析</span>
  93 + </a>
  94 + </li>
  95 + <li class=" sidebar-layout">
  96 + <a href="/page/commentChar" class="svg-icon">
  97 + <i class="">
  98 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  99 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
  100 + </svg>
  101 + </i><span class="ml-2">评论分析</span>
  102 + </a>
  103 + </li>
  104 + <li class=" sidebar-layout">
  105 + <a href="/page/yuqingChar" class="svg-icon">
  106 + <i class="">
  107 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  108 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
  109 + </svg>
  110 + </i>
  111 + <span class="ml-2">舆情分析</span>
  112 + </a>
  113 + </li>
  114 + <li class="px-3 pt-3 pb-2">
  115 + <span class="text-uppercase small font-weight-bold">词云图</span>
  116 + </li>
  117 + <li class=" sidebar-layout">
  118 + <a href="/page/articleCloud" class="svg-icon">
  119 + <i class="">
  120 + <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  121 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
  122 + </svg>
  123 + </i><span class="ml-2">文章内容词云图</span>
  124 + </a>
  125 + </li>
  126 + </ul>
  127 + </nav>
  128 + {% endblock %}
  129 + <div class="pt-5 pb-5"></div>
  130 + </div>
  131 + </div>
  132 + <div class="iq-top-navbar">
  133 + <div class="iq-navbar-custom">
  134 + <nav class="navbar navbar-expand-lg navbar-light p-0">
  135 + <div class="side-menu-bt-sidebar">
  136 + <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  137 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  138 + </svg>
  139 + </div>
  140 + <div class="d-flex align-items-center">
  141 + <div class="change-mode">
  142 + <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
  143 + <div class="custom-switch-inner">
  144 + <p class="mb-0"> </p>
  145 + <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
  146 + <label class="custom-control-label" for="dark-mode" data-mode="toggle">
  147 + <span class="switch-icon-right">
  148 + <svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  149 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
  150 + </svg>
  151 + </span>
  152 + <span class="switch-icon-left">
  153 + <svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  154 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
  155 + </svg>
  156 + </span>
  157 + </label>
  158 + </div>
  159 + </div>
  160 + </div>
  161 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
  162 + <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  163 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
  164 + </svg>
  165 + </button>
  166 + <div class="collapse navbar-collapse" id="navbarSupportedContent">
  167 + <ul class="navbar-nav ml-auto navbar-list align-items-center">
  168 + <li class="nav-item nav-icon dropdown">
  169 + <a href="#" class="nav-item nav-icon dropdown-toggle pr-0 search-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  170 + <span class="mb-0 ml-2 user-name">{{ username }}</span>
  171 + </a>
  172 + <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  173 + <li class="dropdown-item d-flex svg-icon ">
  174 + <a href="/user/logOut">退出登录</a>
  175 + </li>
  176 + </ul>
  177 + </li>
  178 + </ul>
  179 + </div>
  180 + </div>
  181 + </nav>
  182 + </div>
  183 + </div>
  184 + <div class="content-page">
  185 + {% block content %}
  186 + <div class="container-fluid">
  187 + <div class="row">
  188 + <div class="col-md-12 mb-4 mt-1">
  189 + <div class="d-flex flex-wrap justify-content-between align-items-center">
  190 + <h4 class="font-weight-bold">首页</h4>
  191 + </div>
  192 + </div>
  193 + <div class="col-lg-8 col-md-12">
  194 + <div class="row">
  195 + <div class="col-md-4">
  196 + <div class="card">
  197 + <div class="card-body">
  198 + <div class="d-flex align-items-center">
  199 + <div class="">
  200 + <p class="mb-2 text-secondary">文章个数</p>
  201 + <div class="d-flex flex-wrap justify-content-start align-items-center">
  202 + <h5 class="mb-0 font-weight-bold">{{ articleLenMax }}个</h5>
  203 + </div>
  204 + </div>
  205 + </div>
  206 + </div>
  207 + </div>
  208 + </div>
  209 + <div class="col-md-4">
  210 + <div class="card">
  211 + <div class="card-body">
  212 + <div class="d-flex align-items-center">
  213 + <div class="">
  214 + <p class="mb-2 text-secondary">最高点赞微博-作者</p>
  215 + <div class="d-flex flex-wrap justify-content-start align-items-center">
  216 + <h5 class="mb-0 font-weight-bold">{{ likeCountMaxAuthorName }}</h5>
  217 + </div>
  218 + </div>
  219 + </div>
  220 + </div>
  221 + </div>
  222 + </div>
  223 + <div class="col-md-4">
  224 + <div class="card">
  225 + <div class="card-body">
  226 + <div class="d-flex align-items-center">
  227 + <div class="">
  228 + <p class="mb-2 text-secondary">最多城市</p>
  229 + <div class="d-flex flex-wrap justify-content-start align-items-center">
  230 + <h5 class="mb-0 font-weight-bold">{{ cityMax }}</h5>
  231 + </div>
  232 + </div>
  233 + </div>
  234 + </div>
  235 + </div>
  236 + </div>
  237 + <div class="col-md-12">
  238 + <div class="card">
  239 + <div class="card-body">
  240 + <div class="d-flex justify-content-between align-items-center flex-wrap">
  241 + <h4 class="font-weight-bold">文章发布时间个数</h4>
  242 + </div>
  243 + <div id="main" style="width:100%;height: 350px" class="custom-chart"></div>
  244 + </div>
  245 + </div>
  246 + </div>
  247 + </div>
  248 + </div>
  249 + <div class="col-lg-4 col-md-8">
  250 + <div class="card card-block card-stretch card-height">
  251 + <div class="card-header card-header-border d-flex justify-content-between">
  252 + <div class="header-title">
  253 + <h4 class="card-title">评论点赞量 Top Fore</h4>
  254 + </div>
  255 + </div>
  256 + <div class="card-body-list">
  257 + <ul class="list-style-3 mb-0">
  258 + {% for i in commentsLikeCountTopFore %}
  259 + <li class="p-3 list-item d-flex justify-content-start align-items-center">
  260 + <div class="avatar">
  261 + <p>
  262 + 🧑‍ {{ i[5] }}
  263 + </p>
  264 + <p class="mb-0" style="color:#ccc;width:320px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">
  265 + {{ i[4] }}
  266 + </p>
  267 + </div>
  268 + <div class="list-style-action d-flex justify-content-end ml-auto">
  269 + <h6 class="font-weight-bold text-danger">👍 {{ i[2] }}</h6>
  270 + </div>
  271 + </li>
  272 + {% endfor %}
  273 + <div class="d-flex justify-content-end align-items-center border-top-table p-3">
  274 + <a href="/page/tableData" class="btn btn-secondary btn-sm">查看全部</a>
  275 + </div>
  276 + </ul>
  277 + </div>
  278 + </div>
  279 +
  280 + </div>
  281 + <div class="col-lg-4 col-md-6">
  282 + <div class="card card-block card-stretch card-height">
  283 + <div class="card-header d-flex justify-content-between">
  284 + <div class="header-title">
  285 + <h4 class="card-title">文章类型占比</h4>
  286 + </div>
  287 + </div>
  288 + <div class="card-body p-0">
  289 + <div id="mainTwo" style="width:100%;height:350px">
  290 +
  291 + </div>
  292 + </div>
  293 + </div>
  294 + </div>
  295 + <div class="col-lg-4 col-md-6">
  296 + <div class="card card-block card-stretch card-height">
  297 + <div class="card-header d-flex justify-content-between">
  298 + <div class="header-title">
  299 + <h4 class="card-title">评论用户名词云图</h4>
  300 + </div>
  301 + </div>
  302 + <div class="card-body p-0">
  303 + <div id="mainTwo" style="width:100%;height:350px;text-align: center">
  304 + <img style="width:85%" src="/static/authorNameCloud.jpg" alt="">
  305 + </div>
  306 + </div>
  307 + </div>
  308 + </div>
  309 + <div class="col-lg-4 col-md-6">
  310 + <div class="card card-block card-stretch card-height">
  311 + <div class="card-header d-flex justify-content-between">
  312 + <div class="header-title">
  313 + <h4 class="card-title">评论用户时间占比</h4>
  314 + </div>
  315 + </div>
  316 + <div class="card-body p-0">
  317 + <div id="mainThree" style="width:100%;height:350px">
  318 +
  319 + </div>
  320 + </div>
  321 + </div>
  322 + </div>
  323 + </div>
  324 +</div>
  325 + {% endblock %}
  326 + </div>
  327 + </div>
  328 + <!-- Wrapper End-->
  329 + <footer class="iq-footer">
  330 + <div class="container-fluid">
  331 + <div class="row">
  332 + <div class="col-lg-6">
  333 + </div>
  334 + <div class="col-lg-6 text-right">
  335 + <span class="mr-1">Copyright &copy; 2023.<a target="_blank" href="#">微博舆情数据分析</a></span>
  336 + </div>
  337 + </div>
  338 + </div>
  339 + </footer>
  340 + <script src="/static/echarts.min.js"></script>
  341 + <script src="/static/china.js"></script>
  342 + {% block echarts %}
  343 + <script>
  344 + var chartDom = document.getElementById('main');
  345 + var myCharts = echarts.init(chartDom);
  346 + var option;
  347 + var xData = {{ xData | tojson }};
  348 + var yData = {{ yData }};
  349 + var xRes = []
  350 + var yRes = []
  351 + for(var i = 0;i < 8;i++){
  352 + xRes.push(xData[i])
  353 + yRes.push(yData[i])
  354 + }
  355 + option = {
  356 + tooltip:{
  357 + trigger:"axis"
  358 + },
  359 + legend:{},
  360 + toolbox: {
  361 + show: true,
  362 + feature: {
  363 + dataZoom: {
  364 + yAxisIndex: 'none'
  365 + },
  366 + dataView: { readOnly: false },
  367 + magicType: { type: ['line', 'bar'] },
  368 + restore: {},
  369 + saveAsImage: {}
  370 + }
  371 + },
  372 + xAxis: {
  373 + type: 'category',
  374 + boundaryGap: false,
  375 + data: xRes
  376 + },
  377 + yAxis: {
  378 + type: 'value'
  379 + },
  380 + series: [
  381 + {
  382 + name:"日期个数",
  383 + data: yRes,
  384 + type: 'line',
  385 + areaStyle: {
  386 + color:"rgba(0,128,255,0.2)"
  387 + },
  388 + smooth:true,
  389 + lineStyle:{
  390 + width:5
  391 + },
  392 + emphasis:{
  393 + focus:'series'
  394 + }
  395 + }
  396 + ]
  397 + };
  398 + let count = 8;
  399 + setInterval(()=>{
  400 + if(count >= xData.length) count=0
  401 + xRes.shift()
  402 + xRes.push(xData[count])
  403 + yRes.shift()
  404 + yRes.push(yData[count])
  405 + count++
  406 + myCharts.setOption({
  407 + xAxis:[{
  408 + data:xRes
  409 + }],
  410 + series:[{
  411 + data:yRes
  412 + }]
  413 + })
  414 + },2000)
  415 +
  416 + option && myCharts.setOption(option);
  417 +
  418 + </script>
  419 + <script>
  420 + var chartDom = document.getElementById('mainTwo');
  421 + var myChart = echarts.init(chartDom);
  422 + var option;
  423 +
  424 + option = {
  425 + title: {
  426 + text: '各微博类型占比饼状图',
  427 + left: 'center'
  428 + },
  429 + tooltip: {
  430 + trigger: 'item'
  431 + },
  432 + legend: {
  433 + orient: 'vertical',
  434 + left: 'left',
  435 + padding:[10,20,30,20],
  436 + },
  437 + series: [
  438 + {
  439 + name: '博客类型占比',
  440 + type: 'pie',
  441 + radius: '50%',
  442 + data: {{ typeChart |tojson }},
  443 + emphasis: {
  444 + itemStyle: {
  445 + shadowBlur: 10,
  446 + shadowOffsetX: 0,
  447 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  448 + }
  449 + }
  450 + }
  451 + ]
  452 + };
  453 +
  454 + option && myChart.setOption(option);
  455 +
  456 + </script>
  457 + <script>
  458 + var chartDom = document.getElementById('mainThree');
  459 + var myChart = echarts.init(chartDom);
  460 + var option;
  461 +
  462 + option = {
  463 + tooltip: {
  464 + trigger: 'item'
  465 + },
  466 + legend: {
  467 + top: '5%',
  468 + left:10,
  469 + right:10,
  470 + type: 'scroll',
  471 + },
  472 + series: [
  473 + {
  474 + name: '评论时间发布个数',
  475 + type: 'pie',
  476 + radius: ['60%', '50%'],
  477 + avoidLabelOverlap: false,
  478 + label: {
  479 + show: false,
  480 + position: 'center'
  481 + },
  482 + emphasis: {
  483 + label: {
  484 + show: true,
  485 + fontSize: 20,
  486 + fontWeight: 'bold'
  487 + }
  488 + },
  489 + labelLine: {
  490 + show: false
  491 + },
  492 + data: {{ createAtChart | tojson }}
  493 + }
  494 + ]
  495 + };
  496 +
  497 + option && myChart.setOption(option);
  498 +
  499 + </script>
  500 + {% endblock %}
  501 + <script src="/static/js/backend-bundle.min.js"></script>
  502 + <script src="/static/js/customizer.js"></script>
  503 + <script src="/static/js/sidebar.js"></script>
  504 + <script src="/static/js/flex-tree.min.js"></script>
  505 + <script src="/static/js/tree.js"></script>
  506 + <script src="/static/js/table-treeview.js"></script>
  507 + <script src="/static/js/sweetalert.js"></script>
  508 + <script src="/static/js/vector-map-custom.js"></script>
  509 + <script src="/static/js/chart-custom.js"></script>
  510 + <script src="/static/js/01.js"></script>
  511 + <script src="/static/js/02.js"></script>
  512 + <script src="/static/js/slider.js"></script>
  513 + <script src="/static/js/index.js" type="module"></script>
  514 + <script src="/static/js/app.js">
  515 +
  516 + </script>
  517 + </body>
  518 +</html>