From 81e54a2f94f382bcb9838c8dd79c5119b8e8f14f Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Tue, 03 Jun 2025 11:44:41 +0800
Subject: [PATCH] feat: 优化无数据显示
---
src/components/Gantt.vue | 149 ++++++++++++++++++++++++-------------------------
1 files changed, 74 insertions(+), 75 deletions(-)
diff --git a/src/components/Gantt.vue b/src/components/Gantt.vue
index d65cee0..9d73196 100644
--- a/src/components/Gantt.vue
+++ b/src/components/Gantt.vue
@@ -18,7 +18,7 @@
><span class="color" style="background-color: rgb(14, 172, 81)"></span>
</div>
</div>
- <div ref="gantt" style="height: 400px; font-size: 12px"></div>
+ <div ref="gantt" style="height: 100%; font-size: 12px"></div>
</div>
</template>
@@ -26,10 +26,17 @@
import axios from "axios";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+ import { HomeAPI } from "@/api/home";
export default {
name: "Gantt",
components: {},
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {
taskslist: [],
@@ -40,36 +47,36 @@
columnsShow: false,
};
},
+ watch: {
+ selectedId: {
+ handler(newVal) {
+ console.log("甘特图接收到的数据:", newVal);
+ // 处理数据变化的逻辑
+ this.getProjectqryDataColl(newVal);
+ },
+ deep: true, // 深度监听对象内部变化
+ immediate: true, // 立即执行一次
+ },
+ },
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;
},
@@ -79,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") {
@@ -131,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,
@@ -163,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);
}
});
@@ -181,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);
}
});
@@ -191,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 + "]";
}
});
});
@@ -206,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 {
@@ -242,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)]);
}
});
@@ -257,6 +253,8 @@
setTimeout(() => {
this.clickdataAll();
}, 1000);
+ } else {
+ gantt.clearAll();
}
}
});
@@ -510,6 +508,7 @@
</script>
<style lang="scss" scoped>
.gantt-box {
+ height: calc(100% - 52px);
background-color: rgba(0, 0, 0, 0.2);
margin: 10px;
color: #fff;
--
Gitblit v1.9.3