<template>
  <div class="app-container">
    <el-row>
      <el-card v-loading="loading1" style="height: 450px">
        <span>工时分析</span>
        <el-date-picker
          v-model="startTime"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 170px;margin:0px 10px"
          type="date"
          placeholder="选择开始加工日期"/>
        <span class="demonstration">~</span>
        <el-date-picker
          v-model="endTime"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 170px;margin:0px 10px"
          type="date"
          placeholder="选择加工完成日期"/>
        <el-button size="small" type="success" icon="el-icon-search" @click="search1()">查询</el-button>
        <div v-if="chart1" id="myChart1" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
      </el-card>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card v-loading="loading2" style="height: 450px">
          <span>工人时间段统计</span>
          <el-select v-model="nameValue" filterable size="small" placeholder="操作者" style="width: 110px">
            <el-option
              v-for="item in name"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-date-picker v-model="startTime2" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
          <el-button size="small" type="success" icon="el-icon-search" @click="search2()">查询</el-button>
          <div v-if="chart2" id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-loading="loading2" style="height: 450px">
          <div v-if="chart3" id="myChart3" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card v-loading="loading4" style="height: 550px">
          <span>不合格数量统计</span>
          <el-date-picker v-model="startTime4" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
          <el-button size="small" type="success" icon="el-icon-search" @click="search4()">查询</el-button>
          <div v-if="chart4" id="myChart4" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card v-loading="loading5" style="height: 550px">
          <span>设备利用率OEE</span>
          <el-date-picker
            v-model="startTime5"
            value-format="yyyy-MM-dd"
            size="small"
            style="width: 160px;margin-top: 10px"
            type="date"
            placeholder="选择日期"/>
          <span class="demonstration">~</span>
          <el-date-picker
            v-model="endTime5"
            value-format="yyyy-MM-dd"
            size="small"
            style="width: 160px"
            type="date"
            placeholder="选择日期"/>
          <el-button size="small" type="success" icon="el-icon-search" @click="search5()">查询</el-button>
          <div v-if="chart5" id="myChart5" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card v-loading="loading6" style="height: 550px">
          <span>设备利用率OEE</span>
          <el-select v-model="opnameValue" filterable size="small" placeholder="工位号" style="width: 110px">
            <el-option
              v-for="item in opname"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <el-date-picker v-model="startTime6" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
          <el-button size="small" type="success" icon="el-icon-search" @click="search6()">查询</el-button>
          <div v-if="chart6" id="myChart6" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { search1, search2, searchPerson, search4, search5, getOPname, search6 } from '@/api/ManufacturingCenter/ManHourAnalysis'
import echarts from 'echarts'

export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      chart1: true,
      res1: [],
      loading1: false, // 图表1
      nameValue: '',
      name: [],
      startTime2: '',
      chart2: true,
      res2: [],
      loading2: false, // 2
      chart3: true, // 3
      startTime4: '',
      chart4: true,
      res4: [],
      loading4: false, // 图表4
      startTime5: '2019-12-01',
      endTime5: '2019-12-21',
      chart5: true,
      res5: [],
      loading5: false, // 图表5
      opnameValue: '',
      opname: [],
      startTime6: '2019',
      chart6: true,
      res6: [],
      loading6: false // 图表6
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.search1()
    this.search2()
    this.search4()
    this.search5()
    this.search6()
  },
  methods: {
    fetchData() {
      this.name = []
      this.opname = []
      searchPerson().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.name.push({
            label: response.data[i].姓名,
            value: response.data[i].姓名
          })
        }
      }).then(() => {
        this.nameValue = this.name[0].value
      })
      getOPname().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.opname.push({
            label: response.data[i].设备号,
            value: response.data[i].设备号
          })
        }
      }).then(() => {
        this.opnameValue = this.opname[0].value
      })
    },
    // 时间段工时
    search1() {
      this.chart1 = false
      this.loading1 = true
      var check
      if (this.startTime && this.endTime) { check = 1 } else { check = 0 }
      search1(0, 0, check, this.startTime, this.endTime).then(response => {
        this.res1 = response.data
        this.loading1 = false
        this.chart1 = true
      }).then(() => {
        var myChart1 = echarts.init(document.getElementById('myChart1'))
        myChart1.clear()
        this.drawLine1(this.res1)
      })
    },
    drawLine1(data) {
      var dataX = []
      var lineData1 = []
      var lineData2 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].姓名)
        lineData1.push(data[i].理论加工时间段)
        lineData2.push(data[i].实际加工时间段)
      }
      var myChart1 = echarts.init(document.getElementById('myChart1'))
      myChart1.clear()
      myChart1.setOption({
        legend: {
          data: ['理论工时', '实际工时']
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '姓名',
          axisLabel: {
            interval: 0,
            rotate: 90,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: 'min',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '理论工时',
            type: 'bar',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData1
          },
          {
            name: '实际工时',
            type: 'bar',
            color: 'rgb(213,58,53)',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData2
          }
        ]
      })
    },
    search2() {
      this.chart2 = false
      this.loading2 = true
      var check, startTime, endtime
      if (this.startTime2) { check = 1 } else { check = 0 }
      if (check === 1) {
        startTime = this.startTime2 + '-01-01'
        endtime = this.startTime2 + '-12-31'
      }
      search2(1, this.nameValue, check, startTime, endtime).then(response => {
        this.res2 = response.data
        this.loading2 = false
        this.chart2 = true
      }).then(() => {
        var myChart2 = echarts.init(document.getElementById('myChart2'))
        var myChart3 = echarts.init(document.getElementById('myChart3'))
        myChart2.clear()
        myChart3.clear()
        this.drawLine2(this.res2)
        this.drawLine3(this.res2)
      })
    },
    drawLine2(data) {
      var dataX = []
      var lineData1 = []
      var lineData2 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].月份)
        lineData1.push(data[i].理论加工时间段)
        lineData2.push(data[i].实际加工时间段)
      }
      var myChart2 = echarts.init(document.getElementById('myChart2'))
      myChart2.clear()
      myChart2.setOption({
        legend: {
          data: ['理论工时', '实际工时']
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '月份',
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: 'min',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '理论工时',
            type: 'bar',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData1
          },
          {
            name: '实际工时',
            type: 'bar',
            color: 'rgb(213,58,53)',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData2
          }
        ]
      })
    },
    drawLine3(data) {
      var dataX = []
      var lineData1 = []
      var lineData2 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].月份)
        lineData1.push(data[i].理论加工时间段)
        lineData2.push(data[i].实际加工时间段)
      }
      var myChart3 = echarts.init(document.getElementById('myChart3'))
      myChart3.clear()
      myChart3.setOption({
        legend: {
          data: ['理论工时', '实际工时']
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '月份',
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: 'min',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '理论工时',
            data: lineData1,
            type: 'line'
          },
          {
            name: '实际工时',
            data: lineData2,
            type: 'line'
          }
        ]
      })
    },
    search4() {
      this.chart4 = false
      this.loading4 = true
      var check, startTime, endtime
      if (this.startTime4) { check = 1 } else { check = 0 }
      if (check === 1) {
        startTime = this.startTime4 + '-01-01'
        endtime = this.startTime4 + '-12-31'
      }
      search4(check, startTime, endtime).then(response => {
        this.res4 = response.data
        this.loading4 = false
        this.chart4 = true
      }).then(() => {
        var myChart4 = echarts.init(document.getElementById('myChart4'))
        myChart4.clear()
        this.drawLine4(this.res4)
      })
    },
    drawLine4(data) {
      var dataX = []
      var lineData1 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].月份)
        lineData1.push(data[i].不合格总数量)
      }
      var myChart4 = echarts.init(document.getElementById('myChart4'))
      myChart4.clear()
      myChart4.setOption({
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '月份',
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '不合格数量',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '总数量',
            type: 'line',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData1
          }
        ]
      })
    },
    search5() {
      this.chart5 = false
      this.loading5 = true
      search5(this.startTime5, this.endTime5).then(response => {
        this.res5 = response.data
        this.loading5 = false
        this.chart5 = true
      }).then(() => {
        var myChart5 = echarts.init(document.getElementById('myChart5'))
        myChart5.clear()
        this.drawLine5(this.res5)
      })
    },
    drawLine5(data) {
      var dataX = []
      var lineData1 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].工位号)
        lineData1.push(data[i].持续时间)
      }
      var myChart5 = echarts.init(document.getElementById('myChart5'))
      myChart5.clear()
      myChart5.setOption({
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '工位号',
          axisLabel: {
            interval: 0,
            rotate: 90,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '利用率(%)',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '工位号',
            type: 'bar',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData1
          }
        ]
      })
    },
    search6() {
      this.chart6 = false
      this.loading6 = true
      var check, startTime, endtime
      if (this.startTime6) { check = 1 } else { check = 0 }
      if (check === 1) {
        startTime = this.startTime6 + '-01-01'
        endtime = this.startTime6 + '-12-31'
      }
      search6(this.opnameValue, check, startTime, endtime).then(response => {
        this.res6 = response.data
        this.loading6 = false
        this.chart6 = true
      }).then(() => {
        var myChart6 = echarts.init(document.getElementById('myChart6'))
        myChart6.clear()
        this.drawLine6(this.res6)
      })
    },
    drawLine6(data) {
      var dataX = []
      var lineData1 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].月份)
        lineData1.push(data[i].持续时间)
      }
      var myChart6 = echarts.init(document.getElementById('myChart6'))
      myChart6.clear()
      myChart6.setOption({
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '月份',
          axisLabel: {
            interval: 0,
            rotate: 0,
            margin: 10
          },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '利用率(%)',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '工位号',
            type: 'bar',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData1
          }
        ]
      })
    }
  }
}
</script>

<style>

</style>
