横向文字滚动定义与引用

定义，文件名为singleLineMarqueeMgrComponent.js

import UUID from 'uuid-js';

class singleLineMarquee {
    constructor() {
        this.id = null;
        this.timer = null;
    }

    marqueeHTML(str, width, fontsize = 12) {
        let regNum = /[0-9]/g;//匹配数字
        let nums = str.match(regNum);
        let len = str.length;
        let lennum; //数字的个数

        if (nums) {
            lennum = nums.length;
        } else {
            lennum = 0;
        }

        const allwidh = (len - lennum) * fontsize + lennum * (fontsize - 4) + 5; //字符总宽度

        //汉字的字符宽度与字体大小相等，英文字母的宽度都不相同，最大为字体大小，因此处理方式同汉字一样。数字宽度都相同，12px大小时，宽度为8,14px大小时宽度为9，此处统一用fontsize-4处理
        if (allwidh > width) { //滚动
            this.id = UUID.create().toString();
            return `<div id="${this.id}" style="width:${width}px;margin-left:2px;white-space: nowrap;overflow: hidden;">
                    <span style="margin-right:5px;">` + str + `</span><span style="margin-right:5px;">` + str + `</span>
                    </div>`;
        } else {
            return str;
        }
    }

    run() {
        if (!this.id) return;

        clearInterval(this.timer);
        this.timer = setInterval(function (id) {
            let $obj = document.getElementById(id);
            let tmp = ($obj.scrollLeft)++;
            let wrapperW = $obj.offsetWidth,
                textW = $obj.firstElementChild.offsetWidth;

            //当滚动条滚动了初始内容的宽度时滚动条回到最左端 
            if ($obj.scrollLeft >= textW + 5) {
                $obj.scrollLeft = 0;
            }

        }, 60, this.id);
    }
    stop() {
        if (this.id && this.timer) {
            clearInterval(this.timer);
        }
    }
}

export default class SingleLineMarqueeMgr {
    constructor() {
        this.items = [];
    }

    generatorSingleLineMarquee(str, width, fontsize = 12) {
        let slMarquee = new singleLineMarquee();
        this.items.push(slMarquee);
        return slMarquee.marqueeHTML(str, width, fontsize = 12);
    }

    startMarquees() {
        this.items.forEach(item => {
            item.run();
        });
    }

    clearMarquees() {
        this.items.forEach(item => {
            item.stop();
        });

        this.items = [];
    }
}

引用，文件名为allTaskForXJComponent.js

import './basicInfoForXJComponent.scss';
import $ from 'jquery';
import 'jquery.scrollbar';
import 'style!css!../../plugins/jquery.scrollbar.css';
import SingleLineMarqueeMgr from './singleLineMarqueeMgrComponent';


var checkImg = require('../../images/iconxj_yes.png');
var nocheckImg = require('../../images/iconxj_no.png');
var doneImg = require('../../images/iconxj_yess.png');
var listItem = ["开始时间", "任务", "频次", "任务状态"];
export class basicInfoForXJ {
    constructor(containerId, bigtitle = "网络员基本信息", titleone = "网格管理员", titletwo = "巡检任务") {
        this.containerId = containerId;
        this.bigtitle = bigtitle;
        this.titleone = titleone;
        this.titletwo = titletwo;
        this.marqueeMgr = new SingleLineMarqueeMgr();
    }
    getTitleHtml(title, classname) {
        let title_html = `<div class="${classname}">
                            <span class="title">${title}</span>
                            <div id="${classname}"></div>
                        </div>`;
        return title_html;
    }
    getAdmin(data) { //Get administrator information html
        let adminHtml = `<div class="admin_pic">
                          <img src="${data.admin.photo}" alt="" />
                       </div>
                       <div class="admin_info">
                          <div class="admin_name">${data.admin.name}</div>
                          <div class="admin_team">${data.admin.team}</div>
                          <div class="admin_phone">电话：<span>${data.admin.phone}</span></div>
                          <div class="admin_handle">
                            <div class="admin_call">
                              <i class="call"></i><span>拨号呼叫</span>
                            </div>
                            <div class="admin_call">
                              <i class="peo"></i><span>视频通话</span>
                            </div>
                          </div>
                       </div>`;

        return adminHtml;
    }
    getXJItemTitle(imgwidth = 14) {
        let itemTitle = `<div class="legend">
                          <div class="list">
                             <img src="${doneImg}" width="${imgwidth}" alt="巡检完成" />
                             <span>巡检完成</span>
                          </div>
                          <div class="list">
                             <img src="${checkImg}" width="${imgwidth}" alt="已巡检" />
                             <span>已巡检</span>
                          </div>
                          <div class="list">
                             <img src="${nocheckImg}" width="${imgwidth}" alt="未巡检" />
                             <span>未巡检</span>
                          </div>
                       </div>`;
        let odiv = `<div class="list_title"><ul>`;
        let lihtml = ``;
        listItem.forEach(function (e) {
            lihtml += `<li>${e}</li>`;
        });
        lihtml += `</ul></div>`;
        return itemTitle + odiv + lihtml;
    }
    getFullTime(time) {
        let timeArray = time.split("/");
        if (timeArray.length == 3) {
            return timeArray[0] + "年" + timeArray[1] + "月" + timeArray[2] + "日";
        }
    }
    getTaskList(data, imgwidth = 22) {
        let taskdiv = `<div class="taskWrapper"><div class="taskdiv scrollbar">`;
        let tasklistHtml = ``;
        const self = this;
        data.tasks.forEach(function (item, i) {
            let imghtml = ``;
            let oid = "task" + item.id;
            if (item.state == "yes") {
                imghtml = `<img src="${checkImg}" width="${imgwidth}" alt="已巡检" />已巡检`;
            }
            if (item.state == "no") {
                imghtml = `<img src="${nocheckImg}" width="${imgwidth}" alt="未巡检" />未巡检`;
            }
            if (item.state == "done") {
                imghtml = `<img src="${doneImg}" width="${imgwidth}" alt="巡检完成" />巡检完成`;
            }
            tasklistHtml += `<div class="taskList">
                              <div class="time">${self.getFullTime(item.time)}</div>
                              <div class="task">${self.marqueeMgr.generatorSingleLineMarquee(item.task, 152)}</div>
                              <div class="rate">${item.rate}</div>
                              <div class="state">${imghtml}</div>
                           </div>`;
        })
        return taskdiv + tasklistHtml + `</div></div>`;
    }
    render(data) {
        this.marqueeMgr.clearMarquees();
        var $container = $(`#${this.containerId}`);
        $container.html("");
        let title_big = `<div class="titleBasic">${this.bigtitle}</div>`;
        let leftOuter = this.getTitleHtml(this.titleone, "contentAdmin");
        let rightOuter = this.getTitleHtml(this.titletwo, "contentXj");
        $container.append(title_big);
        $container.append(leftOuter);
        $container.append(rightOuter);

        let adminInfo = this.getAdmin(data);
        $container.find("#contentAdmin").html(adminInfo);
        let xjtitle = this.getXJItemTitle();
        let xjtask = this.getTaskList(data);
        $container.find("#contentXj").append(xjtitle);
        $container.find("#contentXj").append(xjtask);
        $container.find(".taskdiv").scrollbar();
        this.marqueeMgr.startMarquees();
    }
}