1.后台管理员首页增加总访问量和总赞数选项卡。

2.点击总访问量，提示具体访问量数字，选项卡中只显示大概访问量，例如（2.3w,1.2k等）

1.后台管理员首页增加总访问量和总赞数选项卡。
2.点击总访问量，提示具体访问量数字，选项卡中只显示大概访问量，例如（2.3w,1.2k等）
7ad6abcc · 穆雄雄 · 1bf9f570 · 7ad6abcc · 7ad6abcc · 7ad6abcc
4 changed file
--- a/blog-admin/src/main/resources/static/assets/js/zhyd.echarts.js
+++ b/blog-admin/src/main/resources/static/assets/js/zhyd.echarts.js
@@ -5,7 +5,450 @@
 * @since 1.0
 */
 var zhyd = window.zhyd || {};
+
+//扩展echart图表样式
 zhyd.chartConfig = {
+
+    "color": [
+        "#5470c6",
+        "#91cc75",
+        "#fac858",
+        "#ee6666",
+        "#73c0de",
+        "#3ba272",
+        "#fc8452",
+        "#9a60b4",
+        "#ea7ccc",
+        "#60c0dd",
+        "#d7504b",
+        "#c6e579",
+        "#f4e001",
+        "#f0805a",
+        "#26c0c0"
+    ],
+    "backgroundColor": "rgba(254,248,239,1)",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#27727b"
+        },
+        "subtextStyle": {
+            "color": "#aaaaaa"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "5",
+        "symbol": "emptyCircle",
+        "smooth": false
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "5",
+        "symbol": "emptyCircle",
+        "smooth": false
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 0,
+            "barBorderColor": "#ccc"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#c1232b",
+            "color0": "#b5c334",
+            "borderColor": "#c1232b",
+            "borderColor0": "#b5c334",
+            "borderWidth": 1
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        },
+        "lineStyle": {
+            "width": 1,
+            "color": "#aaaaaa"
+        },
+        "symbolSize": "5",
+        "symbol": "emptyCircle",
+        "smooth": false,
+        "color": [
+            "#c1232b",
+            "#27727b",
+            "#fcce10",
+            "#e87c25",
+            "#b5c334",
+            "#fe8463",
+            "#9bca63",
+            "#fad860",
+            "#f3a43b",
+            "#60c0dd",
+            "#d7504b",
+            "#c6e579",
+            "#f4e001",
+            "#f0805a",
+            "#26c0c0"
+        ],
+        "label": {
+            "color": "#eeeeee"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#dddddd",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "#fe994e",
+                "borderColor": "#444",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#c1232b"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(100,0,0)"
+                }
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "normal": {
+                "areaColor": "#dddddd",
+                "borderColor": "#eeeeee",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "areaColor": "#fe994e",
+                "borderColor": "#444",
+                "borderWidth": 1
+            }
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#c1232b"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "rgb(100,0,0)"
+                }
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#27727b"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#27727b"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#333"
+            }
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": [
+                    "#ccc"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.3)",
+                    "rgba(200,200,200,0.3)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#333"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#ccc"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.3)",
+                    "rgba(200,200,200,0.3)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#27727b"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#333"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#ccc"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.3)",
+                    "rgba(200,200,200,0.3)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#27727b"
+            }
+        },
+        "axisTick": {
+            "show": true,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "textStyle": {
+                "color": "#333"
+            }
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#ccc"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.3)",
+                    "rgba(200,200,200,0.3)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "normal": {
+                "borderColor": "#c1232b"
+            },
+            "emphasis": {
+                "borderColor": "#e87c25"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#333333"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#27727b",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#27727b",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#293c55",
+            "width": 1
+        },
+        "itemStyle": {
+            "normal": {
+                "color": "#27727b",
+                "borderWidth": 1
+            },
+            "emphasis": {
+                "color": "#72d4e0"
+            }
+        },
+        "controlStyle": {
+            "normal": {
+                "color": "#27727b",
+                "borderColor": "#27727b",
+                "borderWidth": 0.5
+            },
+            "emphasis": {
+                "color": "#27727b",
+                "borderColor": "#27727b",
+                "borderWidth": 0.5
+            }
+        },
+        "checkpointStyle": {
+            "color": "#c1232b",
+            "borderColor": "#c23531"
+        },
+        "label": {
+            "normal": {
+                "textStyle": {
+                    "color": "#293c55"
+                }
+            },
+            "emphasis": {
+                "textStyle": {
+                    "color": "#293c55"
+                }
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#c1232b",
+            "#fcce10"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(0,0,0,0)",
+        "dataBackgroundColor": "rgba(181,195,52,0.3)",
+        "fillerColor": "rgba(181,195,52,0.2)",
+        "handleColor": "#27727b",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#eeeeee"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#eeeeee"
+            }
+        }
+    }
+}
+
+
+/*初始化数据,这是原来的*/
+/*zhyd.chartConfig = {
        color: ["#26B99A", "#34495E", "#BDC3C7", "#3498DB", "#9B59B6", "#8abb6f", "#759c6a", "#bfd3b7"],
        title: {
            itemGap: 8,
@@ -208,7 +651,7 @@ zhyd.chartConfig = {
        textStyle: {
            fontFamily: "Arial, Verdana, sans-serif"
        }
-    };
+    };*/
 zhyd.createChart = function (options) {
    var op = $.extend({
        id: '',

--- a/blog-admin/src/main/resources/templates/index.ftl
+++ b/blog-admin/src/main/resources/templates/index.ftl
@@ -72,44 +72,67 @@
    <div class="col-md-12 col-sm-12 col-xs-12 top_tiles">
        <#-- 文章 -->
        <a href="/articles" class="statistics-panel">
-            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 statistics-article" data-key="articleCount">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-article" data-key="articleCount">
                <div class="tile-stats statistics-box">
-                    <div class="icon"><i class="fa fa-envira"></i></div>
-                    <div class="count"></div>
+                    <div class="icon"><i style="color: #5470c6;" class="fa fa-envira"></i></div>
+                    <div class="count" style="color: #9a60b4"></div>
                    <h4>文章</h4>
                </div>
            </div>
        </a>
        <#-- 标签 -->
        <a href="/article/tags" class="statistics-panel">
-            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 statistics-tag" data-key="tagCount">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-tag" data-key="tagCount">
                <div class="tile-stats statistics-box">
-                    <div class="icon"><i class="fa fa-tags"></i></div>
-                    <div class="count"></div>
+                    <div class="icon"><i style="color: #91cc75;" class="fa fa-tags"></i></div>
+                    <div class="count" style="color: #ea7ccc"></div>
                    <h4>标签</h4>
                </div>
            </div>
        </a>
        <#-- 分类 -->
        <a href="/article/types" class="statistics-panel">
-            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 statistics-type" data-key="typeCount">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-type" data-key="typeCount">
                <div class="tile-stats statistics-box">
-                    <div class="icon"><i class="fa fa-th"></i></div>
-                    <div class="count"></div>
+                    <div class="icon"><i style="color: #fac858;" class="fa fa-th"></i></div>
+                    <div class="count" style="color: #60c0dd"></div>
                    <h4>分类</h4>
                </div>
            </div>
        </a>
        <#-- 评论 -->
        <a href="/comments" class="statistics-panel">
-            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 statistics-comment" data-key="commentCount">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-comment" data-key="commentCount">
                <div class="tile-stats statistics-box">
-                    <div class="icon"><i class="fa fa-comments-o"></i></div>
-                    <div class="count"></div>
+                    <div class="icon"><i style="color: #ee6666;" class="fa fa-comments-o"></i></div>
+                    <div class="count" style="color: #d7504b"></div>
                    <h4>留言数</h4>
                </div>
            </div>
        </a>
+
+        <#--总访问 量-->
+        <a id="fangwen" href="#" class="statistics-panel">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-lookCount" data-key="lookCount">
+                <#--隐藏域，放进去值，方便运算-->
+                <input type="hidden" id="fangwen_inp" value="">
+                <div class="tile-stats statistics-box">
+                    <div class="icon"><i style="color: #73c0de;" class="fa fa-bar-chart"></i></div>
+                    <div class="count" id="l_count_mxx" style="color: #c6e579;"></div>
+                    <h4>访问量</h4>
+                </div>
+            </div>
+        </a>
+        <#--总赞数-->
+        <a href="/lookCount" class="statistics-panel">
+            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 statistics-zanCount" data-key="zanCount">
+                <div class="tile-stats statistics-box">
+                    <div class="icon"><i style="color: #FF6666;" class="fa fa-thumbs-o-up"></i></div>
+                    <div class="count"></div>
+                    <h4>总赞量</h4>
+                </div>
+            </div>
+        </a>
    </div>
 </div>
 <div class="row">
@@ -263,52 +286,97 @@
        localStorage.setItem("neverShowNoticeModal", 1);
    })
 </script>
-<script>
-    /* 顶部卡片统计 */
-    $.post("/statistics/siteInfo", function (json) {
-        $.alert.ajaxSuccess(json);
-        if(json.status == 200){
-            var jsonData = json.data;
+    <script>
+        /* 顶部卡片统计 */
+        $.post("/statistics/siteInfo", function (json) {
+            $.alert.ajaxSuccess(json);
+            if (json.status == 200) {
+                //给隐藏域里面设置访问量，好让点击的时候能看到具体的数字，心理有个数
+                var $this = $(".statistics-lookCount");
+                var jsonData = json.data;
+                var jsonKey = $this.data("key");
+                $("#fangwen_inp").val(jsonData[jsonKey]);
+
+                //end
+
+                function setValue(dom, value) {
+                    var $dom = dom;
+                    $dom.find("div.tile-stats .count").text(value);

-            function setValue(dom, value) {
-                var $dom = dom;
-                $dom.find("div.tile-stats .count").text(value);
+                }
+
+                $(".statistics-tag, .statistics-type, .statistics-comment, .statistics-article, .statistics-lookCount, .statistics-zanCount").each(function () {
+                    var $this = $(this);
+                    var jsonKey = $this.data("key");
+                    setValue($this, jsonData[jsonKey]);
+                });
            }
+            //设置显示数字格式，k或者w
+            $(function () {
+                var num = $("#l_count_mxx").text();
+
+                // var num = 1209;
+                //点击显示访问量
+                $("#fangwen").click(function () {
+                    layui.use('layer', function () {
+                        var layer = layui.layer;
+                        layer.msg("总访问量是：" + $("#fangwen_inp").val(), {
+                            time: 2000  //20s后自动关闭
+
+                        });
+                    });
+                });
+                //转换数字格式，k或者w
+                if (num >= 10000) {
+                    num = Math.round(num / 1000) / 10 + 'W';
+
+                } else if (num >= 1000) {
+                    num = Math.round(num / 100) / 10 + 'K';
+                }
+                $("#l_count_mxx").text(num);
+                //点击显示详细的
+

-            $(".statistics-tag, .statistics-type, .statistics-comment, .statistics-article").each(function () {
-                var $this = $(this);
-                var jsonKey = $this.data("key");
-                setValue($this, jsonData[jsonKey]);
            });
-        }
-    });
-    /* 分类文章数统计 */
-    $.post("/statistics/listType", function (json) {
-        $.alert.ajaxSuccess(json);
-        if(json.status == 200){
-            var jsonData = json.data;
-            zhyd.createChart({id:'echart_type', legendData: getNames(jsonData, 'name'), series:{name:'分类文章数统计', type: 'pie', seriesData: jsonData}});
-        }
-    });

-    /* 爬虫访问统计 */
-    $.post("/statistics/listSpider", function (json) {
-        $.alert.ajaxSuccess(json);
-        if(json.status == 200){
-            var jsonData = json.data || [{name: '暂无', value: 0}];
-            zhyd.createChart({id:'echart_spider', legendData: getNames(jsonData, 'name'), series:{name:'爬虫访问统计', type: 'pie', seriesData: jsonData}});
-        }
-    });
-    function getNames(arr, key) {
-        if(!arr){
-            return [];
-        }
-        var resultArr = [];
-        $.each(arr, function (i, v) {
-            resultArr.push(v[key]);
        });
-        return resultArr;
-    }
-    init_echarts();
-</script>
+
+
+        /* 分类文章数统计 */
+        $.post("/statistics/listType", function (json) {
+            $.alert.ajaxSuccess(json);
+            if (json.status == 200) {
+                var jsonData = json.data;
+                zhyd.createChart({
+                    id: 'echart_type',
+                    legendData: getNames(jsonData, 'name'),
+                    series: {name: '分类文章数统计', type: 'pie', seriesData: jsonData}
+                });
+            }
+        });
+
+        /* 爬虫访问统计 */
+        $.post("/statistics/listSpider", function (json) {
+            $.alert.ajaxSuccess(json);
+            if (json.status == 200) {
+                var jsonData = json.data || [{name: '暂无', value: 0}];
+                zhyd.createChart({id:'echart_spider', legendData: getNames(jsonData, 'name'), series:{name:'爬虫访问统计', type: 'pie', seriesData: jsonData}});
+            }
+        });
+        function getNames(arr, key) {
+            if(!arr){
+                return [];
+            }
+            var resultArr = [];
+            $.each(arr, function (i, v) {
+                resultArr.push(v[key]);
+            });
+            return resultArr;
+        }
+
+        init_echarts();
+        $("#noticeModal").modal('show');
+
+
+    </script>
 </@footer>
--- a/blog-admin/src/main/resources/templates/layout/footer.ftl
+++ b/blog-admin/src/main/resources/templates/layout/footer.ftl
@@ -27,6 +27,7 @@
 <script src="https://cdn.jsdelivr.net/npm/switchery-npm@0.8.2/index.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/wangeditor@3.1.1/release/wangEditor.min.js" type="text/javascript"></script>
 <script src="https://cdn.jsdelivr.net/npm/@adactive/bootstrap-tagsinput@0.8.2/dist/bootstrap-tagsinput.min.js"></script>
+<script src="https://www.layuicdn.com/layui/layui.js"></script>
 <#--
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.buttons.js"></script>

--- a/blog-core/src/main/resources/mybatis/SysConfigMapper.xml
+++ b/blog-core/src/main/resources/mybatis/SysConfigMapper.xml
@@ -4,7 +4,7 @@
 <mapper namespace="com.zyd.blog.persistence.mapper.SysConfigMapper">

    <select id="getSiteInfo" resultType="map">
-		SELECT
+		/*SELECT
 			co.articleCount AS articleCount,
 			co.commentCount AS commentCount,
 			co.tagCount AS tagCount,
@@ -58,7 +58,57 @@
 					create_time DESC
 				LIMIT 1
 			) da
-		ON 1 = 1;
+		ON 1 = 1;*/
+
+		SELECT co.articleCount AS articleCount,
+			   co.commentCount AS commentCount,
+			   co.tagCount     AS tagCount,
+			   co.typeCount    AS typeCount,
+			   co.lookCount    AS lookCount,
+			   co.zanCount     AS zanCount,
+			   da.recorde_time AS lastUpdateTime
+
+		FROM (
+				 SELECT a.article_count AS articleCount,
+						t.tag_count     AS tagCount,
+						type.type_count AS typeCount,
+						c.comment_count AS commentCount,
+						look.look_count AS lookCount,
+						zan.zan_count   AS zanCount
+				 FROM (
+						  SELECT COUNT(1) AS article_count
+						  FROM biz_article
+						  WHERE `status` = 1
+					  ) a,
+					  (
+						  SELECT COUNT(1) AS tag_count
+						  FROM biz_tags
+					  ) t,
+					  (
+						  SELECT COUNT(1) AS type_count
+						  FROM biz_type
+						  WHERE available = 1
+					  ) TYPE,
+					  (
+						  SELECT COUNT(1) AS comment_count
+						  FROM biz_comment
+						  WHERE `status` = 'APPROVED'
+					  ) c,
+					  (
+						  SELECT COUNT(1) AS look_count
+						  FROM biz_article_look
+					  ) look,
+					  (
+						  SELECT COUNT(1) AS zan_count
+						  FROM biz_article_love
+					  ) zan
+			 ) co
+				 LEFT JOIN (
+			SELECT DATE_FORMAT(recorde_time, '%Y年%m月%d日%H点') AS recorde_time
+			FROM sys_update_recorde
+			ORDER BY create_time DESC LIMIT 1
+		) da
+						   ON 1 = 1;
 	</select>
 </mapper>