feat: 优化无数据显示

Gary Gu

4 days ago 81e54a2f94f382bcb9838c8dd79c5119b8e8f14f

 src/components/Gantt.vue

@@ -26,6 +26,7 @@
  import axios from "axios";

  import { gantt } from "dhtmlx-gantt";

  import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

  import { HomeAPI } from "@/api/home";



  export default {

    name: "Gantt",

@@ -51,6 +52,7 @@
        handler(newVal) {

          console.log("甘特图接收到的数据:", newVal);

          // 处理数据变化的逻辑

          this.getProjectqryDataColl(newVal);

        },

        deep: true, // 深度监听对象内部变化

        immediate: true, // 立即执行一次

@@ -58,34 +60,23 @@
    },

    mounted() {

      this.init(); //初始化

      this.getProjectqryDataColl(); //获取数据

    },

    methods: {

      // 将毫秒值转换为普通的日期格式 yyyy-MM-dd

      formatDate(time) {

        const myTime = new Date(time);

        const yyyy = myTime.getFullYear();

        let MM = myTime.getMonth() + 1;

        if (MM < 10) {

          MM = "0" + MM;

        }

        let dd = myTime.getDate();

        if (dd < 10) {

          dd = "0" + dd;

        }

        const str = yyyy + "-" + MM + "-" + dd;

        return str;

      formatDateTime(date = new Date()) {

        const year = date.getFullYear();

        const month = String(date.getMonth() + 1).padStart(2, "0");

        const day = String(date.getDate()).padStart(2, "0");

        const hours = String(date.getHours()).padStart(2, "0");

        const minutes = String(date.getMinutes()).padStart(2, "0");

        const seconds = String(date.getSeconds()).padStart(2, "0");



        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      },

      // 获取两个时间相减的天数

      getDays(strDateStart, strDateEnd) {

        var strSeparator = "-";

        //日期分隔符   var oDate1;   var oDate2;

        var iDays;

        var oDate1 = strDateStart.split(strSeparator);

        var oDate2 = strDateEnd.split(strSeparator);

        var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);

        var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);

        var iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24);

        var strDateS = new Date(strDateStart);

        var strDateE = new Date(strDateEnd);

        var iDays = parseInt(Math.abs(strDateS.getTime() - strDateE.getTime()) / 1000 / 60 / 60 / 24);

        //把相差的毫秒数转换为天数

        return iDays;

      },

@@ -95,40 +86,18 @@
        const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差（毫秒）

        return Math.floor(diff / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

      },

      // 计算时间进度

      getIntervalDays2(timestamp1, timestamp2) {

        const now = new Date();

        const date1 = new Date(timestamp1);

        const date2 = new Date(timestamp2);

        const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差（毫秒）

        const total = Math.floor(diff / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

        const diff2 = Math.abs(now.getTime() - date1.getTime()); // 计算时间差（毫秒）

        const real = Math.floor(diff2 / (1000 * 60 * 60 * 24)); // 将时间差转换为天数

        return Math.floor((real / total) * 100);

      },



      clickdataAll() {

        let clickdata = [];

        let colors = "";

        this.taskslist.map((item) => {

          var arr = this.formatDate(item.begin1).split("-");

          var arr1 = this.formatDate(item.over1).split("-");

          var arr = item.PlanBegin.split(" ")[0].split("-");

          var arr1 = item.PlanEnd.split(" ")[0].split("-");

          var startTime = arr[2] + "-" + arr[1] + "-" + arr[0];

          var endTime = arr1[2] + "-" + arr1[1] + "-" + arr1[0];



          var arr2 = [];

          var arr3 = [];

          var startTime1 = "";

          var endTime1 = "";

          var startTime1 = item.RealBegin;

          var endTime1 = item.RealEnd;

          var duration1 = "";

          if (item.begin2 != null) {

            startTime1 = this.formatDate(item.begin2);

          }

          if (item.over2 != null) {

            endTime1 = this.formatDate(item.over2);

          }



          if (startTime1 != "" && endTime1 != "") {

          if (startTime1 && endTime1) {

            duration1 = this.getDays(startTime1, endTime1);

          }

          if (item.zt == "0") {

@@ -147,11 +116,11 @@
            colors = "#8bc34a";

          }

          clickdata.push({

            id: item.id,

            text: item.project,

            id: item.Id,

            text: item.TaskName,

            start_date: startTime,

            end_date: endTime,

            parent: item.parent,

            parent: item.ParentId,

            duration: "4",

            start_date1: startTime1,

            end_date1: endTime1,

@@ -179,17 +148,17 @@
        });

        // 先筛选父级

        this.taskslist.map((item) => {

          if (!item.used && !item.parent) {

          if (!item.used && !item.ParentId) {

            item.used = true;

            item.baseTitle = "[" + item.project + "]";

            item.baseTitle = "[" + item.TaskName + "]";

            baseList.push(item);

          }

        });

        baseList.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

            if (!item2.used && item2.ParentId == item.Id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

              item2.baseTitle = item.baseTitle + "->[" + item2.TaskName + "]";

              baseList2.push(item2);

            }

          });

@@ -197,9 +166,9 @@


        baseList2.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

            if (!item2.used && item2.ParentId == item.Id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

              item2.baseTitle = item.baseTitle + "->[" + item2.TaskName + "]";

              baseList3.push(item2);

            }

          });

@@ -207,9 +176,9 @@


        baseList3.map((item) => {

          this.taskslist.map((item2) => {

            if (!item2.used && item2.parent == item.id) {

            if (!item2.used && item2.ParentId == item.Id) {

              item2.used = true;

              item2.baseTitle = item.baseTitle + "->[" + item2.project + "]";

              item2.baseTitle = item.baseTitle + "->[" + item2.TaskName + "]";

            }

          });

        });

@@ -222,34 +191,45 @@
        });

        this.taskslist = copyTaskslist;

      },

      // 获取工程进度项目列表

      getProjectqryDataColl() {

        axios.get("https://api.zhihuibuild.com/zuul/zuul/jinchan-device/project/qryProjectProgress").then(({ data }) => {

          // 接口获取data

          if (data.code == "200") {

            if (data.body.length != 0) {

              this.taskslist = data.body;

      /**

       * 获取项目进度数据

       *

       * begin1 ---> PlanBegin

       * over1  ---> PlanEnd

       *

       * begin2 ---> RealBegin

       * over2 ---> RealEnd

       */

      getProjectqryDataColl(bindId) {

        const params = {

          bindId,

        };

        HomeAPI.GetJSCProgress(params).then((res) => {

          if (res.Ret === 1) {

            const result = res.Data;

            if (result.length > 0) {

              this.taskslist = result;

              this.clearDirtyData();

              let cache = [];



              this.taskslist.map((item, index) => {

                item.zIndex = index + 1;

                // 重新判断状态

                let nowTime = new Date().getTime();

                if (!item.begin2) {

                let nowTime = this.formatDateTime();

                if (!item.RealBegin) {

                  //未开始

                  item.zt = 0;

                } else {

                  if (!item.over2) {

                  if (!item.RealEnd) {

                    //未结束

                    if (item.over1 >= nowTime) {

                    if (item.PlanEnd >= nowTime) {

                      //判断预计工期是否超过当前时间

                      item.zt = 1; //进行中

                    } else {

                      item.zt = 5; //延期未完工

                    }

                  } else {

                    if (item.over1 >= item.over2) {

                    if (item.PlanEnd >= item.RealEnd) {

                      //判断预计工期是否超过实际工期

                      item.zt = 3; //提前完工2、3

                    } else {

@@ -258,7 +238,7 @@
                  }

                }

                if (item.zt == "5") {

                  cache.push([cache.length + 1, item.project, this.getIntervalDays(item.over1)]);

                  cache.push([cache.length + 1, item.TaskName, this.getIntervalDays(item.PlanEnd)]);

                }

              });



@@ -273,6 +253,8 @@
              setTimeout(() => {

                this.clickdataAll();

              }, 1000);

            } else {

              gantt.clearAll();

            }

          }

        });