liyongli
/
appDate


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
							<!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/loading.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 {
            padding-right: 5px;
            overflow-y: scroll;
        }

        .pageAccess .row {
            width: 100%;
            margin: 0;
        }

        .pageAccess .panel {
            margin-bottom: 5px;
        }

        .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;
        }

        .numTotle {
            /* height: 30px;
            line-height: 30px; */
            text-align: center;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
            margin: 10px 0;
            padding: 23px 0 18px 0;
            position: relative;
        }

        .colflex::after {
            content: " ";
            top: 45px;
            display: block;
            position: absolute;
            width: 1px;
            height: 30px;
            background: #EAEAEA;
        }

        .numTitle {
            font-size: 24px;
            height: 1em;
            color: #1A89B3;
            font-weight: bold;
        }

        .numValue {
            margin-top: 8px;
            font-size: 12px;
            color: #919191;
        }

        .flex {
            margin: 10px 0;
            display: flex;
            padding-top: 23px;
            padding-bottom: 18px;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
        }

        .colflex {
            flex: 1;
        }

        .flex .numTotle {
            box-shadow: none;
        }

        .colflex .numTotle {
            margin: 0;
            padding: 0;
        }

        .panel-default>.panel-heading {
            background: #fff;
            border-bottom: none;

            font-size: 14px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #1A89B3;
            position: relative;
        }

        .panel-heading::after {
            content: " ";
            left: 0;
            top: 8px;
            display: block;
            position: absolute;
            width: 3px;
            height: 25px;
            background: #1A89B3;
        }

        .table-bg {
            margin: 17px;
        }

        .table-head {
            background-color: #ECEFF5;
            color: #3B3B3B;
            border-bottom: none;
        }

        .paging {
            display: flex;
            align-items: center;
        }

        .paging div {
            border: 1px solid rgb(211, 211, 211);
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
            margin: 0 10px;
            font-size: 14px;
        }

        .paging div.disable {
            color: #fff;
            cursor: not-allowed;
            background-color: rgb(211, 211, 211);
        }

        .paging div.active {
            border: none;
            background-color: rgb(78, 216, 250);
            color: #fff;
        }
    </style>
</head>

<body class="pageAccess">
    <div class="panel panel-default total">
        <div class="panel-heading">传播数据</div>
    </div>
    <div class="row">
        <div class="col-xs-8" style="padding: 0;">
            <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-xs-4" style="padding-right: 0;padding-left: 5px;">
            <div class="panel panel-default">
                <div class="panel-heading">传播平台占比</div>
                <canvas id="piechart" style="width: 100%;height: 100%;" class=""></canvas>
            </div>
        </div>
    </div>
    <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 class="panel panel-default">
        <div class="panel-heading">任务统计</div>
        <div class="table-bg">
            <table class="table">
                <thead class="table-head">
                    <tr>
                        <td>话题</td>
                        <td>传播量</td>
                    </tr>
                </thead>
                <tbody class="summary">
                </tbody>
            </table>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            任务统计
            <div class="dropdown" style="float: right;color: #2e2e2e;margin-right: 100px;">
                <div id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    全部
                    <span class="caret"></span>
                </div>
                <ul class="dropdown-menu" aria-labelledby="dLabel">
                </ul>
            </div>
        </div>
        <div class="table-bg">
            <table class="table">
                <thead class="table-head">
                    <tr>
                        <td>部门</td>
                        <td>账号</td>
                        <td>平台</td>
                        <td>时间</td>
                    </tr>
                </thead>
                <tbody class="summary1">
                </tbody>
            </table>
            <div class="paging"></div>
        </div>
    </div>
</body>
<script src="./js/base.js"></script>
<script src="./js/page.js"></script>
<script src="./js/loading.js"></script>
<script>
    let linechart = null, barchart = null, piechart = null, type = "ALL";
    let page = 1, pageSize = 10, paging = null;
    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 pie1(li) {
        if (piechart) piechart.destroy();
        piechart = new F2.Chart({
            id: 'piechart',
            pixelRatio: window.devicePixelRatio,
            height: 325
        });
        let lis = [];
        for (let i = 0; i < li.length; i++) {
            const v = li[i];
            if (!v.readCount || v.readCount <= 0) continue;
            lis.push(v);
        }

        piechart.source(lis, {
            readCount: {
                formatter: function formatter(val) {
                    return val + '%';
                }
            }
        });
        piechart.tooltip(false);
        piechart.legend(false);
        piechart.coord('polar', {
            transposed: true,
            innerRadius: 0.7,
            radius: 0.85
        });
        // 配置文本饼图
        piechart.pieLabel && piechart.pieLabel({
            sidePadding: 75,
            label1: function label1(data) {
                return {
                    text: data.platform,
                    fill: '#808080'
                };
            },
            label2: function label2(data) {
                return {
                    fill: '#000000',
                    text: formatnum(data.readCount),
                    fontWeight: 500,
                    fill: '#808080',
                    fontSize: 10
                };
            }
        });
        piechart.axis(false);
        piechart.interval()
            .position('a*readCount')
            .color('platform', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'])
            .adjust('stack');

        piechart.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
            }), obj = {}, list = [];

            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);
                (v.list || []).map(p => {
                    if (obj[p.platform]) {
                        list[obj[p.platform]].readCount += Number(p.readCount || 0);
                        list[obj[p.platform]].publishCount += Number(p.publishCount || 0);
                    } else {
                        obj[p.platform] = list.length;
                        list.push({ readCount: p.readCount, publishCount: p.publishCount, platform: p.platform, a: '1' })
                    }
                })
            }
            pie1(list)
        })
    }

    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>"), s = $("<div class='col-xs-10 '></div>"), n = $("<div class='flex'></div>");
            let c = ['#FB6161', '#EC72DC', '#F98E53', '#49BED0', '#4BCA8B']
            for (let i = 0; i < keys.length; i++) {
                const v = keys[i];
                if (v === '总传播量') d.append($("<div class='col-xs-2' style='padding-right: 0'><div class='numTotle'><div class='numTitle'>" + formatnum(k[v]) + "</div><div class='numValue'>" + v + "</div></div></div>"));
                else n.append($("<div class='colflex'><div class='numTotle'><div class='numTitle' style='color: " + c[i - 1] + "'>" + formatnum(k[v]) + "</div><div class='numValue'>" + v + "</div></div></div>"));
            }
            s.append(n)
            d.append(s)
            $('.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() {
        console.log('--',$('body').loading)
        $('body').loading({
            loadingWidth: 240,
            title: '请稍等!',
            name: 'test',
            discription: '',
            direction: 'column',
            type: 'origin',
            // originBg:'#71EA71',
            originDivWidth: 40,
            originDivHeight: 40,
            originWidth: 6,
            originHeight: 6,
            smallLoading: false,
            loadingMaskBg: 'rgba(0,0,0,0.2)'
        });
        require('POST', {
            url: "/topic/detail",
            data: {
                depRange: "ALL",
                page,
                pageSize,
                title: searchObj.topic
            }
        }).then(data => {
            const li = (data.data || []).sort((a, b) => {
                return b.readTotal - a.readTotal
            });
            $(".summary1").html("");
            for (let i = 0; i < li.length; i++) {
                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)
            }
            removeLoading('test')
            if (paging) return
            paging = new Paging({
                total: data.total,
                pageChange(p) {
                    console.log(p)
                    page = p;
                    getdetail()
                }
            })
        })
    }

    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>