<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="stationNumberValue" placeholder="请选择工位号" size="small" style="width: 150px">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">工位名称：</span>
        <el-input v-model="stationName" disabled style="width:150px;" placeholder="" size="small"/>
        <span style="margin-left: 10px">拧紧位置：</span>
        <el-select v-model="workPositon" placeholder="请选择拧紧位置" size="small" style="width: 150px">
          <el-option
            v-for="item in workPositionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span class="spanDatetime">查询时间</span>
        <el-date-picker
          v-model="monthTimeData"
          size="small"
          type="month"
          align="center"
          value-format="yyyy-MM-dd"
          format="yyyy-MM"
          placeholder="选择月"/>
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchOrder()">查询</el-button>
      </div>
      <!-- 图表（月） -->
      <div class="data-box" style="left:15px; top:20px;">
        <span class="borderLeft1 boxBorder"/>
        <span class="borderLeft2 boxBorder"/>
        <span class="borderRight1 boxBorder"/>
        <span class="borderRight2 boxBorder"/>
        <div style="width: 100%; height: 30px;">
          <div class="indicatorText">
            月拧紧趋势图
          </div>
        </div>
        <div id="monthWorkTrendCharts" style="height: 200px; width: 100%;"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      stationNumber: [],
      stationNumberValue: '',
      stationName: '',
      orderNumber: [],
      orderNumberValue: '',
      workPositionList: [],
      engineTypeNumber: '',
      title: '',
      workPositon: '', // 拧紧位置
      monthData: [], // 月数据
      monthTimeData: [], // 月时间
      monthFrom: {
        xAxis: []
      }
    }
  },
  watch: {
    stationNumberValue() {
      this.getWorkPositionList()
    }
  },
  created() {
    this.getStationNumber()
  },
  methods: {
    // 获取拧紧位置
    getWorkPositionList() {
      this.workPositon = ''
      this.workPositionList = []
      var param = []
      param[0] = ['工位号', this.stationNumberValue]
      var Data = this.CreateData('11', 'MES_基本变量_原始数据_拧紧位置_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.workPositionList.push({
            label: response.data[i].测量名称,
            value: response.data[i].TagID
          })
        }
      })
    },
    // 初始化获取订单号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data.length) {
            this.stationNumberValue = response.data[0].工位号
            this.stationName = response.data[0].工序名称
          }
          this.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号,
            labelName: response.data[i].工序名称
          })
        }
      })
    },
    // 查询相应趋势图数据
    searchOrder() {
      var param = []
      param[0] = ['TagID', this.workPositon]
      param[1] = ['月份', this.monthTimeData]
      var Data = this.CreateData('11', '质量数据趋势_月_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0 && response.data[0].result !== '0') {
          this.monthData = response.data
          this.monthFrom.xAxis = []
          for (const item in response.data) {
            this.monthFrom.xAxis.push(item.平均值)
          }
          // 渲染echarts图表
          let mySpinChart1 = document.getElementById('monthWorkTrendCharts')
          mySpinChart1 = echarts.init(mySpinChart1)
          const spinOption = {
            // backgroundColor: '#1b2735',
            tooltip: {
              trigger: 'axis'
            },
            // legend: {
            //   data: spinCharts.names,
            //   textStyle: {
            //     fontSize: 12,
            //     color: 'rgb(0,253,255,0.6)'
            //   },
            //   right: '4%'
            // },
            grid: {
              top: '6%',
              left: '2%',
              right: '50px',
              bottom: '5%',
              containLabel: true,
              show: false
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.monthFrom.xAxis,
              axisLabel: {
                textStyle: {
                  color: 'rgb(0,253,255,0.6)'
                },
                interval: 0, // 使x轴文字显示全
                formatter: function(params) {
                  return params.split(' ')[0]
                }
              }
            },
            yAxis: {
              name: 'aabb',
              type: 'value',
              // scale: true,
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: 'rgb(0,253,255,0.6)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgb(23,255,243,0.3)'
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgb(0,253,255,0.6)'
                }
              }
            }
          }
          spinOption && mySpinChart1.setOption(spinOption)
        } else {
          this.$message({
            type: 'warning',
            message: '暂无数据'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .topCard{
    margin: 5px;
  }
  .topDiv{
    margin-bottom: 10px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    position: absolute;
    right: 6px;
    top: 80px;
    width: 300px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  /deep/.el-input.is-disabled .el-input__inner{
    color: #606266!important;
  }
  /deep/.el-input.is-disabled .el-input__inner{
    background-color: white!important;
  }
  .data-box {
    /*position: absolute;*/
    width: 550px;
    height: 230px;
    -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
    -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
    box-shadow: inset 0 0 30px rgb(24, 78, 135);
  }

  .boxBorder {
    position: absolute;
    padding: 10px;
    border-style: solid;
    border-color: rgb(71, 209, 226);
  }

  .borderLeft1 {
    border-width: 2px 0 0 2px;
    top: -2px;
    left: -2px;
  }

  .borderLeft2 {
    border-width: 2px 2px 0 0;
    top: -2px;
    right: -2px;
  }

  .borderRight1 {
    border-width: 0 0 2px 2px;
    bottom: -2px;
    left: -2px;
  }

  .borderRight2 {
    border-width: 0 2px 2px 0;
    bottom: -2px;
    right: -2px;
  }

  .indicatorText {
    margin: 8px 0 0 20px;
    float: left;
    font-size: 18px
  }
</style>

