定义,文件名为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();
}
}