视频大数据处理使用kafka吗

二，运行视频

B站演示视频： 【大数据可视化大屏实战项目（1）视频平台大屏中心—HTML+CSS+JS（可用于比赛项目或者作业参考中）】 https://www.bilibili.com/video/BV1uG411R7ai/?share_source=copy_web&vd_source=b2e9b9ed746acda34f499009647748ed

三，部分代码讲解

var main = function () {
    var init = function () {
        tab();
        ywjkScroll();
        xtzlxz();
        xtggScroll();
        zlxz();
        yjxxtsxq();
    };
    var tab = function () {
        $(".js-tab li").click(function () {
            $(this).addClass('on').siblings().removeClass('on');
        });
    };
    /**巡查视频问题scroll**/
    var ywjkScroll = function () {
        var timing = function () {
            var height = $(".js-xcspwt>li:first").outerHeight()+14;
            $(".js-xcspwt").animate({marginTop:-height+'px'},600,function () {
                $(".js-xcspwt").css({marginTop:0});
                $(".js-xcspwt>li:first").appendTo($(".js-xcspwt"));
            });

        };
        var time = setInterval(timing,3000);
        $(".js-xcspwt").mouseenter(function () {
            clearInterval(time);
        });
        $(".js-xcspwt").mouseleave(function () {
            time = setInterval(timing,3000);
        });
    };
    /**预警信息推送=>详情**/
    var yjxxtsxq = function () {
        $(".js-tjxxtsxq .yjxxts-box").mouseenter(function () {
            $(".js-yjxxtsTkbox").addClass('show');
        });
        $(".js-tjxxtsxq .yjxxts-box").mouseleave(function () {
            $(".js-yjxxtsTkbox").removeClass('show');
        });
    };
    /**系统公告&资源下载**/
    var xtzlxz = function () {
        $(".js-xtggzlxz li").click(function () {
            var index = $(this).index();
            $(".col-main .xtggzlxz-main").eq(index).show().siblings().hide();
        });
    };

    /**资源下载**/
    var zlxz = function () {
        //资料下载lhy
        var zlxzUrl = "json/zlxz.json";
        $.getJSON(zlxzUrl, function (data) {
            $('.js-upload').empty();
            data.forEach(function (item, index) {
                var titleImgLx = ((item.url).split("."))[1];
                var titleImg = "";
                //设置图标样式
                if (titleImgLx == "doc" || titleImgLx == "docx") {
                    titleImg = "img/zjzl01.png"
                } else if (titleImgLx == "jpg") {
                    titleImg = "img/zjzl02.png"
                } else if (titleImgLx == "ppt" || titleImgLx == "pptx") {
                    titleImg = "img/zjzl03.png"
                } else if (titleImgLx == "rar" || titleImgLx == "zip") {
                    titleImg = "img/zjzl04.png"
                }
                var videoli = '<div data-url="' + item.url + '" title="' + item.title + '" class="zjzl-card" style="background: url(' + titleImg + ')  no-repeat center left">' + item.title + '</div>';
                $('.js-upload').append(videoli);

            });

            //资料下载方法--zhb
            function fake_click(obj) {
                var ev = document.createEvent("MouseEvents");
                ev.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                );
                obj.dispatchEvent(ev);
            }

            function export_raw(uploadUrl, data) {
                var urlObject = window.URL || window.webkitURL || window;
                var export_blob = new Blob([data]);
                var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
                save_link.href = urlObject.createObjectURL(export_blob);
                save_link.download = uploadUrl;
                fake_click(save_link);
            }

            $('.js-upload div').click(function () {
                var uploadUrl = $(this).attr("data-url");
                export_raw(uploadUrl);
            });
        });


    };



    return {
        init: init
    }
}();

这段代码是一个JavaScript模块，它使用了匿名的自执行函数（Immediately Invoked Function Expression，IIFE）来创建一个模块化的JavaScript程序。下面我会逐步解释每个部分的功能：

var main = function () { ... }();: 这是一个匿名的自执行函数，它在定义后立即执行。整个程序的入口点就是这个函数。这个函数返回一个包含 init 方法的对象，main 变量将引用这个对象。

init 函数: 这是主要的初始化函数，负责调用其他函数来初始化网页的不同部分。它在函数内部调用了以下函数：

• tab 函数: 这个函数添加了一个事件监听器，当网页上的某个具有 .js-tab li 类的元素被点击时，会给被点击的元素添加 on 类，并移除其它同级元素的 on 类，实现了标签切换的效果。
• ywjkScroll 函数: 这个函数负责一个滚动效果，它定时滚动网页上具有 .js-xcspwt 类的元素的内容，模拟滚动广告的效果。当鼠标移入元素时，停止滚动，鼠标移出时继续滚动。
• yjxxtsxq 函数: 这个函数处理预警信息推送的效果，当鼠标移入具有 .js-tjxxtsxq .yjxxts-box 类的元素时，显示 .js-yjxxtsTkbox 类的元素，当鼠标移出时隐藏。
• xtzlxz 函数: 这个函数处理系统公告和资源下载的效果，当某个列表项被点击时，显示相应的内容，隐藏其它内容。
• xtggScroll 函数: 类似于 ywjkScroll 函数，这个函数实现了系统公告内容的滚动效果。
• zlxz 函数: 这个函数通过AJAX请求获取资源下载的数据，并根据文件扩展名（比如 .doc、.jpg、.ppt、.rar等）为每个资源生成一个带有对应图标的元素。然后，它添加了点击事件，点击某个资源时，触发文件下载。

总之，这段代码主要是一个网页的前端逻辑，包括标签切换、滚动效果、弹出框显示等功能，同时还包括了资源下载功能。这些功能都是通过jQuery来实现的，需要依赖jQuery库。

可视化图表的使用技巧

1、柱状图

柱状图中的颜色尽量不要超过3种。 柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间 对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。 2、折线图

折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰 折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色 折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。 3、饼图

饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。 饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。 大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性 4、散点图

如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择 散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。 如果数据包含不同系列，可以给不同系列使用不同的颜色

四，源码

链接：https://pan.baidu.com/s/1aYKvhjQOTDfnOjxCyRNDXA 提取码：