{{ src/App.vue }}
<template>
  <div class="container" style="height:650px;">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="委托编号">
              <a-input placeholder="请输入委托编号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <gantt class="left-container" :tasks="tasks" style="height:600px;"></gantt>
  </div>
</template>

<script>
import Gantt from '../../components/Gantt.vue';

import {getDeviceList} from '@/api/api'
import { getAction } from '@api/manage'
import { gantt } from 'dhtmlx-gantt'

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,"open": true},
          // {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3},
          // {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3}
          {"id":"1", "text":"Project #2", "start_date":"2020-01-17", "duration":3, "sample":"样品名称", "project":"检测项目" ,},
          {"id":"2", "text":"Task #1", "start_date":"2020-01-17", "duration":2,  "parent":"1"},
          {"id":"3", "text":"Task #2", "start_date":"2020-01-20", "duration":1,  "parent":"1"}
        ],
        // links: [
        //   {id: 1, source: 1, target: 2, type: '0'},
        //   {id: 2, source: 2, target: 3, type: '0'},
        // ],
        collections: {
          staff:[],
          staff2:[],
        }
      },
    }
  },
  created() {
    // this.getDevicelist();
  },
  methods: {
    getDevicelist(){
      let that = this
      getDeviceList().then((res) => {
        console.log(111,res)
        this.staff = res.result
        that.tasks.collections.staff = res.map(response =>{
          console.log(222,response)
          return {
            value: response.id,
            lable: response.deviceName
          }

        })
        for (let index = 0; index < 3; index++) {
            that.tasks.collections.staff.push(
          { id: 2, label: '小王' },
          { id: 3, label: '老王' }
        )

          }
        console.log(33,that.tasks.collections.staff)



      })

    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow:hidden; */
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>