提交

css/index.css

@@ -274,6 +274,9 @@ body {
   line-height: 60px;
   cursor: default;
   position: relative;
+  overflow: hidden;
+}
+.skeleton .leftBody .menu .menuliText {
   white-space: nowrap; /*设置不折行*/
   text-overflow: ellipsis; /*这就是省略号喽*/
   -o-text-overflow: ellipsis; /*兼容opera*/
@@ -369,12 +372,13 @@ body {
 }
 
 .skeleton .iframe {
-  border: 1em solid #000;
+  /* border: 1px solid #000; */
   background-color: #fff;
   border-radius: 5px;
-  width: 400px;
-  height: 720px;
-  margin: 20px auto;
+  /* width: 500px; */
+  height: 100%;
+  padding: 3px;
+  margin: 0 auto;
 }
 
 .loading span:nth-child(2) {

item.html

@@ -77,14 +77,14 @@
                         <div class="col-xs-6" style="padding-left: 0;">部门传播量排行</div>
                         <div class="col-xs-6" style="text-align: right;">
                             <div class="btn-group btn-group-xs " role="group">
-                                <div type="button" class="btn btn-default">全部</div>
-                                <div type="button" class="btn btn-default">月</div>
-                                <div type="button" class="btn btn-default">周</div>
+                                <div class="btn btn-default typeclick">全部</div>
+                                <div class="btn btn-default typeclick">月</div>
+                                <div class="btn btn-default typeclick">周</div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <canvas id="barChart" style="width: 100%;height: 100%;" class=""></canvas>
+                <canvas id="barChart" style="width: 100%;height: 70vw;" class=""></canvas>
             </div>
         </div>
         <div class="col-md-6">
@@ -105,35 +105,42 @@
         <div class="col-md-6">
             <div class="panel panel-default">
                 <div class="panel-heading">任务统计</div>
-                <div class="panel-body">
-                </div>
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <td>部门</td>
+                            <td>账号</td>
+                            <td>平台</td>
+                            <td>时间</td>
+                        </tr>
+                    </thead>
+                    <tbody class="summary1">
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
 </body>
 <script src="./js/base.js"></script>
 <script>
+    let linechart = null, barchart = null, type = "ALL";
     let searchObj = getsearch();
-
-
     function line1(li) {
+        if (linechart) linechart.destroy();
         // 传播量趋势
-        const chart = new F2.Chart({
+        linechart = new F2.Chart({
             id: 'container',
             pixelRatio: window.devicePixelRatio
         });
-        chart.source(li, {
-            time: {
-                type: 'timeCat',
+        linechart.source(li, {
+            dt: {
                 tickCount: 3,
-                range: [0, 1]
             },
-            tem: {
+            playCount: {
                 tickCount: 5,
-                min: 0
             }
         });
-        chart.axis('playCount', {
+        linechart.axis('playCount', {
             label: function label(text, index, total) {
                 const textCfg = {};
                 textCfg.text = formatnum(text);
@@ -142,7 +149,7 @@
             grid: null
         });
 
-        chart.axis('dt', {
+        linechart.axis('dt', {
             label: function label(text, index, total) {
                 const textCfg = {};
                 if (index === 0) {
@@ -153,8 +160,8 @@
                 return textCfg;
             }
         });
-        chart.tooltip({
-            triggerOn: [ 'touchstart', 'touchmove' ], 
+        linechart.tooltip({
+            triggerOn: ['touchstart', 'touchmove'],
             onShow: function onShow(ev) {
                 const items = ev.items;
                 items[0].name = items[0].title;
@@ -164,29 +171,30 @@
             }
         });
 
-        chart.area()
+        linechart.area()
             .position('dt*playCount')
             .color('l(90) 0:#1890FF 1:#f7f7f7')
             .shape('smooth');
-        chart.line()
+        linechart.line()
             .position('dt*playCount')
             .color('l(90) 0:#1890FF 1:#f7f7f7')
             .shape('smooth');
-        chart.render();
+        linechart.render();
     }
 
     function bar1(li) {
-        const chart = new F2.Chart({
+        if (barchart) barchart.destroy();
+        barchart = new F2.Chart({
             id: 'barChart',
             pixelRatio: window.devicePixelRatio
         });
 
-        chart.source(li, {
-            sales: {
+        barchart.source(li, {
+            readCount: {
                 tickCount: 3
             }
         });
-        chart.axis('readCount', {
+        barchart.axis('readCount', {
             label: function label(text, index, total) {
                 const textCfg = {};
                 textCfg.text = formatnum(text);
@@ -195,7 +203,7 @@
             grid: null
         });
 
-        chart.axis('depName', {
+        barchart.axis('depName', {
             label: function label(text, index, total) {
                 const textCfg = {};
                 if (index === 0) {
@@ -206,9 +214,13 @@
                 return textCfg;
             }
         });
-        chart.tooltip({
+
+        barchart.coord({
+            transposed: true
+        });
+        barchart.tooltip({
             showItemMarker: false,
-            triggerOn: [ 'touchstart', 'touchmove' ], 
+            triggerOn: ['touchstart', 'touchmove'],
             onShow: function onShow(ev) {
                 const items = ev.items;
                 items[0].name = null;
@@ -217,10 +229,10 @@
             }
         });
 
-        chart.interval()
+        barchart.interval()
             .position('depName*readCount')
             .color('l(90) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
-        chart.render();
+        barchart.render();
     }
 
     function gethistory() {
@@ -275,8 +287,8 @@
             let d = $("<div class='row'></div>");
             for (let i = 0; i < keys.length; i++) {
                 const v = keys[i];
-                if (v === '总传播量') d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-9 valTotle'>" + k[v] + "</div>"));
-                else d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-3 valTotle'>" + k[v] + "</div>"))
+                if (v === '总传播量') d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-9 valTotle'>" + formatnum(k[v]) + "</div>"));
+                else d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-3 valTotle'>" + formatnum(k[v]) + "</div>"))
             }
             $('.total').append(d);
         })
@@ -286,22 +298,52 @@
         require('POST', {
             url: "/topic/read",
             data: {
-                depRange: "ALL",
+                depRange: type,
                 title: searchObj.topic
             }
         }).then(data => {
             const li = data || [];
-            bar1(li);
+            bar1(li.reverse());
+        })
+    }
+
+    function getdetail() {
+        require('POST', {
+            url: "/topic/detail",
+            data: {
+                depRange: "ALL",
+                title: searchObj.topic
+            }
+        }).then(data => {
+            const li = (data.data || []).sort((a, b) => {
+                return b.readTotal - a.readTotal
+            });
+            for (let i = 0; i < li.length; i += 2) {
+                const v = li[i];
+                let tr = $("<tr></tr>");
+                tr.append($(`<td>${v.depName}</td><td>${v.name}</td><td>${v.platform}</td><td>${v.publishTime}</td>`));
+                $(".summary1").append(tr)
+            }
         })
     }
 
     function init() {
-        let h = $('.panel-body').width() * 9 / 16, typeDate = 'ALL';
+        let h = $('.panel-body').width() * 9 / 16;
         $('.panel-body').height(h);
+
+        $('.typeclick').click(function (e) {
+            let t = $(e.target).text();
+            if(t === '全部') type = "ALL";
+            if(t === '周') type = "WEEK";
+            if(t === '月') type = "MONTH";
+            getread();
+        })
+
         gethistory();
         getoverview();
         getread();
         getstart();
+        getdetail();
     }
     init();
 

js/base.js

@@ -135,15 +135,17 @@ function formatnum(text) {
   if (isNaN(text)) num = 0;
   if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + "亿";
   if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + "万";
-  return num
+  return num;
 }
 
 function require(type, conf) {
   return new Promise((resolve, reject) => {
-      const D = type === 'POST' ? JSON.stringify(conf.data || {}) : conf.data || {};
+    let D = {},
+      ct = "application/json";
+    D = type === "POST" ? JSON.stringify(conf.data || {}) : conf.data || {};
     $.ajax({
       url: Config.baseUrl + conf.url,
-      contentType: "application/json",
+      contentType: ct,
       dataType: "json",
       type: type || "GET",
       headers: {

skeleton.html

@@ -59,10 +59,11 @@
                 </div>
                 <div class="modal-body input-group">
                     <span class="input-group-addon" id="basic-addon1">活动名称</span>
-                    <input type="text" class="form-control" placeholder="请输入活动名称" aria-describedby="basic-addon1">
+                    <input type="text" class="form-control" id="hdname" placeholder="请输入活动名称"
+                        aria-describedby="basic-addon1">
                 </div>
                 <div class="modal-footer">
-                    <div type="button" class="btn btn-primary" data-dismiss="modal">保存</div>
+                    <div type="button" class="btn btn-primary uphd" data-dismiss="modal">保存</div>
                 </div>
             </div>
         </div>
@@ -80,7 +81,7 @@
                     <h4 class="modal-title" id="del_Activity"></h4>
                 </div>
                 <div class="modal-footer">
-                    <div type="button" class="btn btn-danger btn-sm" data-dismiss="modal">确定</div>
+                    <div type="button" class="btn btn-danger btn-sm delhd" data-dismiss="modal">删除</div>
                 </div>
             </div>
         </div>
@@ -95,15 +96,15 @@
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                             aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title" id="topic_title">Modal title</h4>
+                    <h4 class="modal-title" id="topic_title"></h4>
                 </div>
                 <div class="modal-body input-group">
                     <span class="input-group-addon" id="basic-addon1">话题名称</span>
-                    <input type="text" class="form-control" placeholder="请输入话题，多个话题使用中文分号隔开"
+                    <input type="text" class="form-control" placeholder="请输入话题，多个话题使用中文分号隔开" id="htname"
                         aria-describedby="basic-addon1">
                 </div>
                 <div class="modal-footer">
-                    <div type="button" class="btn btn-primary" data-dismiss="modal">保存</div>
+                    <div type="button" class="btn btn-primary bcht" data-dismiss="modal">保存</div>
                 </div>
             </div>
         </div>
@@ -121,7 +122,7 @@
                     <h4 class="modal-title" id="del_Topic"></h4>
                 </div>
                 <div class="modal-footer">
-                    <div type="button" class="btn btn-danger btn-sm" data-dismiss="modal">确定</div>
+                    <div type="button" class="btn btn-danger btn-sm delht" data-dismiss="modal">删除</div>
                 </div>
             </div>
         </div>
@@ -129,36 +130,46 @@
 </body>
 <script src="./js/base.js"></script>
 <script>
-    let activityList = [], topicList = [];
-    require('POST', {
-        url: "/activity/list"
-    }).then(data => {
-        activityList = data;
-        for (let i = 0; i < activityList.length; i++) {
-            const v = activityList[i];
-            const li = $(`<div class="menuLi menuActivity" data-id='${v.activityId}'>${v.name}</div>`);
-            const svg = $(`<img class='icon' data-id='${v.activityId}' data-title='${v.name}' src='./img/round_close.png' />`)
-            v.id !== -1 && li.append(svg);
-            $(".activity").append(li)
-        }
-        $($(".leftBody .menuActivity")[0]).click();
-    })
+    let activityList = [], topicList = [], tList = [];
+    getht(true);
 
     //  计算左侧功能栏列表高度
     const h = ($('.leftBody').height() - $(".proName").height()) / 2 - 40;
     $('.menu').attr("style", "height: " + h + 'px')
 
-    function getTopic(actname) {
+    function getht() {
+        require('POST', {
+            url: "/activity/list"
+        }).then(data => {
+            activityList = data;
+            let o = $(".menuLiAct").index() || 0;
+            o < 0 && (o = 0);
+            $(".activity").html("")
+            for (let i = 0; i < activityList.length; i++) {
+                const v = activityList[i];
+                const li = $(`<div class="menuLi menuActivity" data-id='${v.activityId}'><div data-id='${v.activityId}' class="menuliText">${v.name}</div></div>`);
+                const svg = $(`<img class='icon' data-id='${v.activityId}' data-title='${v.name}' src='./img/round_close.png' />`)
+                v.id !== -1 && li.append(svg);
+                $(".activity").append(li)
+            }
+            $($(".leftBody .menuliText")[o || 0]).click();
+        })
+    }
+
+    function getTopic(id) {
         require('POST', {
             url: "/topic/list",
+            ct: true,
             data: {
-                name: actname
+                activityId: id
             }
         }).then(data => {
-            for (let i = 0; i < topicList.length; i++) {
-                const v = topicList[i];
-                const li = $(`<div class="menuLi menuTopic" data-id='${v.id}'>${v.title}</div>`);
-                const svg = $(`<img class='icon' data-id='${v.id}' data-title='${v.title}' src='./img/round_close.png' />`)
+            tList = data || [];
+            $(".topic").html("")
+            for (let i = 0; i < tList.length; i++) {
+                const v = tList[i];
+                const li = $(`<div class="menuLi menuTopic" data-id='${v.topicId}'><div data-id='${v.topicId}' class="menuliText">${v.name}</div></div>`);
+                const svg = $(`<img class='icon' data-id='${v.topicId}' data-title='${v.name}' src='./img/round_close.png' />`)
                 v.id !== -1 && li.append(svg);
                 $(".topic").append(li)
             }
@@ -172,15 +183,16 @@
         localStorage.login = "";
         location.href = "./index.html";
     });
-    $(".leftBody").on('click', '.menuActivity', function () {
+    $(".leftBody").on('click', '.menuliText', function () {
         if ($(this).hasClass("menuLiAct")) return;
         $(".leftBody .menuActivity").removeClass("menuLiAct");
-        $(this).addClass("menuLiAct");
-        // getTopic($(this).text());
+        $(this).parent().addClass("menuLiAct");
+        getTopic($(this).attr('data-id'));
         $("#iframe")[0].src = `./item.html?id=${$(this).attr('data-id')}&topic=${$(this).text()}`;
     });
-    let allData = [];
+    let allData = [], selectid = "", topicId = "";
     $(".leftBody .activity").on('click', '.icon', function (e) {
+        selectid = $(this).attr('data-id');
         $("#del_Activity").text(`确定要删除 ${e.target.getAttribute("data-title") || ''} 活动?`)
         $('#delActivity').modal()
     })
@@ -191,12 +203,72 @@
     $(".leftBody .topic").on('click', '.icon', function (e) {
         $("#del_Topic").text(`确定要删除 ${e.target.getAttribute("data-title") || ''} 话题?`)
         $('#delTopic').modal()
+        topicId = $(this).attr('data-id');
     })
     $(".Topic").on('click', '.icon', function (e) {
         $("#topic_title").text(`添加话题`)
         $('#topic').modal()
     })
 
+    $('.uphd').click(function (e) {
+        require('POST', {
+            url: "/activity/adv-add",
+            data: {
+                name: document.getElementById("hdname").value
+            }
+        }).then(data => {
+            console.log(data)
+            showAlert('添加成功')
+            getht()
+        })
+    })
+
+    $('.delhd').click(function (e) {
+        if (!selectid) return false
+        require('POST', {
+            url: "/activity/delete",
+            data: {
+                activityId: selectid
+            }
+        }).then(data => {
+            console.log(data)
+            showAlert('删除成功')
+            getht()
+        })
+    })
+
+    $('.bcht').click(function (e) {
+        let v = $('#htname').val();
+        if (!v) return false
+        require('POST', {
+            url: "/topic/add",
+            data: {
+                activityId: $('.menuLiAct').attr('data-id'),
+                name: v.split("；")
+            }
+        }).then(data => {
+            console.log(data)
+            showAlert('删除成功')
+            getht()
+        })
+        console.log($('#htname').val(), $('.menuLiAct').attr('data-id'))
+    })
+
+
+    $('.delht').click(function (e) {
+        if (!topicId) return false
+        require('POST', {
+            url: "/topic/delete",
+            data: {
+                topicId: topicId
+            }
+        }).then(data => {
+            console.log(data)
+            showAlert('删除成功')
+            getht()
+        })
+    })
+
     function funTool(config) {
         this.config = config;
         this.add = () => { }

t.html

@@ -0,0 +1,44 @@
+<!-- <!DOCTYPE html>    
+<html lang="en">    
+<head>    
+    <meta charset="UTF-8">    
+    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
+    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
+ 
+    <title>复制按钮</title>    
+</head>    
+<body>    
+微信号：<span id="target">xyz2018</span>
+<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
+    点击复制    
+</button>    
+</body>    
+<script>    
+    $(document).ready(function(){      
+        var clipboard = new Clipboard('#copy_btn');    
+        clipboard.on('success', function(e) {    
+            alert("微信号复制成功",1500);
+            window.location.href='weixin://';
+            e.clearSelection();    
+            console.log(e.clearSelection);    
+        });    
+    });    
+</script>    
+</html> -->
+
+<!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.0">
+    <title>Document</title>
+</head>
+<body>
+    <img src="" id="img" alt="">
+    <script>
+        let img = document.getElementById("img");
+        img.src = location.search.replace("?", "");
+    </script>
+</body>
+</html>