彩票走势图

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的JavaScript / HTML5甘特图，允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt正式版

我们的甘特图库（除快速的性能和丰富的功能之外）非常令人赞叹的是，它允许与几乎所有新的流行框架和技术集成。现在，我们将向您展示将js甘特图与Vue.js（渐进式JavaScript框架）结合使用的最简单方法。本文是该教程下半部分内容，紧接上文！

倾听变化和处理事件

假设我们需要跟踪用户对Gantt所做的更改并以某种方式进行处理-以单独的形式显示所选项目的详细信息，保持父组件的数据模型为最新状态，或将这些更改发送到后端。 换句话说，我们需要一种方法让应用程序的其余部分知道甘特内部发生的情况。

为此，我们可以创建一个带有自定义路由器对象的DataProcessor，其中路由器是一个函数，$ emit DataProcessor事件传递给父组件。

作为一个简单的演示，让我们实现一个“更改日志”功能-我们将在甘特文件中所做的所有更改都写在页面上整洁的列表中。
首先，进入Gantt组件，并添加将跟踪并发出dhtmlxGantt更改的代码。在gantt.init调用之后添加以下代码：

   {{ src/components/Gantt.vue }}  
gantt.createDataProcessor((entity, action, data, id) => { 
      this.$emit(`${entity}-updated`, id, action, data);
   });

它将处理程序添加到链接和任务的添加/更新/删除事件中。 如果某个特定的处理程序被调用，它将触发带有参数的组件上的vue事件。

下一步是将这些事件的侦听器添加到应用程序组件中，并在另一个div中写入操作日志。

让我们使用所需的功能扩展应用程序组件：

{{ src/App.vue }}
<script>
import Gantt from './components/Gantt.vue';
 
export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6},
          {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
      messages: []
    }
  },
  methods: {
    addMessage (message) {
      this.messages.unshift(message)
      if (this.messages.length > 40) {
        this.messages.pop()
      }
    },
 
    logTaskUpdate (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: 100%;
    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;
  }
</style>

您可以在此处看到的内容–我们在要存储日志条目的位置添加了一个数组属性，该方法将新消息添加到该数组的顶部（我们的日志将首先显示新条目）。此外，我们还添加了两种方法，这些方法将为使用任务和链接完成的操作创建日志消息，并将它们添加到消息堆栈中。

最后，更新应用程序组件的模板以利用以下功能：

{{ src/App.vue }} 
<template>
  <div class="container">
    <div class="right-container">
      <ul class="gantt-messages">
        <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">{{message}}</li>
      </ul>
    </div>
    <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"></gantt>
  </div>
</template>

我们添加了一个简单的两列布局，将日志处理程序附加到了从甘特模块发出的甘特事件，添加了用于存放日志消息的容器并将其绑定到日志消息堆栈。

现在，如果我们对甘特做了一些更改，则消息应该显示在右侧。

如果要显示有关所选任务的一些信息，请继续以下说明。

为了显示有关所选任务的信息，我们可以捕获DHTMLX Gantt（'onTaskSelected'）的API事件，并将它们$ emit到父组件。 更改任务ID后，我们还可以使用“ onTaskIdChange”事件来更新信息。

打开Gantt图表组件，并在gantt.init调用之前添加以下代码：

{{ src/components/Gantt.vue }}      
gantt.attachEvent('onTaskSelected', (id) => {
      let task = gantt.getTask(id);
      this.$emit('task-selected', task);
});
 
    gantt.attachEvent('onTaskIdChange', (id, new_id) => {
       if (gantt.getSelectedId() == new_id) {
         let task = gantt.getTask(new_id);
         this.$emit('task-selected', task);
        }
     });

在这里，我们添加了onTaskSelected处理程序，该处理程序将触发“任务选择”事件。

打开应用程序组件以向其中添加选择处理程序。 我们还需要向模板中添加一些必要的元素。它看起来应该像这样：

{{ src/App.vue }} 
<template>
  <div class="container">
    <div class="right-container">
      <div class="gantt-selected-info">
        <div v-if="selectedTask">
          <h2>{{selectedTask.text}}</h2>
          <span><b>ID: </b>{{selectedTask.id}}</span><br/>
          <span><b>Progress: </b>{{selectedTask.progress|toPercent}}%</span><br/>
          <span><b>Start Date: </b>{{selectedTask.start_date|niceDate}}</span><br/>
          <span><b>End Date: </b>{{selectedTask.end_date|niceDate}}</span><br/>
        </div>
        <div v-else class="select-task-prompt">
          <h2>Click any task</h2>
        </div>
      </div>
      <ul class="gantt-messages">
        <li class="gantt-message" v-for="message in messages" v-bind:key="index">{{message}}</li>
      </ul>
    </div>
    <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt>
  </div>
</template>

还需要设置样式，以美观的方式显示有关所选任务的信息：

<style>
...
.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>

在这里，我们添加了另一个容器，该容器使用“ v-if”指令绑定到了应用程序组件的selectedTask属性。 此外，我们为现在发出的“任务选择”事件添加了处理程序。

确保将此属性添加到应用程序组件：

   {{ src/App.vue }}    
   selectedTask: null

并添加selectTask方法，该方法在我们上面定义的处理程序中使用：

    {{ src/App.vue }}     
    selectTask: function(task){
      this.selectedTask = task
    }

因此，每次用户在Gantt内部选择任务时，该组件都会发出“任务选择”事件。 然后，此事件由应用程序组件捕获。 在事件处理程序内部，我们更新selectedTask属性，该属性依次调用带有任务详细信息的.gantt-selected-info元素的重绘。

请注意，任务对象具有Date类型的start_date / end_date属性和float类型的进度完成-在将它们添加到页面之前，应使用易于使用的格式对其进行格式化。

它是使用toPercent和niceDate过滤器实现的，我们定义如下：

{{ src/App.vue }}   
filters: {
    toPercent (val) {
      if(!val) return '0'
      return Math.round((+val) * 100)
    },
    niceDate (obj){
      return '${obj.getFullYear()} / ${obj.getMonth()} / ${obj.getDate()}'
    }
  }

现在，如果我们运行我们的应用程序并选择一个任务，我们应该看到它的信息显示在右侧。

因此，我们借助DHTMLX Gantt和Vue.js创建了一个简单的Gantt图表。我们的工作结果可以。如果您按照上述说明进行操作，遇到任何困难，请随时与我们分享。

相关内容推荐：

试用下载>>>

了解APS系统>>>

甘特图dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（上）