超短期简单甘特图，vue自定义简单甘特图

当日前后30天，共60天内的任务展示，不同任务状态不同颜色

为了同画面多甘特图；美丽废物一个，展示用

<div class="gantt">
    <div class="gantt-time">
        <div class="gantt-time-one g-time"><span>{{mLdate2}}</span><div class="time-masker"></div></div>
        <div class="gantt-time-two g-time"><span>{{mLdate1}}</span> <div class="time-masker"></div></div>
        <div class="gantt-time-three g-time"><span>{{local=='en'?'Today':'今日'}}</span> <div class="time-masker"></div></div>
        <div class="gantt-time-four g-time"><span>{{mRdate1}}</span> <div class="time-masker"></div></div>
        <div class="gantt-time-five g-time"><span>{{mRdate2}}</span> <div class="time-masker"></div></div>
    </div>
    <div class="gantt-layout">
        <div class="gantt-cell">
            <div v-for="(item,i) in colList" :key="i" class="gantt-cell-name">{{item}}</div>
        </div>
        <div class="gantt-task">
            <div v-for="(item,i) in taskList" :key="i" >
                <div :class="['gantt-task-item','gantt-task-item'+i]" :style="{backgroundColor:item.color,borderLeft:'2px solid'+ item.colorL,width:item.width+'%',marginLeft:item.left+'%'}"> {{item.text}}</div>
            </div>
        </div>
    </div>
</div>

export default defineComponent({
    props:{
        taskdata:{type: Array, default: []},
        status1:{type:String,default:''},
        status2:{type:String,default:''},
        status3:{type:String,default:''},
        status4:{type:String,default:''},
        status5:{type:String,default:''},
    },
    setup(props) {
        let rolegroup = ref<string[]>([]); //部门confirm权限
        const today = new Date();
        const day = 24 * 60 * 60 *1000;
        const mToday = (today.getMonth()+1) + '/ ' +today.getDate();
        const mL1 = new Date(today.getTime() - day*15); 
        const mL2 = new Date(today.getTime() - day*30); //最小时间
        const mR1 = new Date(today.getTime() + day*15);
        const mR2 = new Date(today.getTime() + day*30); //最大时间
        const mLdate1 = mL1.getMonth()+1 +'/' +mL1.getDate(); //前15天
        const mLdate2 = mL2.getMonth()+1 +'/' +mL2.getDate(); //前30天
        const mRdate1 = mR1.getMonth()+1 +'/' +mR1.getDate(); //后15天
        const mRdate2 = mR2.getMonth()+1 +'/' +mR2.getDate(); //后30天
        let taskList =ref<TaskItem[]>([]);//任务数组
        let testTask = [] as any;
        const colList = ref(['','','','',''])
        type TaskItem = {des:string, text:string, start_date: string, end_date: string, width: string, left:string, color: string,colorL: string,group:boolean,confirm:boolean};
        function checkColor(status){
            if(status=='0'){
                return ['#EFEFEF','#BDBDBD']
            }else if(status=='1'){
                return ['#F3F7FE','#2F80ED']
            }else if(status=='2'){
                return ['#F2F9F3','#20A13E']
            }else if(status==3){
                return ['#FEF2F3','#EB5757']
            }
        }
        function checkTask(task){
            task.forEach((item)=>{
                if(new Date(item.start_date) < mL2){
                    item.start_date = mL2.toLocaleDateString().replace('/','-');
                }
                if(new Date(item.end_date)>mR2){
                    item.end_date = mR2.toLocaleDateString().replace('/','-');
                }
                item.width = 1.67 * (Math.round((<any>new Date(item.end_date)-<any>new Date(item.start_date))/day));
                item.left = 1.66 * (Math.round((<any>new Date(item.start_date)-<any>new Date(mL2.toLocaleDateString().replace('/','-')))/day));               
            })
        }
        function setTask(val){
            taskList.value = [];
                val.forEach((item,i) => {
                        let ta=<TaskItem>{}
                        ta.text= item.taskName;
                        ta.start_date = item.taskFromDate.substr(0,4)+'-'+item.taskFromDate.substr(4,2)+'-' +item.taskFromDate.substr(6,2);
                        ta.end_date = item.taskRequestDate.substr(0,4)+'-'+item.taskRequestDate.substr(4,2)+'-' +item.taskRequestDate.substr(6,2);
                        ta.color = checkColor(item.taskStatus)[0];
                        ta.colorL = checkColor(item.taskStatus)[1];
                        ta.group = rolegroup.value.indexOf(item.groupId)!=-1?true:false;
                        taskList.value.push(ta);
                });
                checkTask(taskList.value)
        }
        watch(
            ()=> props.taskdata,
            (val)=>{
                testTask = val
                setTask(val)
            }
        )
        return {
            taskList,mToday,mLdate1,mLdate2,mRdate1,mRdate2,t,rolegroup,colList,local
        }
    },
})

.gantt{
    width: 84%;
    min-width: 74%;
    height: 218px;
    padding: 12px;
    font-size: 12px;
    position: relative;
    background-color: #fff;
    z-index: 1;
    border-radius: 12px;
}
.gantt-time{
    display: flex;
    width: 90%;
    margin-left: 10%;
    justify-content: space-between;
    margin-bottom: 13px;
    color: #828282;
    .g-time span{
        display: inline-block;
        width: 31px;
        text-align: center;
    }
    .gantt-time-three{
        color: #20A13E;
        font-weight: 600;
        .time-masker{
            background-color: #20A13E;
        }
    }
    .time-masker{
        z-index: 1;
        position: absolute;
        width: 0.4px;
        height: 77%;
        background-color: #E6EAF0;
        margin-left: 11px;
        margin-top: 4px;
    }
}
.gantt-layout{
    display: flex;
}
.gantt-cell{
    width: 10%;
    color: #828282;
}
.gantt-task{
    width: 100%;
    z-index: 2;
    padding: 0 12px;
}
.gantt-task-item,.gantt-cell-name{
    height: 22px;
    line-height: 22px;
    margin-bottom: 8px;
}
.gantt-cell-name{
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gantt-task-item{
    border-radius:2px;
    color: #333333;
    padding-left:4px ;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}