企业官网建设流程全解析

vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条，实现方式是利用子任务的子视图渲染模式，来间每条任务拆分成2条子任务，就可以利用自带的子视图渲染功能来渲染。

https://gantt.vxeui.com

由于放2行超出默认高度，所以还需要通过 cell-config.height设置一下行高，再通过树形表格的子任务来渲染

<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'import{VxeGanttTaskType}from'vxe-gantt'importXEUtilsfrom'xe-utils'constganttOptions=reactive({border:true,height:500,loading:false,cellConfig:{height:60},treeConfig:{transform:true,rowField:'id',parentField:'parentId'},taskConfig:{startField:'start',endField:'end',typeField:'type'},taskBarSubviewConfig:{barStyle({row}){if(row.flag===1){return{transform:'translateY(-24px)','--vxe-ui-gantt-view-task-bar-completed-background-color':'#409eff'}}if(row.flag===2){return{transform:'translateY(1px)','--vxe-ui-gantt-view-task-bar-completed-background-color':'#31d231'}}}},taskBarConfig:{showContent:true,barStyle:{round:true}},taskViewConfig:{tableStyle:{width:480}},columns:[{field:'title',title:'任务名称',minWidth:100},{field:'planStartDate',title:'计划开始时间',width:100},{field:'planEndDate',title:'计划结束时间',width:100},{field:'actualStartDate',title:'实际开始时间',width:100},{field:'actualEndDate',title:'实际结束时间',width:100}],data:[]})// 模拟后端接口constloadList=()=>{ganttOptions.loading=truesetTimeout(()=>{constlist=[{id:10001,parentId:null,title:'A项目',planStartDate:'2024-03-03',planEndDate:'2024-03-15',actualStartDate:'2024-03-03',actualEndDate:'2024-03-12'},{id:10002,parentId:null,title:'B项目',planStartDate:'2024-03-10',planEndDate:'2024-03-25',actualStartDate:'2024-03-08',actualEndDate:'2024-03-16'},{id:10003,parentId:null,title:'C项目',planStartDate:'2024-03-20',planEndDate:'2024-04-10',actualStartDate:'2024-03-22',actualEndDate:'2024-04-01'},{id:10004,parentId:null,title:'D项目',planStartDate:'2024-03-28',planEndDate:'2024-04-19',actualStartDate:'2024-03-28',actualEndDate:'2024-04-12'},{id:10005,parentId:null,title:'E项目',planStartDate:'2024-04-05',planEndDate:'2024-04-28',actualStartDate:'2024-04-01',actualEndDate:'2024-04-24'}]// 转成子任务视图constganttData=[]list.forEach(item=>{constcurrRow=XEUtils.assign({},item,{type:VxeGanttTaskType.Subview})constplanRow=XEUtils.assign({},item,{id:10000000+item.id,title:'计划',parentId:item.id,start:item.planStartDate,end:item.planEndDate,flag:1})constactualRow=XEUtils.assign({},item,{id:20000000+item.id,parentId:item.id,title:'实际',start:item.actualStartDate,end:item.actualEndDate,flag:2})ganttData.push(currRow)ganttData.push(planRow)ganttData.push(actualRow)})ganttOptions.data=ganttData ganttOptions.loading=false},200)}loadList()</script>

https://gitee.com/x-extends/vxe-gantt