update

src/components/pages/components/ganChart.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="ganCss">
     <!-- v-show="showGantt" -->
-    <gantt-elastic
-      :options="options"
-      :tasks="tasks"
-      @tasks-changed="tasksUpdates"
-      @options-changed="optionsUpdate"
-      @dynamic-style-changed="styleUpdate"
-    >
+    <gantt-elastic :options="options" :tasks="tasks" @tasks-changed="tasksUpdates" @options-changed="optionsUpdate"
+      @dynamic-style-changed="styleUpdate">
     </gantt-elastic>
 
     <!-- -->
@@ -15,6 +10,7 @@
 </template>
 
 <style>
+
 </style>
 <script>
 import GanttElastic from "gantt-elastic";
@@ -131,17 +127,18 @@ let options = {
   },
 };
 export default {
+  props: ['Json'],
   //   name: "Gantt",
   components: {
     GanttElastic,
     // GanttHeader
   },
-  props: {
-    gantData: {},
-    flags: {
-      type: String,
-    },
-  },
+  // props: {
+  //   gantData: {},
+  //   flags: {
+  //     type: String,
+  //   },
+  // },
   data() {
     return {
       showGantt: false,
@@ -150,81 +147,81 @@ export default {
       TaskData: [],
       sontaskData: "",
       tasks: [
-        {
-          id: 1,
-          label: "项目一",
-          start: this.getTody(new Date(), 4),
-          end: this.getTody(new Date(), -30),
-          duration: 30 * 24 * 60 * 60 * 1000,
-          percent: 85,
-          type: "task",
-          style: {
-            base: {
-              fill: "#4a83d0",
-              stroke: "#4a83d0",
-            },
-          },
-        },
-        {
-          id: 2,
-          label: "项目二",
-          start: this.getTody(new Date(), 10),
-          end: this.getTody(new Date(), -50),
-          duration: 30 * 24 * 60 * 60 * 1000,
-          percent: 85,
-          type: "task",
-          style: {
-            base: {
-              fill: "#4a83d0",
-              stroke: "#4a83d0",
-            },
-          },
-        },
-        {
-          id: 3,
-          label: "项目三",
-          start: this.getTody(new Date(), 15),
-          end: this.getTody(new Date(), -80),
-          duration: 30 * 24 * 60 * 60 * 1000,
-          percent: 85,
-          type: "task",
-          style: {
-            base: {
-              fill: "#4a83d0",
-              stroke: "#4a83d0",
-            },
-          },
-        },
-        {
-          id: 4,
-          label: "项目四",
-          start: this.getTody(new Date(), 7),
-          end: this.getTody(new Date(), -15),
-          duration: 30 * 24 * 60 * 60 * 1000,
-          percent: 85,
-          type: "task",
-          style: {
-            base: {
-              fill: "#4a83d0",
-              stroke: "#4a83d0",
-            },
-          },
-        },
-        {
-          id: 5,
-          label: "项目五",
-          start: this.getTody(new Date(), 3),
-          end: this.getTody(new Date(), -40),
-          duration: 30 * 24 * 60 * 60 * 1000,
-          percent: 85,
-          type: "task",
-          style: {
-            base: {
-              fill: "#4a83d0",
-              stroke: "#4a83d0",
-            },
-          },
-        },
+        // {
+        //   id: 1,
+        //   label: "项目一",
+        //   start: this.getTody(new Date(), 4),
+        //   end: this.getTody(new Date(), -30),
+        //   duration: 30 * 24 * 60 * 60 * 1000,
+        //   percent: 85,
+        //   type: "task",
+        //   style: {
+        //     base: {
+        //       fill: "#4a83d0",
+        //       stroke: "#4a83d0",
+        //     },
+        //   },
+        // },
+        // {
+        //   id: 2,
+        //   label: "项目二",
+        //   start: this.getTody(new Date(), 10),
+        //   end: this.getTody(new Date(), -50),
+        //   duration: 30 * 24 * 60 * 60 * 1000,
+        //   percent: 85,
+        //   type: "task",
+        //   style: {
+        //     base: {
+        //       fill: "#4a83d0",
+        //       stroke: "#4a83d0",
+        //     },
+        //   },
+        // },
+        // {
+        //   id: 3,
+        //   label: "项目三",
+        //   start: this.getTody(new Date(), 15),
+        //   end: this.getTody(new Date(), -80),
+        //   duration: 30 * 24 * 60 * 60 * 1000,
+        //   percent: 85,
+        //   type: "task",
+        //   style: {
+        //     base: {
+        //       fill: "#4a83d0",
+        //       stroke: "#4a83d0",
+        //     },
+        //   },
+        // },
+        // {
+        //   id: 4,
+        //   label: "项目四",
+        //   start: this.getTody(new Date(), 7),
+        //   end: this.getTody(new Date(), -15),
+        //   duration: 30 * 24 * 60 * 60 * 1000,
+        //   percent: 85,
+        //   type: "task",
+        //   style: {
+        //     base: {
+        //       fill: "#4a83d0",
+        //       stroke: "#4a83d0",
+        //     },
+        //   },
+        // },
+        // {
+        //   id: 5,
+        //   label: "项目五",
+        //   start: this.getTody(new Date(), 3),
+        //   end: this.getTody(new Date(), -40),
+        //   duration: 30 * 24 * 60 * 60 * 1000,
+        //   percent: 85,
+        //   type: "task",
+        //   style: {
+        //     base: {
+        //       fill: "#4a83d0",
+        //       stroke: "#4a83d0",
+        //     },
+        //   },
+        // },
       ],
       options,
       dynamicStyle: {},
@@ -232,7 +229,7 @@ export default {
         base: {
           fill: "#4a83d0",
           stroke: "#4a83d0",
-          height:20,
+          height: 20,
         },
       },
       unfinishedStyle: {
@@ -246,33 +243,21 @@ export default {
       flag: true,
     };
   },
-  created() {},
+  created() { },
   mounted() {
-    that = this;
-    if (this.gantData) {
-      this.getTaskList(this.gantData.id);
-    }
+    this.getTaskList();
   },
   computed: {},
   watch: {
-    gantData: function (news, old) {
-      this.getTaskList(news.id);
-    },
+    Json: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+
+      }
+    }
   },
   methods: {
-    // addTask() {
-    //   this.tasks.push({
-    //     id: this.lastId++,
-    //     label:
-    //       '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
-    //     user:
-    //       '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
-    //     start: getDate(24 * 3),
-    //     duration: 1 * 24 * 60 * 60 * 1000,
-    //     percent: 50,
-    //     type: "project"
-    //   });
-    // },
     handleClose() {
       this.dialogVisible = false;
     },
@@ -314,77 +299,31 @@ export default {
       return iDays;
     },
     //获取数据-----------------------------------------------------
-    getTaskList(id) {
-      var that = this;
-
-      var params = {};
-      params["projectId"] = id;
-      this.$ajax
-        .post("/ipm/index.php?a=default.taskList", params)
-        .then(function (res) {
-          if (res.data.success) {
-            // that.showGantt = true;
-            that.TaskData.length = [];
-            var list = res.data.datas;
-            var startTime = list[0].startTime;
-            var endTime = list[list.length - 1].endTime;
-            var diffTime = that.datedifference(endTime, startTime);
-            var temp1 = {
-              id: Number(id),
-              label: that.gantData.name,
-              nums: "",
-              user: "无",
-              start: startTime,
-              end: endTime,
-              duration: diffTime * 24 * 60 * 60 * 1000,
-              percent: 85,
-              type: "project",
-            };
-            that.TaskData.push(temp1);
-            for (var i = 0; i < list.length; i++) {
-              var temp = {
-                id: Number(list[i].id) + 1,
-                code: list[i].code,
-                label:
-                  '<span style="color:#0077c0;">' + list[i].name + "</span>",
-                text: list[i].name,
-                nums: list[i].statusText,
-                user: list[i].operatePerson,
-                parentId: Number(list[i].projectId), //parentId 要跟父级的id对应
-                start: list[i].startTime,
-                end: list[i].endTime,
-                duration:
-                  that.datedifference(list[i].endTime, list[i].startTime) *
-                  24 *
-                  60 *
-                  60 *
-                  1000, //获取时间差 任务完成的时间段
-                percent: 50,
-                type: "milestone",
-                // collapsed: true,
-                style: {
-                  base: {
-                    fill: "#4a83d0",
-                    stroke: "#4a83d0",
-                  },
-                },
-              };
-              that.TaskData.push(temp);
-            }
-
-            if (that.TaskData.length > 0) {
-              that.showGantt = true;
-              that.tasksUpdates(that.TaskData, 2);
-              that.optionsUpdate(that.options, 2);
-            }
-          } else {
-            that.showGantt = false;
-            that.$message.warning(res.data.message);
-          }
-        });
+    getTaskList() {
+      var unitJson = this.Json
+      for (var i = 0; i < unitJson.length; i++) {
+        let task = unitJson[i].chapterInfo[0].taskJson
+        for (var j = 0; j < task.length; j++) {
+          this.tasks.push({
+            id: i+'-'+j,
+            label: '第'+(i+1)+'阶段-'+task[j].task,
+            start: this.getTody(task[j].time[0]),
+            end: this.getTody(task[j].time[1]),
+            duration: 30 * 24 * 60 * 60 * 1000,
+            percent: 85,
+            type: "task",
+            style: {
+              base: {
+                fill: "#4a83d0",
+                stroke: "#4a83d0",
+              },
+            },
+          })
+        }
+      }
     },
     //点击弹出-----------------------------------------------------
-    showDialog(data) {},
+    showDialog(data) { },
 
     tasksUpdates(tasks, num) {
       if (num == 2) {
@@ -406,5 +345,6 @@ export default {
 };
 </script>
 <style scoped>
+
 </style>
 

src/components/pages/components/proMan.vue

@@ -1,30 +1,34 @@
 <template>
-  <div style="height: 100%; width: 100%; overflow: hidden">
-    <div class="rwBox">
-      <div class="rwTop">
-        <div class="rwTouImg"></div>
-        <div>于小宁</div>
-      </div>
-      <div class="rwMidBox">
-        <div>确定季度销售规划</div>
-        <div class="rwMessage">
-          <div class="rwBoxMessage">
-            <div class="rwIcon">
-              <img src="../../../assets/icon/startTime.png" alt="" />
-            </div>
-            <div>开始时间：{{ startTime }} </div>
-          </div>
-          <div class="rwBoxMessage">
-            <div class="rwIcon">
-              <img src="../../../assets/icon/endTime.png" alt="" />
-            </div>
-            <div>完成时间：{{ endTime }} </div>
+  <div style="width: 100%; max-height: 600px; overflow: auto;padding-bottom: 10px;" class="content">
+    <div v-for="(item, index) in Json" :key="index" class="bigBox">
+      <div v-for="(item2, index2) in item.chapterInfo[0].taskJson" :key="index + '-' + index2" class="taskBox">
+        <div class="rwBox">
+          <div class="rwTop">
+            <div class="rwTouImg"></div>
+            <div>{{ item2.people }}</div>
           </div>
-          <div class="rwBoxMessage">
-            <div class="rwIcon">
-              <img src="../../../assets/icon/allTime.png" alt="" />
+          <div class="rwMidBox">
+            <div>{{ item2.task }}</div>
+            <div class="rwMessage">
+              <div class="rwBoxMessage">
+                <div class="rwIcon">
+                  <img src="../../../assets/icon/startTime.png" alt="" />
+                </div>
+                <div>开始时间：{{ timeB(item2.time[0]) }} </div>
+              </div>
+              <div class="rwBoxMessage">
+                <div class="rwIcon">
+                  <img src="../../../assets/icon/endTime.png" alt="" />
+                </div>
+                <div>完成时间：{{ timeB(item2.time[1]) }} </div>
+              </div>
+              <div class="rwBoxMessage">
+                <div class="rwIcon">
+                  <img src="../../../assets/icon/allTime.png" alt="" />
+                </div>
+                <div>所需时长：{{ timeA(item2.time[0], item2.time[1]) }}</div>
+              </div>
             </div>
-            <div>所需时长：{{ time }}</div>
           </div>
         </div>
       </div>
@@ -34,60 +38,93 @@
 
 <script>
 export default {
+  props: ['Json'],
   data() {
     return {
-      time: "",
-      startTime: "2022-08-25",
-      endTime: "2022-09-15",
     };
   },
-  methods: {
-    getDay() {
-      var day =
-        new Date(this.endTime).getTime() - new Date(this.startTime).getTime(); //日期转时间戳
-      this.time = Math.floor(day / 86400000);
+  computed: {
+    timeA() { //此处不需要携带参数
+      return function (startTime, endTime) {
+        var day =
+          new Date(endTime).getTime() - new Date(startTime).getTime(); //日期转时间戳
+        var time = Math.floor(day / 86400000);
+        return time
+      }
     },
+    timeB() {
+      return function (timeA) {
+        var time = new Date(timeA);
+        time.setTime(time.getTime());
+        var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
+          + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
+        return s2
+      }
+    }
+  },
+  methods: {
   },
   created() {
-    this.getDay();
   },
 };
 </script>
 
 <style scoped>
+.content {
+  display: flex;
+}
+
+.bigBox {
+  padding-bottom: 11px;
+  height: 100%;
+}
+
+.bigBox+.bigBox {
+  margin-left: 10px;
+}
+
+.taskBox+.taskBox {
+  margin-top: 10px;
+}
+
 .rwBox {
   width: 280px;
-  height: 220px;
   background: #fff;
 }
+
 .rwTop {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
+
 .rwTouImg {
-  width: 25px;
-  height: 25px;
+  width: 13px;
+  height: 13px;
   background: #0258f1 100%;
   border-radius: 50%;
-  margin-right: 5px;
+  margin: 0 10px;
 }
+
 .rwMidBox {
   border: 2px solid #e3e6e8;
   width: 270px;
   margin-top: 10px;
   border-radius: 15px;
 }
-.rwMidBox > div:nth-child(1) {
+
+.rwMidBox>div:nth-child(1) {
   font-weight: bold;
   margin: 15px 0 0 0;
   padding: 0 10px;
 }
+
 .rwMessage {
   margin-top: 5px;
   padding: 0 10px 10px 10px;
 }
+
 .rwBoxMessage {
   display: flex;
   flex-direction: row;
@@ -95,6 +132,7 @@ export default {
   align-items: center;
   padding: 10px 0;
 }
+
 .rwIcon {
   width: 20px;
   height: 20px;
@@ -102,12 +140,14 @@ export default {
   border-radius: 50%; */
   margin-right: 5px;
 }
-.rwIcon > img {
+
+.rwIcon>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.rwBoxMessage > div:nth-child(2) {
-  font-size: 14px;
+
+.rwBoxMessage>div:nth-child(2) {
+  font-size: 12px;
 }
 </style>

src/components/pages/student/addCourse.vue

@@ -45,13 +45,13 @@
             </div>
             <div v-if="steps == 4" class="four">
               <div>
-                <img src="../../../assets/icon/four.png" alt />
+                <img src="../../../assets/icon/five.png" alt style="width:33px" />
               </div>
               <div>项目管理</div>
             </div>
             <div v-else class="fourNo" @click="navSteps(4)">
               <div>
-                <img src="../../../assets/icon/fourNo.png" alt />
+                <img src="../../../assets/icon/fiveNo.png" alt style="width:33px" />
               </div>
               <div>项目管理</div>
             </div>
@@ -553,6 +553,7 @@
                           justify-content: flex-start;
                           align-items: center;
                           display: flex;
+                          margin-top: 10px;
                         ">
                         <div style="
                             height: 20px;
@@ -574,7 +575,6 @@
                           justify-content: flex-start;
                           align-items: center;
                           width: 70.5% !important;
-                          padding-top: 30px;
                         ">
                         <div class="lineTitle">任务描述</div>
                         <div class="line"></div>
@@ -682,11 +682,15 @@
               </div>
             </div>
           </div>
-          <div style="
-              width: calc(100% - 20px);
-              background: rgb(255, 255, 255);
-              border-radius: 10px;
-            " v-if="this.steps == 4">
+          <div class="rightBox" v-if="this.steps == 4">
+            <div class="proMan">
+              <div class="title"><img src="../../../assets/icon/task.png" alt />任务进展甘特图</div>
+              <ganChart :Json="unitJson"></ganChart>
+            </div>
+            <div class="proMan">
+              <div class="title"><img src="../../../assets/icon/proMan.png" alt />负责人看板</div>
+              <proMan :Json="unitJson"></proMan>
+            </div>
           </div>
           <div style="
               width: calc(100% - 20px);
@@ -1500,8 +1504,10 @@ import Table from "../../../components/tools/table";
 import Mind from "../../tools/jsmind2";
 import Sunburst from "../../tools/sunburst";
 import SeeBoard from "../../tools/seeBoard";
+import proMan from "../components/proMan.vue"
+import ganChart from "../components/ganChart.vue"
 export default {
-  components: { EditorBar, Mind, Sunburst, SeeBoard, Table },
+  components: { EditorBar, Mind, Sunburst, SeeBoard, Table, proMan, ganChart },
   data() {
     return {
       checkAll: false,
@@ -1712,6 +1718,13 @@ export default {
           j < this.unitJson[_unitIndex].chapterInfo[0].taskJson.length;
           j++
         ) {
+          if (
+            !this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].task
+          ) {
+            this.$message.error("请填写任务名称");
+            cPan = 2
+            break;
+          }
           if (
             !this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].people
           ) {
@@ -1928,6 +1941,51 @@ export default {
           this.$message.error("请将信息填写完整");
           return;
         } else if (s == 4) {
+          let cPan = 1;
+          for (var i = 0; i < this.unitJson.length; i++) {
+            for (
+              var j = 0;
+              j < this.unitJson[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              if (
+                !this.unitJson[i].chapterInfo[0].taskJson[j].task
+              ) {
+                this.$message.error("请填写任务名称");
+                cPan = 2
+                break;
+              }
+              if (
+                !this.unitJson[i].chapterInfo[0].taskJson[j].people
+              ) {
+                this.$message.error("请填写负责人");
+                cPan = 2
+                break;
+              }
+              if (
+                !this.unitJson[i].chapterInfo[0].taskJson[j].time
+              ) {
+                this.$message.error("请填写任务完成时间");
+                cPan = 2
+                break;
+              }
+              if (this.unitJson[i].chapterInfo[0].taskJson[j].eList) {
+                this.unitJson[i].chapterInfo[0].taskJson[j].eList = this.unitJson[
+                  i
+                ].chapterInfo[0].taskJson[j].eList.filter((ele) => {
+                  return ele.value != "";
+                });
+              }
+            }
+          }
+          if (cPan == 2) {
+            return;
+          }
+          if (this.userid != this.courseUserid) {
+            this.updateWork2();
+          } else {
+            this.updateWork();
+          }
           this.steps = 4;
         }
       }
@@ -1978,6 +2036,11 @@ export default {
             }
           }
         } else if (this.steps == 4) {
+          if (this.userid != this.courseUserid) {
+            this.updateWork2();
+          } else {
+            this.updateWork();
+          }
           this.steps++
         }
       } else {
@@ -2956,6 +3019,13 @@ export default {
         j < this.unitJson[_unitIndex].chapterInfo[0].taskJson.length;
         j++
       ) {
+        if (
+          !this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].task
+        ) {
+          this.$message.error("请填写任务名称");
+          cPan = 2
+          break;
+        }
         if (
           !this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].people
         ) {
@@ -3015,6 +3085,13 @@ export default {
           j < this.unitJson[i].chapterInfo[0].taskJson.length;
           j++
         ) {
+          if (
+            !this.unitJson[i].chapterInfo[0].taskJson[j].task
+          ) {
+            this.$message.error("请填写任务名称");
+            cPan = 2
+            break;
+          }
           if (
             !this.unitJson[i].chapterInfo[0].taskJson[j].people
           ) {
@@ -7142,4 +7219,22 @@ ol {
   width: 100%;
   object-fit: contain;
 }
+
+.proMan {
+  width: 95%;
+  margin: 0 auto;
+  padding: 0 0 20px;
+  margin-top: 20px;
+}
+
+.proMan .title {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+.proMan .title img{
+  margin-right: 5px;
+  height: 17px;
+  width: 17px;
+}
 </style>