liyongli
/
appDate


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/f2.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <style>
        .pageAccess .row {
            padding-left: 15px;
        }

        .pageAccess .col-md-6 {
            padding-left: 0;
        }

        .totalNum {
            font-size: 14px;
            text-align: center;
        }

        .totalNum .head {
            font-size: 42px;
            color: #91afc8;
        }

        .head {
            padding: 5px 5px 5px 10px;
            font-size: 17px;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .head .after {
            width: 3px;
            height: 1.1em;
            margin-left: -5px;
            display: inline-block;
            vertical-align: middle;
            background-color: #333;
        }

        .keyTotle,
        .valTotle {
            height: 30px;
            line-height: 30px;
        }

        .keyTotle {
            text-align: right;
        }
    </style>
</head>

<body class="pageAccess">
    <div class="panel panel-default total">
        <div class="panel-heading">传播数据</div>

    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">传播量趋势</div>
                <canvas id="container" style="width: 100%;height: 100%;" class=""></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading ">
                    <div class="row">
                        <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 class="btn btn-default typeclick ALL">全部</div>
                                <div class="btn btn-default typeclick MONTH">月</div>
                                <div class="btn btn-default typeclick WEEK">周</div>
                            </div>
                        </div>
                    </div>
                </div>
                <canvas id="barChart" style="width: 100%;height: 70vw;" class=""></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">任务统计</div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <td>话题</td>
                            <td>传播量</td>
                        </tr>
                    </thead>
                    <tbody class="summary">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">任务统计</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();
        // 传播量趋势
        linechart = new F2.Chart({
            id: 'container',
            pixelRatio: window.devicePixelRatio
        });
        linechart.source(li, {
            dt: {
                tickCount: 3,
            },
            playCount: {
                tickCount: 5,
            }
        });
        linechart.axis('playCount', {
            label: function label(text, index, total) {
                const textCfg = {};
                textCfg.text = formatnum(text);
                return textCfg;
            },
            grid: null
        });

        linechart.axis('dt', {
            label: function label(text, index, total) {
                const textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            }
        });
        linechart.tooltip({
            triggerOn: ['touchstart', 'touchmove'],
            onShow: function onShow(ev) {
                const items = ev.items;
                items[0].name = items[0].title;
                items[0].value = formatnum(text);
                items[1].name = null;
                items[1].value = 0;
            }
        });

        linechart.area()
            .position('dt*playCount')
            .color('l(90) 0:#1890FF 1:#f7f7f7')
            .shape('smooth');
        linechart.line()
            .position('dt*playCount')
            .color('l(90) 0:#1890FF 1:#f7f7f7')
            .shape('smooth');
        linechart.render();
    }

    function bar1(li) {
        if (barchart) barchart.destroy();
        barchart = new F2.Chart({
            id: 'barChart',
            pixelRatio: window.devicePixelRatio
        });

        barchart.source(li, {
            readCount: {
                tickCount: 3
            }
        });
        barchart.axis('readCount', {
            label: function label(text, index, total) {
                const textCfg = {};
                textCfg.text = formatnum(text);
                return textCfg;
            },
            grid: null
        });

        barchart.axis('depName', {
            label: function label(text, index, total) {
                const textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            }
        });

        barchart.coord({
            transposed: true
        });
        barchart.tooltip({
            showItemMarker: false,
            triggerOn: ['touchstart', 'touchmove'],
            onShow: function onShow(ev) {
                const items = ev.items;
                items[0].name = null;
                items[0].name = items[0].title;
                items[0].value = '¥ ' + items[0].value;
            }
        });

        barchart.interval()
            .position('depName*readCount')
            .color('l(180) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
        barchart.render();
    }

    function gethistory() {
        require('GET', {
            url: "/topic/history",
            data: {
                topic: searchObj.topic
            }
        }).then(li => {
            line1(li);
        })
    }

    function getstart() {
        require('POST', {
            url: "/topic/dep-platform",
            data: {
                depRange: "ALL",
                title: searchObj.topic
            }
        }).then(data => {
            const li = (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>${formatnum(v.readTotal)}</td>`));
                $(".summary").append(tr)
            }
        })
    }

    function getoverview() {
        require('GET', {
            url: "/topic/overview",
            data: {
                topic: searchObj.topic
            }
        }).then(data => {
            const li = data || [];
            let k = {};
            for (let i = 0; i < li.length; i++) {
                const v = li[i];
                if (k[v.platform]) {
                    k[v.platform] += v.playCount
                } else {
                    k[v.platform] = v.playCount
                }
            }
            let keys = Object.keys(k);
            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'>" + 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);
        })
    }

    function getread() {
        require('POST', {
            url: "/topic/read",
            data: {
                depRange: type,
                title: searchObj.topic
            }
        }).then(data => {
            const li = data || [];
            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;
        $('.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";
            $('.btn-primary').removeClass("btn-primary");
            $('.' + type).addClass("btn-primary")
            getread();
        })

        $('.' + type).addClass("btn-primary")

        gethistory();
        getoverview();
        getread();
        getstart();
        getdetail();
    }
    init();

</script>

</html>