<template>
    <el-card style="height: 958px">
        <span>上线时间：</span>
        <el-date-picker v-model="deliveryDate" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width:250px"/>
        <el-button :disabled="loading" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTable()">查询</el-button>
        <el-button :disabled="loading" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTable1()">导出</el-button>
        <div style="margin-top: 10px">
            <el-col :span="14">
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  :header-cell-style="{background:'#F5F5F5'}"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="740"
                  border
                  highlight-current-row
                  stripe>
                    <el-table-column
                      type="index"
                      width="50">
                    </el-table-column>
                    <el-table-column align="center" label="工位号" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.opName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="工位名称" min-width="60">
                        <template slot-scope="scope">
                            {{ scope.row.工位名称 }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="工件号" min-width="60">
                        <template slot-scope="scope">
                            {{ scope.row.partId }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="上线时间" min-width="60">
                        <template slot-scope="scope">
                            {{ scope.row.scanTime }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 10px;">
                    <el-pagination
                      v-if="!loading"
                      :current-page="PageCurrent"
                      :page-sizes="[50, 70, 100, 150]"
                      :page-size="pageSize"
                      :total="total"
                      layout="total, sizes, prev, pager, next, jumper"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"/>
                </div>
            </el-col>
            <el-col :span="10">
                <el-row>
                    <div style="height: 370px;border: 1px solid #c4c4c4">
                        <div id="myChart21" style="width: 100%;height: 350px;margin-top: 5px"/>
                    </div>
                </el-row>
                <el-row>
                    <div style="height: 370px;border: 1px solid #c4c4c4">
                        <div id="myChart22" style="width: 100%;height: 350px;margin-top: 5px"/>
                    </div>
                </el-row>
            </el-col>
        </div>
    </el-card>
</template>
<script>
import { getNowTime2 } from '@/utils/tool'

export default {
  data() {
    return {
      daliyOutPutData_X: [],
      daliyOutPutData_Y: [],
      daliyOutPutData_Average: [],
      daliyOutPutData1_X: [],
      daliyOutPutData1_Y: [],
      daliyOutPutData1_Average: [],
      deliveryDate: [],
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      PageCurrent: 1 // 后台获取页
    }
  },
  props: ['opname'],
  computed: {},
  mounted() {
    this.searchTable()
  },
  beforeDestroy() {
  },
  created() {
    const start = new Date()
    const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15)
    this.deliveryDate[1] = getNowTime2(start)
    this.deliveryDate[0] = getNowTime2(end)
  },
  watch: {
  },
  methods: {
    searchTable() {
      if (!this.deliveryDate) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      param[2] = ['PageCurrent', this.PageCurrent]
      param[3] = ['PageSize', this.pageSize]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', 'LG_临工看板_产量管理_上线信息查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data.result
          this.total = parseInt(response.data.output[0].ItemCount)
          this.searchdailyOutPutTable()
          this.searchdailyOutPutTable1()
        }
        this.loading = false
      })
    },
    searchTable1() {
      if (!this.deliveryDate) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.tableData.length === 0) {
        this.$message.warning('请查询要导出的数据')
        return
      }
      var param = []
      const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      var Data = this.CreateData('2003', 'LG_临工看板_产量管理_上线信息导出', param)
      this.exportExcel_NPOI(Data, blob)
    },
    searchdailyOutPutTable() {
      var param = []
      this.daliyOutPutData_X = []
      this.daliyOutPutData_Y = []
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      param[2] = ['opName', 'OP70']
      param[3] = ['type', '1']
      var Data = this.CreateData('11', 'LG_临工看板_产量管理_产出曲线查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.daliyOutPutData_X.push(info.date.substring(info.date.length - 5, info.date.length))
            this.daliyOutPutData_Y.push(info.num)
          }
          let num = 0
          this.daliyOutPutData_Y.forEach(value => {
            num += parseInt(value)
          })
          this.daliyOutPutData_Average = num / this.daliyOutPutData_Y.length
          this.drawLine51()
        }
      })
    },
    // 线产量图
    drawLine51() {
      this.$echarts.dispose(document.getElementById('myChart21'))
      if (this.daliyOutPutData_X.length === 0) return
      // 基于准备好的dom，初始化echarts实例
      const myChart21 = this.$echarts.init(document.getElementById('myChart21'))
      // 绘制图表
      myChart21.setOption(
        {
          title: {
            text: '上线数量(台)'
          },
          grid: [
            {
              left: '5%',
              top: '10%',
              right: '5%',
              bottom: '15%'
            }
          ],
          tooltip: {
          },
          xAxis: {
            type: 'category',
            data: this.daliyOutPutData_X,
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF',
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            style: '#409EFF',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF'
            }
          },
          series: [
            {
              data: this.daliyOutPutData_Y,
              type: 'bar',
              color: '#009797',
              label: {
                show: true
              },
              markLine: {
                symbol: 'none',
                data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average), name: '平均值' }],
                lineStyle: {
                  color: '#ffc823'
                },
                label: {
                  position: 'end',
                  color: '#409EFF',
                  distance: -80
                }
              }
            }
          ]

        }
      )
    },
    searchdailyOutPutTable1() {
      var param = []
      this.daliyOutPutData1_X = []
      this.daliyOutPutData1_Y = []
      param[0] = ['开始时间', this.deliveryDate[0]]
      param[1] = ['结束时间', this.deliveryDate[1]]
      param[2] = ['opName', 'OP150']
      param[3] = ['type', '2']
      var Data = this.CreateData('11', 'LG_临工看板_产量管理_产出曲线查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.daliyOutPutData1_X.push(info.date.substring(info.date.length - 5, info.date.length))
            this.daliyOutPutData1_Y.push(info.num)
          }
          let num = 0
          this.daliyOutPutData1_Y.forEach(value => {
            num += parseInt(value)
          })
          this.daliyOutPutData_Average1 = num / this.daliyOutPutData1_Y.length
          this.drawLine52()
        }
      })
    },
    // 下线产量图
    drawLine52() {
      // 基于准备好的dom，初始化echarts实例
      const myChart22 = this.$echarts.init(document.getElementById('myChart22'))
      // 绘制图表
      myChart22.setOption(
        {
          title: {
            text: '下线数量(台)'
          },
          grid: [
            {
              left: '5%',
              top: '10%',
              right: '5%',
              bottom: '15%'
            }
          ],
          tooltip: {
          },
          xAxis: {
            type: 'category',
            data: this.daliyOutPutData1_X,
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF',
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            style: '#409EFF',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF'
            }
          },
          series: [
            {
              data: this.daliyOutPutData1_Y,
              type: 'bar',
              color: '#009797',
              label: {
                show: true
              },
              markLine: {
                symbol: 'none',
                data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average1), name: '平均值' }],
                lineStyle: {
                  color: '#ffc823'
                },
                label: {
                  position: 'end',
                  color: '#409EFF',
                  distance: -80
                }
              }
            }
          ]

        }
      )
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.searchTable()
    }
  }
}
</script>
<style>
</style>

