mts / MTS-UI · Files

<template>
  <div>
    <div class="table-page-search-wrapper">
      <!-- <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="6" :sm="24">
            <a-form-item label="项目名称">
              <a-select show-search
                        placeholder="请输入项目名称"
                        option-filter-prop="children"
                        :filter-option="filterOption"
                        @change="handleChange"
                        v-model="queryParam.projectName">
                <a-select-option v-for="item in projectNameList" :key="item" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form> -->
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="6" :sm="8">
                  <a-form-item label="工作令号">
                    <!--  <a-input placeholder="请输入工作令号" v-model="queryParam.workNo"></a-input>-->
                    <j-popup  v-model="queryParam.workNo" code="find_projectc" field="field0056" orgFields="field0056,field0047" destFields="field0056,field0047" :trigger-change="true" @callback="findCarNumberClick" :multi="false"/>
                  </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
                <a-button type="primary" @click="handleChange()">查询</a-button>
                <a-button style="margin-left: 8px" @click="inNull()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{field0047}}</p1>
    <p></p>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{listSize}}</p1>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{finishOnTimeQuantity}}</p1>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{deferredCompletionQuantity}}</p1>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{inProductionQuantity}}</p1>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{completeSchedule}}</p1>
    <p1 style="ont-size:200px;font-weight: bold;font-size: 20px; vertical-align: middle; font-weight: 400; line-height: 35px; padding-left: 22px; letter-spacing: 1px;">{{ontimeRate}}</p1>

      <gantt-elastic
      :options="options"
      :tasks="tasks"
      @tasks-changed="tasksUpdate"
      @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate"
      :dynamic-style="dynamicStyle"
    >
      <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 { projectName, queryTask } from '../../api/schedulerApi'
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 options = {
  taskMapping: {
    progress: "percent"
  },
  maxRows: 100,
  maxHeight: 500, 
  title: {
    label:'',
    html: false
  },
  row: {
    height: 24
  },
  calendar: {
    hour: {
      display: false
    }
  },
  chart: {
    progress: {
      bar: false
    },
    expander: {
      type: 'chart',
      display: true, //*
      displayIfTaskListHidden: true, //*
      offset: 4, //*
      size: 18
    },
    text: {
      offset: 4,
      xPadding: 10,
      display: true
    },
    grid: {
      horizontal: {
        gap: 6
      }
    }
  },
  taskList: {
    expander: {
      straight: false
    },
    columns: [
      {
        id: 1,
        label: "ID",
        value: "id",
        width: 50
      },
      {
        id: 2,
        label: "项目名称",
        value: "projectName",
        width: 150,
        expander: true
      },
      // {
      //   id: 3,
      //   label: "项目编码",
      //   value: "projectCode",
      //   width: 130
      // },
      {
        id: 4,
        label: "生产令号",
        value: "orderNo",
        width: 100,
        expander: false
      },
      {
        id: 5,
        label: "部件号",
        value: "partNo",
        width: 100
      },
      {
        id: 5,
        label: "计划开始时间",
        value: task => dayjs(task.completionTime).format("YYYY-MM-DD"),
        width: 100
      },
      {
        id: 6,
        label: "计划完成时间",
        value: task => dayjs(task.actualCompletionTime).format("YYYY-MM-DD"),
        width: 100
      },
      {
        id: 7,
        label: "图号",
        value: "drawingNo",
        width: 120,
        // expander: true
      },
      {
        id: 8,
        label: "名称",
        value: "name",
        width: 120
      },
      {
        id: 9,
        label: "数量",
        value: "qty",
        width: 60
      },
      {
        id: 10,
        label: "状态",
        value: (task) => task.status==0 ? "生产中" : task.status == 1 ? "按时完成":"超时完成",
        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:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
};


export default {
  name: 'progressRate',
  components: {
    GanttElastic,
    GanttHeader
  },
  mounted() {
    that = this
  },
  data() {
    return {
      tasks: [],       
      field0047:'进度看板',
      options,
      /** 一共多少项 */
      listSize:"",
      /** 按时完成多少项 */
      finishOnTimeQuantity:"",
      /** 延期完成多少项 */
      deferredCompletionQuantity:"",
      /** 生产中多少项 */
      inProductionQuantity:"",
      /** 完成进度 */
      completeSchedule:"",
      /** 及时率 */
      ontimeRate:"",

      dynamicStyle: {
        'task-list-header-label': {
          'font-weight': 'bold',
        },
      },
      lastId: 16,
      projectNameList: {},
      queryParam: []
    }
  },
  created() {
    this.getProjectNameList()

  },
  methods: {
    findCarNumberClick(row){  
      this.field0047=row.field0047+"  进度看板"; 
      this.queryParam['workNo'] =row.field0056;
    },
    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,num) {
      if(num == 2) {
        this.tasks = tasks
      } else {
        return
      }
    },
    optionsUpdate(options,num) {
      if(num == 2) {
        this.options = options
      } else {
        return
      }
    },
    styleUpdate(style) {
      this.dynamicStyle = style
    },
    getProjectNameList() {
      projectName().then((res) => {
        this.projectNameList = res
      })
    },
    handleChange() { 
      this.getTask(this.queryParam.workNo)
    },
    inNull(){
          this.field0047 = '进度看板',
          this.tasks = [],
          /** 一共多少项 */
          this.listSize = null,
          /** 按时完成多少项 */
          this.finishOnTimeQuantity = null,
          /** 延期完成多少项 */
          this.deferredCompletionQuantity = null,
          /** 生产中多少项 */
          this.inProductionQuantity = null,
          /** 完成进度 */
          this.completeSchedule = null,
          /** 及时率 */
          this.ontimeRate = null
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    getTask(projectName) {
      if (projectName == null || projectName === "") {
        return;
      }
      if( this.tasks.length > 0 && projectName == this.tasks[1].orderNo){
        this.$message.info(this.queryParam.workNo+": 查询完成 。")
        return;
      }else{
        this.$message.info(this.queryParam.workNo+": 查询中....")
      }
      this.tasks = []
      let params = {
        "projectName": projectName
      };
      queryTask(params).then((res)=> {
        console.log(res)
        if (res.success) {
          let data = res.result;
          this.tasks = data.progressRateList
          /** 一共多少项 */
          this.listSize = "   总项数: " + data.listSize,
          /** 按时完成多少项 */
          this.finishOnTimeQuantity = "   按时完成项数: " + data.finishOnTimeQuantity,
          /** 延期完成多少项 */
          this.deferredCompletionQuantity = "   延期完成项数: " + data.deferredCompletionQuantity,
          /** 生产中多少项 */
          this.inProductionQuantity = "   生产中项数: " + data.inProductionQuantity,
          /** 完成进度 */
          this.completeSchedule = "   完成进度: " + data.completeSchedule,
          /** 及时率 */
          this.ontimeRate ="    及时率: "+ data.ontimeRate
        }
      })
    },
  }
}
</script>

<style scoped>

</style>