75 lines
2.9 KiB
JavaScript
75 lines
2.9 KiB
JavaScript
/*
|
|
* @Author: lusx
|
|
* @Date: 2020-02-27 15:02:53
|
|
* @Last Modified by: lusx
|
|
* @Last Modified time: 2020-03-02 21:51:42
|
|
*/
|
|
import LoadingSpinner from '../LoadingSpinner.js';
|
|
import start1 from "../LSimg/start1.png";
|
|
import finish from "../LSimg/finish.png";
|
|
import working from "../LSimg/working.png";
|
|
import { WeaLocaleProvider } from 'ecCom';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const prefixCls = "prj-portal";
|
|
const Steps = props => {
|
|
const { stages,loading } = props;
|
|
if (props.loading && stages.length === 0) {
|
|
return (
|
|
<LoadingSpinner ecId={`${this && this.props && this.props.ecId || ''}_LoadingSpinner@bip68f`} />
|
|
);
|
|
}
|
|
if (stages.length === 0) {
|
|
return (
|
|
<span className={`${prefixCls}-no-step`}>{getLabel('518322','目前项目没进度')}</span>
|
|
);
|
|
}
|
|
return (
|
|
<div className={`${prefixCls}-steps-body`}>
|
|
{
|
|
stages && stages.map((item,index)=>{
|
|
let imgsrc = "";
|
|
if(index == 0){
|
|
imgsrc = start1;
|
|
}else if(index == stages.length - 1) {
|
|
imgsrc = finish;
|
|
}else{
|
|
imgsrc = working;
|
|
}
|
|
return (
|
|
<div className={`${prefixCls}-inner_item`}>
|
|
<img style={{width:"34px",height:"34px"}} src={imgsrc} />
|
|
<div className={`${prefixCls}-item_right`}>
|
|
<div className={`${prefixCls}-main_text`}>{item.num||0}</div>
|
|
<div className={`${prefixCls}-sub_text`}>{item.name}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
let x = 0;
|
|
const mousedownFun = (stages,ev)=>{
|
|
const oEvent = ev || event;
|
|
oEvent.preventDefault();
|
|
const content = document.getElementsByClassName('prj-portal-steps-body')[0];
|
|
const contentBox = stages.length * document.getElementsByClassName('prj-portal-inner_item')[0].offsetWidth + (stages.length-1) * 20;
|
|
const scoll = contentBox - content.offsetWidth;
|
|
if(contentBox > content.offsetWidth){
|
|
x = oEvent.clientX - content.offsetLeft;
|
|
content.onmousemove = function(ev) {
|
|
const oEvent = ev || event;
|
|
var m = oEvent.clientX - x;
|
|
if(m > (scoll)) m = scoll;
|
|
if(m<0 && Math.abs(m) > content.offsetWidth ) m = -content.offsetWidth;
|
|
content.style.left = m + 'px';
|
|
}
|
|
content.onmouseup = function(ev) {
|
|
const oEvent = ev || event;
|
|
content.onmousemove = null;
|
|
content.onmouseup = null;
|
|
};
|
|
}
|
|
}
|
|
export default Steps; |