JY1.0/src/views/ManufacturingCenter/OwnTimeStatistics/index.vue

<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span>项目名称:</span>
        <el-select v-model="projectValue" size="small" filterable clearable placeholder="项目名称">
          <el-option
            v-for="item in project"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>开始日期:</span>
        <el-date-picker
          v-model="date1"
          size="small"
          type="date"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          placeholder="选择日期"/>
        <span>结束日期:</span>
        <el-date-picker
          v-model="date2"
          size="small"
          type="date"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          placeholder="选择日期"/>
        <el-radio-group v-model="radio" size="small" style="margin: 10px;">
          <el-radio :label="1">天</el-radio>
          <el-radio :label="2">周</el-radio>
          <el-radio :label="3">月</el-radio>
        </el-radio-group>
        <el-button type="success" icon="el-icon-search" style="margin: 10px;" size="small" @click="search">查询</el-button>
      </el-row>
    </el-card>
    <el-card v-loading="loading">
      <div id="myChart" :style="{width: '100%', height: '470px', margin: 'auto'}"/>
    </el-card>
  </div>
</template>

<script>
import { initProject, searchData } from '@/api/ManufacturingCenter/OwnTimeStatistics'
import echarts from 'echarts'

export default {
  data() {
    return {
      loading: false,
      projectValue: '',
      project: [],
      date1: '',
      date2: '',
      radio: 1,
      check1: 0,
      dataX: [],
      series: [],
      delayOkTime: [],
      planOkTime: [],
      preOkTime: [],
      noOkTime: [],
      totalTime: [],
      totalAblity: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.project = []
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.project.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
    },
    search() {
      this.loading = true
      var myChart = echarts.init(document.getElementById('myChart'))
      myChart.clear()
      if (this.projectValue === '' || this.projectValue === null) {
        this.check1 = 0
      } else {
        this.check1 = 1
      }
      if (this.date1 === '' || this.date1 === null || this.date2 === '' || this.date2 === null) {
        this.check2 = 0
        this.date1 = ''
        this.date2 = ''
      } else {
        this.check2 = 1
      }
      searchData(this.check1, this.projectValue, this.check2, this.date1, this.date2, this.radio).then(response => {
        console.log(response.data)
        if (response.data.length !== 0 && !response.data[0].hasOwnProperty('result')) {
          this.drawLine(response.data)
        } else {
          this.$message.warning('没有数据或数据量太大，请重新选择查询条件')
          this.loading = false
        }
      })
    },
    drawLine(data) {
      this.dataX = []
      this.delayOkTime = []
      this.planOkTime = []
      this.preOkTime = []
      this.noOkTime = []
      this.totalTime = []
      this.totalAblity = []
      this.series = []
      for (let i = 0; i < data.length; i++) {
        this.dataX.push(data[i].计划日期)
        this.delayOkTime.push(data[i].拖延完成工时)
        this.planOkTime.push(data[i].按计划完成工时)
        this.preOkTime.push(data[i].提前完成工时)
        this.noOkTime.push(data[i].未完成工时)
        this.totalTime.push(data[i].计划总工时)
        this.totalAblity.push(data[i].设备总能力)
      }
      var myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['提前完成工时', '按计划完成工时', '未完成工时', '拖延完成工时', '设备总能力']
        },
        dataZoom: { // 实现缩放功能
          show: true,
          realtime: true,
          start: 0,
          end: 100
        },
        xAxis: {
          type: 'category',
          name: '计划日期',
          data: this.dataX,
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '工时',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '提前完成工时',
            type: 'bar',
            // stack: '工时',
            data: this.preOkTime
          },
          {
            name: '按计划完成工时',
            type: 'bar',
            data: this.planOkTime
          },
          {
            name: '未完成工时',
            type: 'bar',
            data: this.noOkTime
          },
          {
            name: '拖延完成工时',
            type: 'bar',
            data: this.delayOkTime
          },
          {
            name: '设备总能力',
            type: 'bar',
            data: this.totalAblity
          }
        ]
      })
      this.loading = false
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  .el-date-editor{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
</style>