<template>
  <section>
    <t-header index='1'></t-header>
    <div class="content clearfix">
      <div class="con1">
        <div class="yard-wrap">
          <div class="yard_group clearfix">
            <div class="yard_group_ul yard_group_ul_1">
              <div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
                <div class="yard_group_p" @click="getInfo1(e)">
                  <p class="fontselect">{{e.struct_code}}</p>
                  <img src="../assets/images/tip.png" />
                </div>
                <!-- <div v-show="code1 === e.struct_code" class="locate-wrap clearfix"  :style="e.coordinate"> -->
                <div v-show="code1 === e.struct_code" class="locate-wrap clearfix">
                  <div class="foldcricle1 position_1_1"></div>
                  <div class="foldline1 position_1_1"></div>
                  <div class="foldline2 position_1_1"></div>
                  <div class="foldcricle2 position_1_1"></div>
                  <!-- <div class="foldline" :class="e.position_1_1"></div> -->
                  <div class="clearfix locate-content" :style="e.coordinate">
                    <div class="tan_pline">
                      <p class="tan_p">货位号：{{e.struct_code}}</p>
                      <p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">物料：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">重量：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">批次：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
                    </div>
                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="corridor_2">&nbsp;</div>
          <div class="yard_group clearfix">
            <div class="yard_group_ul yard_group_ul_2">
              <div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
                <div class="yard_group_p" @click="getInfo2(e)">
                  <p class="fontselect">{{e.struct_code}}</p>
                  <img src="../assets/images/tip.png" />
                </div>
                <div v-show="code2 === e.struct_code" class="locate-wrap clearfix"  :style="e.coordinate">
                  <div class="locate-content">
                    <div class="tan_pline">
                      <p class="tan_p">货位号：{{e.struct_code}}</p>
                      <p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">物料：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">重量：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">批次：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
                    </div>
                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="corridor_2">&nbsp;</div>
          <div class="yard_group clearfix">
            <div class="yard_group_ul yard_group_ul_3">
              <div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="['blue', 'green', 'gray', 'yellow', 'orange'][Number(e.struct_type) - 1]">
                <div class="yard_group_p" @click="getInfo3(e)">
                  <p class="fontselect">{{e.struct_code}}</p>
                  <img src="../assets/images/tip.png" />
                </div>
                <div v-show="code3 === e.struct_code" class="locate-wrap clearfix"  :style="e.coordinate">
                  <div class="locate-content">
                    <div class="tan_pline">
                      <p class="tan_p">货位号：{{e.struct_code}}</p>
                      <p class="tan_p">料盅号：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">物料：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">重量：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">批次：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">静置时间：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">出入任务类型：{{e.storagevehicle_code}}</p>
                      <p class="tan_p">任务号：{{e.storagevehicle_code}}</p>
                    </div>
                    <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tag_block">
          <div class="tag_type">
            <div class="type_color blue"></div>
            <div class="tag_text">静置中</div>
          </div>
          <div class="tag_type">
            <div class="type_color green"></div>
            <div class="tag_text">运行</div>
          </div>
          <div class="tag_type">
            <div class="type_color gray"></div>
            <div class="tag_text">禁用</div>
          </div>
          <div class="tag_type">
            <div class="type_color yellow"></div>
            <div class="tag_text">静置完成</div>
          </div>
          <div class="tag_type">
            <div class="type_color orange"></div>
            <div class="tag_text">强制完成</div>
          </div>
        </div>
      </div>
      <div class="con-b con2">
        <!-- <div id="echarts1" style="width: 800px;height:500px;"></div>
        <div id="echarts3" style="width: 600px;height:450px;"></div> -->
        <div id="echarts1" style="width: 100%;height:108%;"></div>
        <div id="echarts3" style="width: 100%;height:108%;"></div>
        <div class="title">物料库存</div>
      </div>
      <div class="con-b con3">
        <div class="block_h2">
          <h2>生产任务</h2>
        </div>
        <div class="list_scroll_title">
          <span>货位</span><span>物料编码</span><span>物料名称</span><span>重量</span><span>已静置时间</span><span>当前状态</span>
          <!-- <span>工序</span>
          <span>设备</span>
          <span>物料号</span>
          <span>生产物料</span>
          <span>厂家</span>
          <span>配方代码</span>
          <span>计划量</span>
          <span>生产量</span>
          <span>班次类型</span>
          <span>生产状态</span> -->
        </div>
        <vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
          <ul class="content-block-scroll-ul">
            <li v-for="(e, i) in array1" :key="i">
              <span>{{i+1}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span><span>{{e.device_code}}</span>
              <!-- <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span>
              <span>{{e.device_code}}</span> -->
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
export default {
  name: 'StorageMonitor',
  components: {
    THeader
  },
  data () {
    return {
      array1: [
        {device_code: '001'},
        {device_code: '002'},
        {device_code: '003'},
        {device_code: '004'},
        {device_code: '005'},
        {device_code: '006'}
      ],
      group01: [],
      group02: [],
      group03: [],
      // group01: [
      //   {struct_code: '01', struct_type: '1'},
      //   {struct_code: '02', struct_type: '2'},
      //   {struct_code: '03', struct_type: '3'},
      //   {struct_code: '04', struct_type: '2'},
      //   {struct_code: '05', struct_type: '3'},
      //   {struct_code: '06', struct_type: '2'},
      //   {struct_code: '07', struct_type: '3'},
      //   {struct_code: '08', struct_type: '2'},
      //   {struct_code: '09', struct_type: '3'},
      //   {struct_code: '10', struct_type: '2'},
      //   {struct_code: '11', struct_type: '3'},
      //   {struct_code: '12', struct_type: '2'},
      //   {struct_code: '13', struct_type: '3'},
      //   {struct_code: '14', struct_type: '2'},
      //   {struct_code: '15', struct_type: '2'},
      //   {struct_code: '16', struct_type: '3'},
      //   {struct_code: '17', struct_type: '2'},
      //   {struct_code: '18', struct_type: '3'},
      //   {struct_code: '19', struct_type: '2'},
      //   {struct_code: '20', struct_type: '3'},
      //   {struct_code: '21', struct_type: '2'},
      // ],
      // group02: [
      //   {struct_code: '01', struct_type: '1'}
      // ],
      // group03: [
      //   {struct_code: '01', struct_type: '1'},
      //   {struct_code: '02', struct_type: '2'}
      // ],
      code1: '',
      code2: '',
      code3: '',
      showNum1: '',
      showNum2: ''
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.4,
        limitMoveNum: 6
      }
    }
  },
  mounted () {
    // 编号排布
    // 12排
    let pai1 = []
    let pai2 = []
    let pai12 = []
    for (let i = 1; i <= 20; i++) {
      // if (i <= 10) {
      //   pai1.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
      //   pai2.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
      // } else {
      //   pai1.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
      //   pai2.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
      // }
      if (i <= 10) {
        pai1.push({struct_code: i * 2 - 1, coordinate: {'left': '0rem', 'top': '0rem'}, show: 0})
        pai2.push({struct_code: i * 2, coordinate: {'left': '0rem', 'top': '0rem'}, show: 0})
      } else {
        pai1.push({struct_code: i * 2 - 1, coordinate: {'right': '0rem', 'top': '0rem'}, show: 0})
        pai2.push({struct_code: i * 2, coordinate: {'right': '0rem', 'top': '.0rem'}, show: 0})
      }
    }
    pai12 = pai1.concat(pai2)
    this.group01 = pai12
    // 34排
    let pai3 = []
    let pai4 = []
    let pai34 = []
    for (let i = 21; i <= 38; i++) {
      if (i <= 30) {
        pai3.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
        pai4.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'top': '.4rem'}, show: 0})
      } else {
        pai3.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'top': '.4rem'}, show: 0})
        pai4.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
      }
    }
    pai34 = pai3.concat(pai4)
    this.group02 = pai34
    // 56排
    let pai5 = []
    let pai6 = []
    let pai56 = []
    for (let i = 1; i <= 8; i++) {
      if (i <= 4) {
        pai5.push({struct_code: i * 2 - 1, coordinate: {'left': '1.02rem', 'bottom': '.4rem'}, show: 0})
        pai6.push({struct_code: i * 2, coordinate: {'left': '1.02rem', 'bottom': '.4rem'}, show: 0})
      } else {
        pai5.push({struct_code: i * 2 - 1, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
        pai6.push({struct_code: i * 2, coordinate: {'right': '1.02rem', 'bottom': '.4rem'}, show: 0})
      }
    }
    pai56 = pai5.concat(pai6)
    this.group03 = pai56
    // end
    // 加载echarts图表
    this.getEchart1()
    this.getEchart3()
  },
  methods: {
    getInfo1 (e) {
      this.code1 = this.code1 === e.struct_code ? '' : e.struct_code
      this.code2 = ''
      this.code3 = ''
    },
    getInfo2 (e) {
      this.code2 = this.code2 === e.struct_code ? '' : e.struct_code
      this.code1 = ''
      this.code3 = ''
    },
    getInfo3 (e) {
      this.code3 = this.code3 === e.struct_code ? '' : e.struct_code
      this.code1 = ''
      this.code2 = ''
    },
    closebtn () {
      this.code1 = ''
      this.code2 = ''
      this.code3 = ''
    },
    getEchart1 () {
      // let xdata = this.xdata
      // let ydata = this.ydata
      var option = {
        legend: {
          top: 10,
          right: 10,
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['完成物料']
        },
        xAxis: {
          type: 'category',
          data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖', '7号砖'],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        // yAxis: {
        //   type: 'value'
        // },
        yAxis: {
          // 设置坐标轴字体颜色和宽度
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          name: '完成物料',
          data: [10, 50, 30, 20, 60, 70, 80],
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            normal: {
              color: '#32C5FF'
            }
          }
        }]
      }

      var echart = document.getElementById('echarts1')
      var myChart = echarts.init(echart)
      myChart.setOption(option)
    },
    getEchart3 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts3'))
      var option = {
        legend: {
          top: 40,
          right: 160,
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['状态汇总']
          // data: ['静置中', '静置完成', '强制完成']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          position: 'top',
          offset: -10,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: '状态汇总',
            type: 'bar',
            barWidth: 10,
            data: [120, 200, 150],
            itemStyle: {
              normal: {
                // 这里是重点
                color: function (params) {
                  // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#F96700 ', '#E2BB0E', '#30EBC9', '#d48265', '#91c7ae', '#749f83', '#ca8622']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  width 100%
  padding .15rem .54rem 0
  .con1
    position relative
    width 18.17rem
    height 5.7rem
    // border 1px solid #f00
    .tag_block
      position absolute
      bottom .1rem
      right .3rem
    .tag_type
      display inline-block
      padding-left .3rem
    .type_color
      display inline-block
      width .1rem
      height .1rem
      border-radius 50%
    .tag_text
      display inline-block
      font-size .14rem
      line-height .2rem
    .blue
      background #32C5FF
    .green
      background #30EBC9
    .gray
      background #516282
    .yellow
      background #E2BB0E
    .orange
      background #F96700
    .yard-wrap
      // height 6.95rem
      height 100%
      width 100%
      // padding .1rem 0
    .yard_group
      width 100%
      height 1.8rem
      clear both
    .yard_group_ul
      float left
      display grid
      grid-gap 0
      justify-items center
      align-items center
      // border-top .01rem solid #32C5FF
      // border-left .01rem solid #32C5FF
      margin-top -.01rem
    .yard_group_ul_1
      // width 18.26rem
      width 100%
      position absolute
      grid-template-columns repeat(20, 100% / 20)
      grid-template-rows repeat(2, 1.8rem / 2)
    .yard_group_ul_2
      // width 16.19rem
      width 90%
      grid-template-columns repeat(18, 100% / 18)
      grid-template-rows repeat(2, 1.8rem / 2)
    .yard_group_ul_3
      // width 16.19rem
      width 40%
      grid-template-columns repeat(8, 100% / 8)
      grid-template-rows repeat(2, 1.8rem / 2)
    .yard_group_cell
      position relative
      display inline-block
      width 100%
      // width .8rem
      height calc(1.8rem / 2)
      // border-right .01rem solid #32C5FF
      // border-bottom .01rem solid #32C5FF
      border .01rem solid #32C5FF
      background #000F2B
      border-radius 8px
    .yard_group_p
      height calc(1.8rem / 2)
      p
        font-size 12px
        // line-height calc(1.8rem / 4)
        line-height 0.28rem
        -webkit-text-size-adjust none
        text-align center
        white-space nowrap
        // transform scale(0.66)
      img
        display block
        width 100%
        height 0.6rem
    .corridor_2
      width 100%
      line-height .1rem
      text-align center
    .locate-wrap
      position absolute
      left 0.88rem
      top .3rem
      // width 2.4rem
      // height 2.8rem
      // z-index 99
      // background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
      // padding .36rem .3rem
    .locate-content
      position absolute
      width 2.4rem
      height 2.8rem
      z-index 99
      background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
      padding .36rem .3rem
    .tan_pline
      width 100%
      margin 0 auto
    .tan_p
      font-size .14rem
      line-height .26rem
      height .26rem
      overflow hidden
      color #fff
    .close_btn
      position absolute
      top 3%
      right 10%
      margin-right -.25rem
      font-size .14rem
      line-height .34rem
      padding 0 .16rem
      border-radius 5px
      cursor pointer
  .con-b
    width 49.3%
    height 3.45rem
    overflow hidden
    position relative
    background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
    margin-top .1rem
    float left
  .con2
    margin-right .2rem
    #echarts1
      // margin-left 2rem
      position absolute
      top 0
      left 0
      z-index 9
    #echarts3
      // margin-left 2rem
      position absolute
      top -30px
      left 60px
      z-index 10
    .title
      position absolute
      top .15rem
      left .25rem
  .con3
    padding 0 .27rem 0 .27rem
    .block_h2
      h2
        font-size .16rem
        line-height .22rem
        margin .15rem 0 .15rem 0
    .list_scroll_title
      width 100%
      background #262F52
      span
        display inline-block
        width 16.6%
        text-align center
        line-height .32rem
        // float left
    .content-block-scroll
      width 100%
      height calc(100% - 0.6rem)
      overflow hidden
    .content-block-scroll-ul
      li
        width 100%
        &:nth-child(2n)
          background rgba(38,47,82,0.50)
        span
          display inline-block
          width 16.6%
          padding 0 .1rem
          text-align center
          line-height .38rem
          box-sizing border-box
          // float left
.foldcricle1
  position absolute
  z-index 102
  // width 1.27rem
  // height 1.05rem
  // background center center / 100% 100% url(../assets/images/dot_line.png) no-repeat
  width 0.25rem
  height 0.25rem
  background center center / 100% 100% url(../assets/images/dot.png) no-repeat
.position_1_1
  top 0rem
  left -.1rem
  transform rotateX(180deg)
</style>
