菜单 搜索
首页 前端知识 【VUE甘特图实现】

【VUE甘特图实现】

2025-02-25 13:02:08 前端知识 前端哥 982 450 我要收藏

1、VUE页面甘特图实现效果

在这里插入图片描述
在这里插入图片描述

2、甘特图实现过程

2.1、引入Dhtmlx Gantt组件
复制
npm install dhtmlx-gantt
复制

在这里插入图片描述

2.2、VUE页面引入组件资源
复制
// 引入 dhtmlx-gantt 的样式和 JS 文件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';  // 样式文件
import gantt from 'dhtmlx-gantt';  // dhtmlx-gantt 库
复制

3、甘特图实现效果

3.1、初始化甘特图
复制
    //初始化甘特图
    init() {
      //初始化甘特图
      gantt.init("gantt-chart");
      gantt.config.grid_width = 600; // 左侧列表宽度
      gantt.config.min_grid_column_width = 120; // 设置调整网格大小时左侧每一格的最小宽度---优先于grid_width
      gantt.config.scale_height = 80; // 设置时间刻度的高度和左侧表格头部高度
      gantt.config.row_height = 35; //设置行高
      //gantt.config.scale_width = 200; // 设置时间轴主单位的宽度为 100px
      //gantt.config.column_width = 150; // 每列宽度（日期的列宽）
 
      gantt.config.readonly = true; // 只读模式
      gantt.config.fit_tasks = true; // 是否自动延长时间范围以适应所有显示的任务--效果：拖动任务时间范围延长，可显示区域会自动变化延长
      gantt.config.autofit = true; // 宽度是否自适应
      gantt.config.show_quick_info = true; // 是否显示quickInfo(甘特图详情小框)
 
      gantt.config.work_time = true; // 是否允许在工作时间而不是日历时间中计算任务的持续时间
      // 给时间Cell添加类名
      gantt.templates.timeline_cell_class = function (task, date) {
        if (!gantt.isWorkTime({ task: task, date: date })) return "weekend";
      };
      // 给对应的时间线表格头部添加类名
      gantt.templates.scale_cell_class = function (date) {
        if (!gantt.isWorkTime(date)) return "weekend";
      };
 
      // 设置甘特图的初始日期及结束日期，也可设置动态日期
      gantt.config.start_date = new Date(2020, 1, 1);  // 月份从0开始，0代表1月
      //gantt.config.end_date = new Date(2050, 1, 1); // 设置结束日期为2020年12月31日
      //设置日期格式
      gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
      //时间轴展示
      gantt.config.scale_unit = "month";  // 主时间轴单位为月份
      gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
      // 配置子时间轴，首先显示月份，再显示具体日期
      gantt.config.subscales = [
        { unit: "day", step: 1, date: "%d" }  // 子时间轴显示日期（例如：01, 02, 03）
      ];
      // 配置时间轴，主单位为月，副单位为日
      gantt.config.scale_unit = "month";  // 主时间单位为“月”
      gantt.config.subscales = [
        { unit: "day", step: 1, template: "%d日" }         // 第二行：显示日期
      ];
 
      //配置列标题
      gantt.config.columns = [
        {
          name: "text", label: "生产计划单号", width: 80, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${task.text}</div>`;
          }
        },  // 修改任务名称的列标题
        {
          name: "start_date", label: "开始时间", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${gantt.date.date_to_str("%Y-%m-%d")(task.start_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
          name: "end_date", label: "结束时间", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${gantt.date.date_to_str("%Y-%m-%d")(task.end_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
          name: "duration", label: "任务天数", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${task.duration}</div>`;
          }
        }   // 修改持续时间的列标题
 
      ];
 
      gantt.plugins({
        tooltip: true, // 鼠标放上提示框
      });
 
      gantt.templates.tooltip_text = function (start, end, task) {
        // 自定义tooltip的内容
        return `
            <div style="display: flex; flex-wrap: wrap; align-items: center; width: 200px;">
                <div style="width: 100%; line-height: 18px; font-weight: bold;">工单编号：${task.text}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品编码：${task.productCode}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品名称：${task.productName}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品数量：${task.productQty}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">完工数量：${task.finishQty}</div>
                <div style="width: 100%; line-height: 18px;">持续时间：${task.duration} 天</div>
                <div style="width: 100%; line-height: 18px;">开始时间：${gantt.date.date_to_str('%Y-%m-%d')(task.start_date)}</div>
                <div style="width: 100%; line-height: 18px;">结束时间：${gantt.date.date_to_str('%Y-%m-%d')(task.end_date)}</div>
            </div>
        `;
      };
 
      gantt.init("gantt-chart");
    },
复制
3.2、甘特图数据源：接口获取/或者给测试数据
复制
    //甘特图数据源
    getProductData() {
      this.http.post('/api/Production_ProductPlan/接口方法名', {
      }).then((response) => {
        console.log("甘特图数据源:", response);
 
        if (response.status == true) {
          const data = response.data;
          console.log("数据源:", response.data);
          // 格式化数据以匹配甘特图的要求
          const formattedData = data.result.map(item => ({
            id: item.productPlan_Id,
            text: item.productPlanCode,
            start_date: new Date(item.planStartDate),
            end_date: new Date(item.planEndDate),
            duration: 0, //任务天数自动计算
            documentStatus: item.documentStatus,
            productCode: item.productCode,//产品编码
            productName: item.productName,//产品名称
            productQty: item.qty,//产品数量
            finishQty: item.finishQty //完工数量
          }));
          //Bar条颜色
          this.ganttBarColor(formattedData);
 
          // 显示到任务上的文本
          gantt.templates.task_text = function (start, end, task) {
            return "" + task.text;
          };
 
          // 使用 gantt.parse() 加载数据
          gantt.parse({ data: formattedData });
        } else {
          this.$message.error('生产计划列表查询失败，请联系管理员！');
        }
      });
    },
复制
3.3、甘特图搜索功能实现
复制
    //甘特图数据搜索
    filterTasks() {
      const searchOrder = this.searchOrder;//生产计划单号
      const searchStartDate = this.searchStartDate;//计划开始时间
      const searchEndDate = this.searchEndDate;//计划结束时间
      //清空甘特图数据
      gantt.clearAll();
 
      //调用查询接口
      this.http.post('/api/Production_ProductPlan/selectProductData', {
        searchOrder: searchOrder, //生产计划单号
        searchStartDate: searchStartDate, //计划开始时间
        searchEndDate: searchEndDate //计划结束时间
      }).then((response) => {
        console.log("搜索甘特图数据源:", response);
        if (response.status == true) {
          const data = response.data;
          // 格式化数据以匹配甘特图的要求
          const formattedData = data.result.map(item => ({
            id: item.productPlan_Id,
            text: item.productPlanCode,
            start_date: new Date(item.planStartDate),
            end_date: new Date(item.planEndDate),
            duration: 0, //任务天数自动计算
            documentStatus: item.documentStatus,
            productCode: item.productCode,//产品编码
            productName: item.productName,//产品名称
            productQty: item.qty,//产品数量
            finishQty: item.finishQty //完工数量
          }));
          //Bar颜色设置
          this.ganttBarColor(formattedData);
 
          // 使用 gantt.parse() 加载数据
          gantt.parse({ data: formattedData });
          //gantt.init("gantt-chart");
        } else {
          this.$message.error('生产计划列表查询失败，请联系管理员！');
        }
      });
 
    },
复制
3.4、甘特图Bar条颜色配置
复制
    //甘特图Bar条颜色配置
    ganttBarColor(formattedData) {
      // 遍历并根据任务的状态动态增加 'color' 字段
      formattedData.forEach(task => {
        if (task.documentStatus === 0) {
          task.color = "#0033ff"; //未投放
        } else if (task.documentStatus === 1) {
          task.color = "#ff6633"; //已投放
        } else if (task.documentStatus === 2) {
          task.color = "#006600"; //开工
        } else if (task.documentStatus === 3) {
          task.color = "#ff3399"; //完工
        } else if (task.documentStatus === 4) {
          task.color = "#ff66ff"; //关闭
        } else {
          task.color = "#3366ff";
        }
      });
    },
复制
3.5、甘特图日、周切换展示功能实现
复制
// 根据选择的视图切换日或周
    changeScale(unit) {
      //日
      if (unit === 'day') {
        //设置日期格式
        gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
        //时间轴展示
        gantt.config.scale_unit = "month";  // 主时间轴单位为月份
        gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
        // 配置子时间轴，首先显示月份，再显示具体日期
        gantt.config.subscales = [
          { unit: "day", step: 1, date: "%d" }  // 子时间轴显示日期（例如：01, 02, 03）
        ];
        // 配置时间轴，主单位为月，副单位为日
        gantt.config.scale_unit = "month";  // 主时间单位为“月”
        gantt.config.subscales = [
          { unit: "day", step: 1, template: "%d日" }         // 第二行：显示日期
        ];
      } else if (unit === 'week') {
        //设置日期格式
        gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
        //时间轴展示
        gantt.config.scale_unit = "month";  // 主时间轴单位为月份
        gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
        gantt.config.subscales = [{
          unit: 'week',
          step: 1,
          template: this.weekScaleTemplate
        }];
      }
      this.scale = unit; // 更新当前选中的视图
      gantt.render(); // 重新渲染甘特图
    },
 
    //切换时间轴为周展示
    weekScaleTemplate(date) {
      var dateToStr = gantt.date.date_to_str("%m/%d");
      var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      //return dateToStr(date) + "~" + dateToStr(endDate);
      return `<div style="text-align: center; font-size: 11px; color: black; white-space: nowrap;">
            ${dateToStr(date) + "~" + dateToStr(endDate)}
          </div>`;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    }
复制
3.6、甘特图鼠标放到时间轴悬浮展示详细信息实现
复制
      gantt.plugins({
        tooltip: true, // 鼠标放上提示框
      });
 
      gantt.templates.tooltip_text = function (start, end, task) {
        // 自定义tooltip的内容
        return `
            <div style="display: flex; flex-wrap: wrap; align-items: center; width: 200px;">
                <div style="width: 100%; line-height: 18px; font-weight: bold;">工单编号：${task.text}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品编码：${task.productCode}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品名称：${task.productName}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品数量：${task.productQty}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">完工数量：${task.finishQty}</div>
                <div style="width: 100%; line-height: 18px;">持续时间：${task.duration} 天</div>
                <div style="width: 100%; line-height: 18px;">开始时间：${gantt.date.date_to_str('%Y-%m-%d')(task.start_date)}</div>
                <div style="width: 100%; line-height: 18px;">结束时间：${gantt.date.date_to_str('%Y-%m-%d')(task.end_date)}</div>
            </div>
        `;
      };
复制

4、甘特图功能扩展：实现拖拉拽等效果

更多扩展功能及甘特图属性详细介绍参考CSDN博主：https://blog.csdn.net/live_loves/article/details/138718978
复制

5、甘特图源码（数据源进行替换，复制即可使用）

<template>
  <div>
    <!-- 搜索框区域 -->
    <div class="search-bar">
      <!-- 单号输入框 -->
      生产计划单号：
      <el-input v-model="searchOrder" placeholder="输入单号搜索" style="width: 200px; margin-right: 10px;" clearable />
 
      <!-- 开始时间选择框 -->
      开始时间：
      <el-date-picker v-model="searchStartDate" type="date" placeholder="选择开始日期"
        style="width: 180px; margin-right: 10px;" />
 
      <!-- 结束时间选择框 -->
      结束时间：
      <el-date-picker v-model="searchEndDate" type="date" placeholder="选择结束日期"
        style="width: 180px; margin-right: 10px;" />
 
      <!-- 搜索按钮 -->
      <el-button type="primary" @click="filterTasks" style="width: 100px;">搜索</el-button>
 
      <div style="float: right; margin-left: 35%;">
        <el-button :class="{ active: scale === 'day' }" @click="changeScale('day')"
          style="margin-right: 3px;">日视图</el-button>
        <el-button :class="{ active: scale === 'week' }" @click="changeScale('week')">周视图</el-button>
      </div>
    </div>
 
    <!-- Gantt 图区域 -->
    <div id="gantt-chart" style="width: 100%; height: 800px;"></div>
  </div>
</template>
 
<script>
// 引入 dhtmlx-gantt 的样式和 JS 文件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';  // 样式文件
import gantt from 'dhtmlx-gantt';  // dhtmlx-gantt 库
import { color } from 'echarts';
 
export default {
  name: 'GanttChart',
  data() {
    return {
      searchOrder: '', // 单号搜索的值
      searchStartDate: '', // 开始时间搜索的值
      searchEndDate: '', // 结束时间搜索的值
      scale: "day",  // 用于记录当前选中的视图（'day' 或 'week'）
      tasks: [] // 存储任务数据
    };
  },
  watch() { },
  mounted() {
    //调用甘特图初始化
    this.init();
    //获取数据
    this.getProductData();
 
  },
  methods: {
    //初始化甘特图
    init() {
      //初始化甘特图
      gantt.init("gantt-chart");
      gantt.config.grid_width = 600; // 左侧列表宽度
      gantt.config.min_grid_column_width = 120; // 设置调整网格大小时左侧每一格的最小宽度---优先于grid_width
      gantt.config.scale_height = 80; // 设置时间刻度的高度和左侧表格头部高度
      gantt.config.row_height = 35; //设置行高
      //gantt.config.scale_width = 200; // 设置时间轴主单位的宽度为 100px
      //gantt.config.column_width = 150; // 每列宽度（日期的列宽）
 
      gantt.config.readonly = true; // 只读模式
      gantt.config.fit_tasks = true; // 是否自动延长时间范围以适应所有显示的任务--效果：拖动任务时间范围延长，可显示区域会自动变化延长
      gantt.config.autofit = true; // 宽度是否自适应
      gantt.config.show_quick_info = true; // 是否显示quickInfo(甘特图详情小框)
 
      gantt.config.work_time = true; // 是否允许在工作时间而不是日历时间中计算任务的持续时间
      // 给时间Cell添加类名
      gantt.templates.timeline_cell_class = function (task, date) {
        if (!gantt.isWorkTime({ task: task, date: date })) return "weekend";
      };
      // 给对应的时间线表格头部添加类名
      gantt.templates.scale_cell_class = function (date) {
        if (!gantt.isWorkTime(date)) return "weekend";
      };
 
      // 设置甘特图的初始日期及结束日期，也可设置动态日期
      gantt.config.start_date = new Date(2020, 1, 1);  // 月份从0开始，0代表1月
      //gantt.config.end_date = new Date(2050, 1, 1); // 设置结束日期为2020年12月31日
      //设置日期格式
      gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
      //时间轴展示
      gantt.config.scale_unit = "month";  // 主时间轴单位为月份
      gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
      // 配置子时间轴，首先显示月份，再显示具体日期
      gantt.config.subscales = [
        { unit: "day", step: 1, date: "%d" }  // 子时间轴显示日期（例如：01, 02, 03）
      ];
      // 配置时间轴，主单位为月，副单位为日
      gantt.config.scale_unit = "month";  // 主时间单位为“月”
      gantt.config.subscales = [
        { unit: "day", step: 1, template: "%d日" }         // 第二行：显示日期
      ];
 
      //配置列标题
      gantt.config.columns = [
        {
          name: "text", label: "生产计划单号", width: 80, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${task.text}</div>`;
          }
        },  // 修改任务名称的列标题
        {
          name: "start_date", label: "开始时间", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${gantt.date.date_to_str("%Y-%m-%d")(task.start_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
          name: "end_date", label: "结束时间", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${gantt.date.date_to_str("%Y-%m-%d")(task.end_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
          name: "duration", label: "任务天数", width: 50, template: function (task) {
            return `<div style="text-align: center; font-size: 14px; color: black;">${task.duration}</div>`;
          }
        }   // 修改持续时间的列标题
 
      ];
 
      gantt.plugins({
        tooltip: true, // 鼠标放上提示框
      });
 
      gantt.templates.tooltip_text = function (start, end, task) {
        // 自定义tooltip的内容
        return `
            <div style="display: flex; flex-wrap: wrap; align-items: center; width: 200px;">
                <div style="width: 100%; line-height: 18px; font-weight: bold;">工单编号：${task.text}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品编码：${task.productCode}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品名称：${task.productName}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品数量：${task.productQty}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">完工数量：${task.finishQty}</div>
                <div style="width: 100%; line-height: 18px;">持续时间：${task.duration} 天</div>
                <div style="width: 100%; line-height: 18px;">开始时间：${gantt.date.date_to_str('%Y-%m-%d')(task.start_date)}</div>
                <div style="width: 100%; line-height: 18px;">结束时间：${gantt.date.date_to_str('%Y-%m-%d')(task.end_date)}</div>
            </div>
        `;
      };
 
      gantt.init("gantt-chart");
    },
    //甘特图数据源
    getProductData() {
      this.http.post('/api/Production_ProductPlan/后端接口数据源', {
      }).then((response) => {
        console.log("甘特图数据源:", response);
 
        if (response.status == true) {
          const data = response.data;
          console.log("数据源:", response.data);
          // 格式化数据以匹配甘特图的要求
          const formattedData = data.result.map(item => ({
            id: item.productPlan_Id,
            text: item.productPlanCode,
            start_date: new Date(item.planStartDate),
            end_date: new Date(item.planEndDate),
            duration: 0, //任务天数自动计算
            documentStatus: item.documentStatus,
            productCode: item.productCode,//产品编码
            productName: item.productName,//产品名称
            productQty: item.qty,//产品数量
            finishQty: item.finishQty //完工数量
          }));
          //Bar条颜色
          this.ganttBarColor(formattedData);
 
          // 显示到任务上的文本
          gantt.templates.task_text = function (start, end, task) {
            return "" + task.text;
          };
 
          // 使用 gantt.parse() 加载数据
          gantt.parse({ data: formattedData });
        } else {
          this.$message.error('生产计划列表查询失败，请联系管理员！');
        }
      });
    },
 
    //甘特图数据搜索
    filterTasks() {
      const searchOrder = this.searchOrder;//生产计划单号
      const searchStartDate = this.searchStartDate;//计划开始时间
      const searchEndDate = this.searchEndDate;//计划结束时间
      //清空甘特图数据
      gantt.clearAll();
 
      //调用查询接口
      this.http.post('/api/Production_ProductPlan/后端接口数据源', {
        searchOrder: searchOrder, //生产计划单号
        searchStartDate: searchStartDate, //计划开始时间
        searchEndDate: searchEndDate //计划结束时间
      }).then((response) => {
        console.log("搜索甘特图数据源:", response);
        if (response.status == true) {
          const data = response.data;
          // 格式化数据以匹配甘特图的要求
          const formattedData = data.result.map(item => ({
            id: item.productPlan_Id,
            text: item.productPlanCode,
            start_date: new Date(item.planStartDate),
            end_date: new Date(item.planEndDate),
            duration: 0, //任务天数自动计算
            documentStatus: item.documentStatus,
            productCode: item.productCode,//产品编码
            productName: item.productName,//产品名称
            productQty: item.qty,//产品数量
            finishQty: item.finishQty //完工数量
          }));
          //Bar颜色设置
          this.ganttBarColor(formattedData);
 
          // 使用 gantt.parse() 加载数据
          gantt.parse({ data: formattedData });
          //gantt.init("gantt-chart");
        } else {
          this.$message.error('生产计划列表查询失败，请联系管理员！');
        }
      });
 
    },
    //甘特图Bar条颜色配置
    ganttBarColor(formattedData) {
      // 遍历并根据任务的状态动态增加 'color' 字段
      formattedData.forEach(task => {
        if (task.documentStatus === 0) {
          task.color = "#0033ff"; //未投放
        } else if (task.documentStatus === 1) {
          task.color = "#ff6633"; //已投放
        } else if (task.documentStatus === 2) {
          task.color = "#006600"; //开工
        } else if (task.documentStatus === 3) {
          task.color = "#ff3399"; //完工
        } else if (task.documentStatus === 4) {
          task.color = "#ff66ff"; //关闭
        } else {
          task.color = "#3366ff";
        }
      });
    },
    // 根据选择的视图切换日或周
    changeScale(unit) {
      //日
      if (unit === 'day') {
        //设置日期格式
        gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
        //时间轴展示
        gantt.config.scale_unit = "month";  // 主时间轴单位为月份
        gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
        // 配置子时间轴，首先显示月份，再显示具体日期
        gantt.config.subscales = [
          { unit: "day", step: 1, date: "%d" }  // 子时间轴显示日期（例如：01, 02, 03）
        ];
        // 配置时间轴，主单位为月，副单位为日
        gantt.config.scale_unit = "month";  // 主时间单位为“月”
        gantt.config.subscales = [
          { unit: "day", step: 1, template: "%d日" }         // 第二行：显示日期
        ];
      } else if (unit === 'week') {
        //设置日期格式
        gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
        //时间轴展示
        gantt.config.scale_unit = "month";  // 主时间轴单位为月份
        gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）
 
        gantt.config.subscales = [{
          unit: 'week',
          step: 1,
          template: this.weekScaleTemplate
        }];
      }
      this.scale = unit; // 更新当前选中的视图
      gantt.render(); // 重新渲染甘特图
    },
 
    //切换时间轴为周展示
    weekScaleTemplate(date) {
      var dateToStr = gantt.date.date_to_str("%m/%d");
      var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      //return dateToStr(date) + "~" + dateToStr(endDate);
      return `<div style="text-align: center; font-size: 11px; color: black; white-space: nowrap;">
            ${dateToStr(date) + "~" + dateToStr(endDate)}
          </div>`;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    }
 
  }
};
</script>
 
 
<style scoped>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
 
#gantt-chart {
  width: 100%;
  height: 600px;
}
 
/* 设置搜索框样式 */
.search-bar {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 10px;
  /* 设置顶部间距为 10px*/
  margin-bottom: 10px;
}
 
.search-bar input,
.search-bar button {
  padding: 5px;
  margin: 0 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
 
.search-bar button {
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
}
 
.search-bar button:hover {
  background-color: #0056b3;
}
 
/* 调整时间轴刻度行高 */
.gantt_scale .gantt_scale_line {
  line-height: 200px;
  /* 设置时间刻度的行高 */
}
 
/* 调整标题栏的高度 */
.gantt_grid_head {
  height: 50px;
  /* 设置标题栏的高度 */
}
 
/* 调整每一列标题的高度 */
.gantt_grid_head_item {
  height: 50px;
  /* 设置每一列标题的高度 */
  line-height: 50px;
  /* 设置行内文字垂直居中 */
}
 
 
.gantt_task_scale {
  color: #000000 !important;
}
 
.weekend {
  background: #f4f7f4 !important;
}
 
/* 未选中按钮样式 */
.el-button {
  background-color: rgb(57, 216, 110);
  color: black;
  border: 1px solid #dcdfe6;
}
 
/* 选中按钮样式 */
.el-button.active {
  background-color: #409EFF;
  /* 蓝色 */
  color: rgb(255, 255, 255);
  border-color: #409EFF;
}
 
/* 鼠标悬浮时，未选中的按钮变为淡蓝色 */
.el-button:not(.active):hover {
  background-color: #00ff22;
  /* 淡蓝色背景 */
  border-color: #91d5ff;
  /* 淡蓝色边框 */
}
</style>
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/21443.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

Python如何处理excel中的空值和异常值

2025-02-25 13:02:33

Python CDSAPI 批量下载ERA5再分析数据

2025-02-25 13:02:33

局部变量和全局变量（Python）

2025-02-25 13:02:32

Python｜Windows 系统安装 triton 的方法

2025-02-25 13:02:32

通过 Ollama 本地部署 DeepSeek-r1:1.5b 模型后，用 Python 调用推理并生成基于 pytest PO 设计模式的 Playwright 自动化测试文件

2025-02-25 13:02:31

如何在 Python 代码中抛出异常

2025-02-25 13:02:30

python调用ollama库详解

2025-02-25 13:02:30

IsaacLab 从入门到精通（一） 环境配置和依赖安装

2025-02-25 13:02:30

python 中 Class（类）的详细说明，通俗易懂

2025-02-25 13:02:29

阿布量化：基于 Python 的量化交易框架

2025-02-25 13:02:28

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！