demo/ruoyi-ui-vue3/src/views/mts/planDetail/index.vue

<template>
  <div class="container">
    <div class="right-container">
      <div class="gantt-selected-info">
        <div v-if="selectedTask">
          <h2>{{ selectedTask.text }}</h2>
          <span><b>编号: </b>{{ selectedTask.id }}</span><br />
          <span><b>进度: </b> {{ progressPercentage }}</span><br />
          <span><b>开始时间: </b>{{ formattedStartDate }}</span><br />
          <span><b>结束时间: </b>{{ formattedEndDate }}</span><br />
        </div>
        <div v-else class="select-task-prompt">
          <h2>点击任务显示明细</h2>
        </div>
      </div>
      <ul class="gantt-messages">
        <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">
          {{ message }}
        </li>
      </ul>
    </div>
    <GanttComponent ref="ganttContainer" class="left-container" :tasks="tasks" @task-updated="logTaskUpdate"
      @link-updated="logLinkUpdate" @task-selected="selectTask"></GanttComponent>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import GanttComponent from "./components/GanttComponent.vue";
import { queryGanttList, listPlanDetail, getPlanDetail, delPlanDetail, addPlanDetail, updatePlanDetail } from "@/api/mts/planDetail";

export default {
  name: "app",
  components: { GanttComponent },
  data() {
    return {
      tasks: {
        data: [],
        links: [],
      },
      selectedTask: null,
      messages: [],
    };
  },
  mounted() {
    this.queryGanttList();
  },
  computed: {
    progressPercentage() {
      let taskProgress = this.selectedTask.progress;
      if (!taskProgress) {
        return "0";
      }
      return `${Math.round(+taskProgress * 100)} %`;
    },
    formattedStartDate() {
      let taskStart = this.selectedTask.start_date;
      return `${taskStart.getFullYear()} / ${taskStart.getMonth() + 1} / ${taskStart.getDate()}`;
    },
    formattedEndDate() {
      let taskEnd = this.selectedTask.end_date;
      return `${taskEnd.getFullYear()} / ${taskEnd.getMonth() + 1} / ${taskEnd.getDate()}`;
    },
  },
  methods: {
    async queryGanttList() {
      const route = this.$route;
      const res = await queryGanttList({ mainId: route.params.mainId })

      res.data.forEach(item => {
        item.start_date = dayjs(item.start_date).toDate();
      });
      this.tasks.data = res.data;

      this.$refs.ganttContainer.$init();
    },
    selectTask(task) {
      this.selectedTask = task;
    },

    addMessage(message) {
      console.log(message)
      message = message.replace('Task update', '操作任务日志')
      message = message.replace('Task create', '新建任务日志')

      this.messages.unshift(message);
      if (this.messages.length > 40) {
        this.messages.pop();
      }
    },

    logTaskUpdate(id, mode, task) {
      console.log(id, mode, task)
      let text = task && task.text ? ` (${task.text})` : "";
      let message = `Task ${mode}: ${id} ${text}`;
      this.addMessage(message);
    },

    logLinkUpdate(id, mode, link) {
      let message = `Link ${mode}: ${id}`;
      if (link) {
        message += ` ( source: ${link.source}, target: ${link.target} )`;
      }
      this.addMessage(message);
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 100%;
}

.left-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.right-container {
  border-right: 1px solid #cecece;
  float: right;
  height: 100%;
  width: 340px;
  box-shadow: 0 0 5px 2px #aaa;
  position: relative;
  z-index: 2;
}

.gantt-messages {
  list-style-type: none;
  height: 50%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 5px;
}

.gantt-messages>.gantt-message {
  background-color: #f4f4f4;
  box-shadow: inset 5px 0 #d69000;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 5px 0;
  padding: 8px 0 8px 10px;
}

.gantt-selected-info {
  border-bottom: 1px solid #cecece;
  box-sizing: border-box;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  height: 50%;
  line-height: 28px;
  padding: 10px;
}

.gantt-selected-info h2 {
  border-bottom: 1px solid #cecece;
}

.select-task-prompt h2 {
  color: #d9d9d9;
}
</style>