ProjectRate.vue 13 KB

Edit Raw Blame History

<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">

          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.keyword" placeholder="关键字" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="()=>(getDataList())">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <gantt-elastic
      :options="options"
      :tasks="tasks"
      @tasks-changed="tasksUpdate"
      @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate"
    >
      <gantt-header slot="header" :options="options"></gantt-header>
    </gantt-elastic>
    <div class="q-mt-md" />
  </div>

</template>

<script>
import GanttElastic from 'gantt-elastic'
import GanttHeader from 'gantt-elastic-header'
import moment from 'moment'
import dayjs from 'dayjs'

function getDate(hours) {
  const currentDate = new Date()
  const currentYear = currentDate.getFullYear()
  const currentMonth = currentDate.getMonth()
  const currentDay = currentDate.getDate()
  const timeStamp = new Date(
    currentYear,
    currentMonth,
    currentDay,
    0,
    0,
    0
  ).getTime()
  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime()
}

let that
let tasks = [
  {
    "duration": 15267159000,
    "end": 1616575959000,
    "id": "HHCS-L-2020-0123",
    "isOnTime": false,
    "start": 1601308800000,
    "taskPoint": "支腿输送线项目",
    "type": "task",
    "style": {
      "base": {
        "fill": "#BABABA",
        "stroke": "#BABABA"
      }
    }
  },
  {
    "duration": 86400000,
    "end": 1601395200000,
    "id": "1",
    "isOnTime": false,
    "opinion": "\r\n    吴乐\r\n\r\n\r\n    黄何嵘",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-4266017801783787060",
    "responsible": "9024998056131579524",
    "start": 1601308800000,
    "taskPoint": "电气设计计划",
    "type": "task"
  },
  {
    "duration": 86400000,
    "end": 1601395200000,
    "id": "2",
    "isOnTime": false,
    "opinion": "\r\n    吴乐\r\n\r\n\r\n    黄何嵘",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-4266017801783787060",
    "responsible": "9024998056131579524",
    "start": 1601308800000,
    "taskPoint": "电气设计实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 86400000,
    "end": 1601395200000,
    "id": "3",
    "isOnTime": false,
    "opinion": "\r\n    冷师红\r\n\r\n\r\n    文禄强",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-4127252952202197745",
    "responsible": "2457865889357907883",
    "start": 1601308800000,
    "taskPoint": "机械设计计划",
    "type": "task"
  },
  {
    "duration": 86400000,
    "end": 1601395200000,
    "id": "4",
    "isOnTime": false,
    "opinion": "\r\n    冷师红\r\n\r\n\r\n    文禄强",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-4127252952202197745",
    "responsible": "2457865889357907883",
    "start": 1601308800000,
    "taskPoint": "机械设计实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 15267159000,
    "end": 1616575959000,
    "id": "5",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601308800000,
    "taskPoint": "软件设计计划",
    "type": "task"
  },
  {
    "duration": 15267159000,
    "end": 1616575959000,
    "id": "6",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601308800000,
    "taskPoint": "软件设计实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 1728000000,
    "end": 1603123200000,
    "id": "7",
    "isOnTime": true,
    "opinion": "\r\n    肖萍\r\n\r\n\r\n    肖萍",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-5629229241258588009",
    "responsible": "-5629229241258588009",
    "start": 1601395200000,
    "taskPoint": "物资采购计划",
    "type": "task"
  },
  {
    "duration": 10195200000,
    "end": 1611590400000,
    "id": "8",
    "isOnTime": true,
    "opinion": "\r\n    肖萍\r\n\r\n\r\n    肖萍",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-5629229241258588009",
    "responsible": "-5629229241258588009",
    "start": 1601395200000,
    "taskPoint": "物资采购实际",
    "type": "task",
    "style": {
      "base": {
        "fill": '#E6A987',
        "stroke": '#E6A987'
      }
    }
  },
  {
    "duration": 1555200000,
    "end": 1602950400000,
    "id": "9",
    "isOnTime": false,
    "opinion": "\r\n    王启太\r\n\r\n\r\n    彭志明",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-260560139759761334",
    "responsible": "-4737041461688647253",
    "start": 1601395200000,
    "taskPoint": "生产外协计划",
    "type": "task"
  },
  {
    "duration": 1555200000,
    "end": 1602950400000,
    "id": "10",
    "isOnTime": false,
    "opinion": "\r\n    王启太\r\n\r\n\r\n    彭志明",
    "parentId": "HHCS-L-2020-0123",
    "principal": "-260560139759761334",
    "responsible": "-4737041461688647253",
    "start": 1601395200000,
    "taskPoint": "生产外协实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 1296000000,
    "end": 1602691200000,
    "id": "11",
    "isOnTime": true,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "生产自制计划",
    "type": "task"
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "12",
    "isOnTime": true,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "生产自制实际",
    "type": "task",
    "style": {
      "base": {
        "fill": '#E6A987',
        "stroke": '#E6A987'
      }
    }
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "13",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "场内装配计划",
    "type": "task"
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "14",
    "isOnTime": false,
    "parentId": "HHCS-L-2020-0123",
    "start": 1601395200000,
    "taskPoint": "场内装配实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "17",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "发货计划",
    "type": "task"
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "18",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "发货实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "id": "19",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "客户现场安装计划",
    "type": "task"
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "id": "20",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "客户现场安装实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "15",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "场内调试计划",
    "type": "task"
  },
  {
    "duration": 15180759000,
    "end": 1616575959000,
    "id": "16",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1601395200000,
    "taskPoint": "生产自制实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "id": "21",
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "客户现场调试计划",
    "type": "task"
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "客户现场调试实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "预验收计划",
    "type": "task"
  },
  {
    "duration": 0,
    "end": 1616575959000,
    "isOnTime": false,
    "opinion": "",
    "parentId": "HHCS-L-2020-0123",
    "principal": "",
    "responsible": "",
    "start": 1616575959000,
    "taskPoint": "预验收实际",
    "type": "task",
    "style": {
      "base": {
        "fill": "#1EBC61",
        "stroke": "#0EAC51"
      }
    }
  }
];
let options = {
  taskMapping: {
    progress: "percent"
  },
  maxRows: 100,
  maxHeight: 500,
  title: {
    label: "Your project title as html",
    html: false
  },
  row: {
    height: 24
  },
  calendar: {
    hour: {
      display: false
    }
  },
  chart: {
    progress: {
      bar: false
    },
    expander: {
      display: false
    }
  },
  taskList: {
    expander: {
      straight: false
    },
    columns: [
      {
        id: 1,
        label: "ID",
        value: "id",
        width: 50
      },
      {
        id: 2,
        label: "任务戳点",
        value: "taskPoint",
        width: 150,
        expander: true
      },
      {
        id: 3,
        label: "开始时间",
        value: task => dayjs(task.start).format("YYYY-MM-DD"),
        width: 130
      },
      {
        id: 4,
        label: "完成日期",
        value: task => dayjs(task.end).format("YYYY-MM-DD"),
        width: 100,
      },
      {
        id: 9,
        label: "意见",
        value: "opinion",
        width: 60
      },
      {
        id: 9,
        label: "完成",
        value: "isOnTime",
        width: 60
      }
    ]
  },
  locale: {
    name: "zh-cn",
    Now: "Now",
    "X-Scale": "Zoom-X",
    "Y-Scale": "Zoom-Y",
    "Task list width": "列头宽度",
    "Before/After": "Expand",
    "Display task list": "Task list",
    weekdays:["周日","周一","周二","周三","周四","周五","周六"],
    months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
};

let doingStyle = {
  base: {
    fill: '#BFEFFF',
    stroke: '#BFEFFF'
  }
}
let warnStyle = {
  base: {
    fill: '#FF6A6A',
    stroke: '#FF6A6A'
  }
}
let finishStyle = {
  base: {
    fill: '#C1FFC1',
    stroke: '#C1FFC1'
  }
}
let cancelStyle = {
  base: {
    fill: '#BABABA',
    stroke: '#BABABA'
  }
}

export default {
  name: 'ProjectRate',
  components: {
    GanttElastic,
    GanttHeader
  },
  mounted() {
    that = this
  },
  data() {
    return {
      tasks,
      options,
      dynamicStyle: {},
      lastId: 16,
      queryParam: []
    }
  },
  methods: {
    moment,
    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>',
        projectCode:
          '<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'
      })
    },
    tasksUpdate(tasks) {
      this.tasks = tasks
    },
    optionsUpdate(options) {
      this.options = options
    },
    styleUpdate(style) {
      this.dynamicStyle = style
    }
  }
}
</script>

<style scoped>

</style>