目录
一、效果展示
二、上代码
1、Progress对象
if (typeof Progress != 'undefined') {
delete Progress;
}
var Progress = function ({
eleId,
data, // 数组
fieldMap = { // 映射到data数组中的字段名称
nodeName: '', // 节点名称
nodeDesc: '', // 节点描述
nodeStatus: '', // 节点状态
},
nodeStatusSuccess = 1, // 成功节点状态值
nodeStatusNext = 2, // 下一个节点状态值
nodeStatusFail = 3, // 失败节点状态值
nodeStatusFunc = null, // 判断节点状态,返回状态值:nodeStatusSuccess、nodeStatusNext、nodeStatusFail
}) {
this._data = data;
console.log(this._data)
this._liPool = [];
this._prevTime = 0;
this._fieldMap = fieldMap;
this._nodeStatusSuccess = nodeStatusSuccess;
this._nodeStatusNext = nodeStatusNext;
this._nodeStatusFail = nodeStatusFail;
this._nodeStatusFunc = nodeStatusFunc;
this._rootElement = document.getElementById(eleId);
this._ul = document.createElement('ul');
this._ul.classList.value = 'out-line';
this._rootElement.append(this._ul);
this.initStyle();
this.render();
return this;
}
2、样式加载
Progress.prototype.initStyle = function () {
this._style = document.createElement('style');
this._rootElement.append(this._style);
this._style.innerHTML = `
.out-line {
position: relative;
border-left: 1px solid red;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
/*width: 0px;*/
padding: 0px;
}
.out-line li {
list-style: none;
margin: 0px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
/*border: 1px solid;*/
}
.first-node, .second-node, .third-node {
margin: 30px 0px !important;
position: relative;
}
.first-node {
padding: 20px 50px;
background: #eeeeee;
font-size: 21px;
font-weight: bold;
}
.second-node {
width: 40px;
height: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.third-node {
width: 30px;
height: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.start-node, .end-node {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.start-node {
margin-top: 0px !important;
}
.end-node {
margin-bottom: 0px !important;
}
.is-pass {
background: green;
}
.is-next {
background: orange;
}
.is-future {
background: #eeeeee;
border: 1px solid rgba(0, 0, 0, 0.4);
}
.is-fail{
background: red;
color: white;
}
.node-left, .node-right {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
}
.node-left {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
left: -30px;
top: -25px;
text-align: right;
color: rgba(0, 0, 0, 0.5);
}
.node-right {
left: 70px;
text-align: left;
display: flex;
align-items: center;
}
.node-right * {
text-align: left;
}
.node-content {
color: rgba(0, 0, 0, 0.8);
width: 200px;
}
.node-name {
font-size: 20px;
font-weight: bold;
}
.node-time {
margin-left: 20px;
color: rgba(0, 0, 0, 0.5);
}
.node-text {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.is-pass .node-text,.is-next .node-text, .is-fail .node-text {
color: white;
}
.is-future .node-text {
color: #000;
}
.second-node .node-text {
font-size: 24px;
}
.third-node .node-text {
font-size: 14px;
}
.is-next .node-name, .is-fail .node-name{
color: orange;
}
`
return this;
}
3、render输出流程
Progress.prototype.render = function () {
let lastNode = Object.keys(this._data).length - 1;
Object.values(this._data).forEach((item, index) => {
let li = document.createElement('li'),
nodeName = this._fieldMap.nodeName ? (typeof item[this._fieldMap.nodeName] == 'undefined' ? '' : item[this._fieldMap.nodeName]) : (typeof item.nodeName == 'undefined' ? '' : item.nodeName);
li.classList.value = 'first-node ' + (index == 0 ? 'start-node' : (index == lastNode ? 'end-node' : ''));
li.innerHTML = nodeName;
this._liPool.push(li);
this._ul.append(li);
if (item.node) {
this.secondNode(item.node);
}
})
return this;
};
4、生成节点
Progress.prototype.secondNode = function (data) {
Object.values(data).forEach((vo, i) => {
this.createNode(vo, 'second-node');
if (vo.photo_log) {
this.thirdNode(vo.photo_log);
}
})
}
Progress.prototype.thirdNode = function (data) {
Object.values(data).forEach((v, j) => {
this.createNode(v, 'third-node');
})
}
Progress.prototype.createNode = function (data, className = 'second-node') {
let li = document.createElement('li'), consuming = '', nodeText = '·',
nodeTime = this._fieldMap.nodeTime ? (typeof data[this._fieldMap.nodeTime] == 'undefined' ? '' : data[this._fieldMap.nodeTime]) : (typeof data.nodeTime == 'undefined' ? '' : data.nodeTime),
nodeName = this._fieldMap.nodeName ? (typeof data[this._fieldMap.nodeName] == 'undefined' ? '' : data[this._fieldMap.nodeName]) : (typeof data.nodeName == 'undefined' ? '' : data.nodeName),
nodeDesc = this._fieldMap.nodeDesc ? (typeof data[this._fieldMap.nodeDesc] == 'undefined' ? '' : data[this._fieldMap.nodeDesc]) : (typeof data.nodeDesc == 'undefined' ? '' : data.nodeDesc),
nodeStatus = this._fieldMap.nodeStatus ? (typeof data[this._fieldMap.nodeStatus] == 'undefined' ? '' : data[this._fieldMap.nodeStatus]) : (typeof data.nodeStatus == 'undefined' ? '' : data.nodeStatus);
if (nodeTime) {
consuming = this.consumingTime(nodeTime);
}
if ((this._nodeStatusFunc && this._nodeStatusFunc.call(this, data) == this._nodeStatusFail) || nodeStatus == this._nodeStatusFail) {
className += ' is-fail';
nodeText = '×';
} else if ((this._nodeStatusFunc && this._nodeStatusFunc.call(this, data) == this._nodeStatusSuccess) || nodeStatus == this._nodeStatusSuccess) {
nodeText = '√'
className += ' is-pass';
} else if ((this._nodeStatusFunc && this._nodeStatusFunc.call(this, data) == this._nodeStatusNext) || nodeStatus == this._nodeStatusNext) {
nodeText = '···';
className += ' is-next';
} else {
className += ' is-future';
}
li.classList.value = className;
li.innerHTML = `<div class="node-text">${nodeText}</div>
<div class="node-left">${consuming}</div>
<div class="node-right">
<div class="node-content">
<div class="node-name">${nodeName}</div>
<div class="node-person">${nodeDesc}</div>
</div>
<div class="node-time">${nodeTime}</div>
</div>`;
this._liPool.push(li);
this._ul.append(li);
}
5、 计算耗时时间
Progress.prototype.consumingTime = function (dateTime) {
let date = new Date(dateTime), consuming = '';
// console.log('prevTime=' + this._prevTime)
if (this._prevTime) {
let time = date.getTime() / 1000, timeDiff = time - this._prevTime;
if (timeDiff > 0) {
let h = Math.floor(timeDiff / 3600), m = Math.floor((timeDiff % 3600) / 60),
s = (timeDiff % 3600) % 60, d = '';
if (h > 24) {
d = Math.floor(h / 24) + '天 ';
h = h % 24;
}
consuming = `节点耗时:${d}${h}:${m}:${s}`;
this._prevTime = time;
} else {
consuming = `节点耗时:0:0:0`;
}
} else {
this._prevTime = date.getTime() / 1000;
}
return consuming;
}
三、Example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>客户贷款进度查询</title>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="/js/jq2.0.js"></script>
<style>
body {
background: #ffffff !important;
}
.section-box {
display: flex;
}
.out-box {
text-align: center;
display: flex;
justify-content: center;
width: 70%;
}
</style>
</head>
<body>
<section class="section-box">
<div class="out-box" id="out-box"></div>
</section>
</body>
</html>
使用方式1:
<script>
$(function () {
new Progress({
eleId: 'out-box',
data: [
{
nodeName: '开始',
node: [
{
nodeName: '第一步',
nodeDesc: '小米',
nodeStatus: 1,
nodeTime: '2020-10-30 10:21:32',
}, {
nodeName: '第二步',
nodeDesc: '小华',
nodeStatus: 1,
nodeTime: '2020-10-30 10:39:32',
}, {
nodeName: '第三步',
nodeDesc: '小马',
nodeStatus: 1,
nodeTime: '2020-10-30 10:50:32',
}
]
}, {
nodeName: '分包',
node: [
{
nodeName: '分类',
nodeDesc: '小红',
nodeStatus: 2,
nodeTime: '2020-10-30 11:19:30',
}, {
nodeName: '分配',
nodeDesc: '小刘',
nodeStatus: '',
nodeTime: '',
}
]
}, {
nodeName: '结束',
}
]
})
})
</script>
使用方式2:
<script>
$(function () {
new Progress({
eleId: 'out-box',
fieldMap:{
nodeName: 'name',
nodeDesc: 'action_name',
nodeTime: 'time',
},
nodeStatusFunc: (data)=>{
if (data.audit_status == 3 || data.audit_status == 4) {
return 3;
} else {
return data.is_audit == 3 ? 4 : data.is_audit;
}
},
data: [
{
name: '开始',
node: [
{
name: '第一步',
action_name: '小米',
is_audit: 1,
audit_status:1,
time: '2020-10-30 10:21:32',
}, {
name: '第二步',
action_name: '小华',
is_audit: 1,
audit_status:1,
time: '2020-10-30 10:39:32',
}, {
name: '第三步',
action_name: '小马',
is_audit: 1,
time: '2020-10-30 10:50:32',
}
]
}, {
name: '分包',
node: [
{
name: '分类',
action_name: '小红',
is_audit: 2,
audit_status:1,
time: '2020-10-30 11:19:30',
}, {
name: '分配',
nodeDesc: '小刘',
is_audit: 3,
audit_status:1,
time: '',
}
]
}, {
name: '结束',
}
]
})
})
</script>
四、总结经验
以上为本文所有内容,希望能够帮助到有需要的博友们!!!!