生产进度看板

hh
1 parent 32c92352
Showing 3 changed files with 282 additions and 12 deletions
src/api/schedulerApi.js
src/views/scheduler/progressRate.vue
src/views/scheduler/progressRateCopy.vue
 import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
 import Vue from 'vue'
-import {UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
+import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
  
 //生产计划主表
-export const projectName = (params)=>getAction("/scheduler/schedulerHeader/getProjectName", params);
-export const addHeader = (params)=>postAction("/scheduler/schedulerHeader/add",params);
-export const editHeader = (params)=>putAction("/scheduler/schedulerHeader/edit",params);
+export const projectName = params => getAction('/scheduler/schedulerHeader/getProjectName', params)
+export const addHeader = params => postAction('/scheduler/schedulerHeader/add', params)
+export const editHeader = params => putAction('/scheduler/schedulerHeader/edit', params)
  
 //生产计划明细
-export const addDetail = (params) => postAction("/scheduler/schedulerDetail/add", params);
+export const addDetail = params => postAction('/scheduler/schedulerDetail/add', params)
 //生产计划明细
-export const addFromDetail = (params) => postAction("/scheduler/schedulerDetail/addForm", params);
-export const editDetail = (params) => putAction("/scheduler/schedulerDetail/edit", params);
-export const queryDetailList = (params) => getAction("/scheduler/schedulerDetail/queryDetailList", params)
+export const addFromDetail = params => postAction('/scheduler/schedulerDetail/addForm', params)
+export const editDetail = params => putAction('/scheduler/schedulerDetail/edit', params)
+export const queryDetailList = params => getAction('/scheduler/schedulerDetail/queryDetailList', params)
 //生产交易表
-export const addTransaction = (params) => postAction("/scheduler/schedulerTransaction/add", params);
-export const editTransaction = (params) => putAction("/scheduler/schedulerTransaction/edit", params);
+export const addTransaction = params => postAction('/scheduler/schedulerTransaction/add', params)
+export const editTransaction = params => putAction('/scheduler/schedulerTransaction/edit', params)
  
 //进度看板
-export const queryTask = (params) => getAction("scheduler/progressRate/query", params);
 \ No newline at end of file
+export const queryTask = params => getAction('scheduler/progressRate/query', params)
+
+//工程看板
+export const getKanbanInfo = params => getAction('oa/projectc/getKanbanInfo', params)
@@ -127,7 +127,7 @@ let options = {
         label: "生产令号",
         value: "orderNo",
         width: 100,
-        expander: true
+        expander: false
       },
       {
         id: 5,
+<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="getTask(queryParam.keyword)">查询</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'
+import { projectName, getKanbanInfo } from '../../api/schedulerApi'
+
+
+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": "1",
+    "isOnTime": "否",
+    "start": 1601308800000,
+    "taskPoint": "测试项目",
+    "type": "task",
+    "style": {
+      "base": {
+        "fill": "#BABABA",
+        "stroke": "#BABABA"
+      }
+    }
+  },
+  {
+    "duration": 15180759000,
+    "end": 1616575959000,
+    "id": "2",
+    "isOnTime": false,
+    "opinion": "",
+    "parentId": "HHCS-L-2020-0123",
+    "principal": "",
+    "responsible": "",
+    "start": 1601395200000,
+    "taskPoint": "测试项目",
+    "type": "task",
+    "style": {
+      "base": {
+        "fill": "#1EBC61",
+        "stroke": "#0EAC51"
+      }
+    }
+  }
+];
+let options = {
+  taskMapping: {
+    progress: "percent"
+  },
+  maxRows: 100,
+  maxHeight: 500,
+  title: {
+    label: "生产进度看板",
+    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
+    },
+    getTask(workno) {
+      if (workno == null || workno === "") {
+        return;
+      }
+      let params = {
+        "workno": workno
+      };
+      getKanbanInfo(params).then((res)=> {
+        console.log(res)
+        if (res.success) {
+          this.tasks = res.result
+        }else{
+          this.$message.error("请输入正确的工作令!");
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file