vue3中，项目甘特图实现项目进度条——封装组件之tabs标签页的使用、定义方法实现动态样式style、reduce方法、数组每个下标对应的当前下标前几位之和、new Date（）转换日期格式

vue3中，项目甘特图实现项目进度条——封装组件之tabs标签页的使用、定义方法实现动态样式style、reduce方法、数组每个下标对应的当前下标前几位之和、new Date（）转换日期格式

效果图

1.1、预警阈值

1.2、

2、项目进度甘特图

需求：

1、展示项目各个节点的执行进度情况

2、只有项目节点实施开始日期，没有百分比或节点实施结束日期，则只标识出起点位置即可

3、根据项目进度或完成情况的百分比或结束日期，展示不同的颜色进行预警

4、结束日期或百分比的打点位置超出项目计划结束日期进行截取至项目计划日期打点位置

代码

1、主页代码

index.vue

<!--
@Description 项目中心 - 项目基本情况
@author wdd
@date 2023/11/11
-->
<template>
    <centerHead title="项目基本情况"></centerHead>
    <tab :tabList="tabList" :defaultState="tabIndex" @changeTab="tabChange"></tab>
    <ProjectBasicInfo v-show="tabIndex === '0'"  />
    <ProjectSchedule v-show="tabIndex === '1'"  />
</template>
<script lang="ts" setup>
import ProjectBasicInfo from './components/projectBasicInfo.vue'
import ProjectSchedule from './components/projectSchedule.vue'
import {ref} from 'vue'
const tabList = ref([
    {state: "0", name: '基本情况'},
    {state: "1", name: '项目进度表'},
  ]);
  const tabIndex = ref('0');
    // tab切换
    const tabChange = (val:any) => {
    tabIndex.value = val;
  }
</script>

2、标签页代码

src\views\myCenter\projectCenter\components\projectSchedule.vue

<!--
@Description 项目中心 - 项目管理 - 项目进度表
@author wdd
@date 2023/11/15
-->
<template>
    <div class="content">
        <div class="right">
            <div class="left">
                <div><span class="type-size">项目名称：</span> <span>{
  
  {type}}</span></div>
                <div class="type-size">里程碑节点：</div>
            </div>
            <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="nodeList" class="table">
                <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="description" align="center" label="项目节点"></el-table-column>
                <el-table-column prop="startDate" align="center" label="计划开始日期" width="150"></el-table-column>
                <el-table-column prop="endDate" align="center" label="计划结束日期" width="150"></el-table-column>
                <el-table-column prop="realityStartDate" align="center" label="实际开始日期" width="150"></el-table-column>
                <el-table-column prop="realityEndDate" align="center" label="实际结束日期" width="150">
                    <!-- <template #default="scope">
                        <el-date-picker v-model="scope.row.realityEndDate" :editable="false" format="YYYY-MM-DD"
                            placeholder="选择日期" disabled type="date" value-format="YYYY-MM-DD" style="width:100%" clearable>
                        </el-date-picker>
                    </template> -->
                </el-table-column>
                <el-table-column prop="schedule" align="center" label="节点进度（%）" width="122"></el-table-column>
                <el-table-column align="center" label="风险提示（天数）" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.realityEndDate"
                            :style="{width:'120px',height:'24px',fontSize:'14px',backgroundColor:colorVal(datePro(scope.row.realityEndDate,scope.row.endDate).value),color:'#fff'}">
                            {
  
  {datePro(scope.row.realityEndDate,scope.row.endDate).text}}</div>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="notes" align="center" label="备注" width="122"></el-table-column>
            </el-table>
        </div>
        <div class="type-size">项目甘特图进度表：</div>
        <ScheduleTable :dateList="nodeList" class="box"></ScheduleTable>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import ScheduleTable from './scheduleTable.vue'
const type = ref('项目XXXXX')
const nodeList = ref([{
    id: 1,
    description: '节点一',
    editType: true,
    startDate: '2023-01-05',
    endDate: '2023-02-05',
    realityStartDate: '2023-01-20',
    realityEndDate: '',
    schedule: '90',
    notes: '无'
}, {
    id: 2,
    description: '节点二',
    editType: true,
    startDate: '2023-02-05',
    endDate: '2023-05-05',
    realityStartDate: '2023-03-05',
    realityEndDate: '',
    schedule: '40',
    notes: '无'
}, {
    id: 3,
    description: '