<template>
  <section>
    <t-header :title="title"></t-header>
    <div class="goods_shelves">
      <div class="tags">
        <div class="fontselect tag tag1">静置中</div>
        <div class="fontselect tag tag2">禁用</div>
        <div class="fontselect tag tag3">静置完成</div>
        <div class="fontselect tag tag4">强制完成</div>
      </div>
      <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="e.disabled === true ? 'syellow' : e.bgcolor">
              <div class="yard_group_p">
                <p class="fontselect">{{e.struct_name}}</p>
                <p class="fontselect">wl01</p>
              </div>
              <!-- <button class="primary" :class="e.disabled === true ? 'syellow' : e.bgcolor" @click="getInfo($event, e)">
                <span class="scaleFont">{{e.struct_name}}</span>
              </button>
              <div v-show="e.disabled" class="locate-wrap clearfix"  :style="{'left': coordinateX,'top': coordinateY}">
                <div class="locate-content">
                  <div class="tan_pline">
                    <p class="tan_p">货位：{{equipInfo.struct_name}}</p>
                    <p class="tan_p">托盘：{{equipInfo.tray_name}}</p>
                    <p class="tan_p">订单号：{{equipInfo.order_code}}</p>
                    <p class="tan_p">类型: {{['待入', '待出', '库存'][Number(equipInfo.ios_type)]}}</p>
                  </div>
                  <div class="tan_tables">
                    <table>
                      <tr>
                        <th width="25%">规格</th>
                        <th width="15%">数量</th>
                        <th width="15%">重量</th>
                        <th width="45%">物料名称</th>
                      </tr>
                      <tr v-for="(e, i) in equipArr" :key="i">
                        <td>{{e.material_spec}}</td>
                        <td>{{e.ivt_num}}</td>
                        <td>{{e.ivt_qty}}</td>
                        <td>{{e.material_name}}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
          <!-- <div class="corridor_1"><p>A<br>G<br>V<br><br>过<br><br>道</p></div> -->
        </div>
        <div class="corridor_2">AGV 过 道</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="e.disabled === true ? 'syellow' : e.bgcolor">
              <div class="yard_group_p">
                <p class="fontselect">{{e.struct_name}}</p>
                <p class="fontselect">wl01</p>
              </div>
            </div>
          </div>
          <!-- <div class="corridor_1 corridor_3"><p>A<br>G<br>V<br><br>过<br><br>道</p></div> -->
        </div>
      </div>
    </div>
    <div class="echarts_container clearfix">
      <div class="echarts_item item1">
        <!-- <h2>标题</h2> -->
        <!-- <div id="echart_d1"></div> -->
        <div id="echart_d1" style="width: 620px;height:240px;"></div>
        <!-- <div id="echart_d2" style="width: 620px;height:240px;"></div> -->
      </div>
      <div class="echarts_item item2">
        <!-- <h2>出入库数量对比</h2> -->
        <!-- <div id="echart_d2"></div> -->
        <div id="echart_d2" style="width: 620px;height:240px;"></div>
      </div>
      <div class="echarts_item item3">
        <h2 class="title3">作业信息</h2>
        <div class="echart_item c-box3">
          <ul class="scroll_tab">
            <li>作业时间</li>
            <li>物料</li>
            <li>出入类型</li>
            <li>数量</li>
            <li>单位</li>
          </ul>
          <div class="scroll_container">
            <vue-seamless-scroll :data="array" :class-option="defaultOption">
              <ul class="content-block-scroll-ul">
                <li v-for="(e, i) in array" :key="i">
                  <!-- <div>2019-07-11 09:12:31</div> -->
                  <div>1</div>
                  <div>20.5AH</div>
                  <div>入库</div>
                  <div>350</div>
                  <div>只</div>
                </li>
              </ul>
          </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
export default {
  name: 'FlatStore',
  components: {
    THeader
  },
  data () {
    return {
      title: '天能智能车间恒温库可视化看板',
      group01: [],
      group02: [],
      array: [],
      arr5: [
        ['product', '入库数', '出库数'],
        ['1号物料', 13, 5],
        ['2号物料', 12, 8],
        ['3号物料', 10, 6],
        ['4号物料', 25, 20]
      ]
    }
  },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted () {
    this.getEchart1()
    this.getEchart2()
    // 53\47\9
    // 29\29\3
    for (let i = 1; i < 4; i++) {
      for (let j = 1; j < 30; j++) {
        if (i === j) {
          this.group01.push({struct_name: i + '-' + j + '-1', disabled: 1, bgcolor: 'green'})
        } else {
          this.group01.push({struct_name: i + '-' + j + '-1'})
        }
      }
    }
    for (let i = 3; i > 0; i--) {
      for (let j = 29; j > 0; j--) {
        if (i === j) {
          this.group02.push({struct_name: i + '-' + j + '-1', disabled: 1, bgcolor: 'green'})
        } else {
          this.group02.push({struct_name: i + '-' + j + '-1'})
        }
      }
    }
    for (let i = 0; i < 15; i++) {
      let j = {
        title: '无缝滚动第几条啊啊啊-' + i,
        time: '2020-04-10'
      }
      this.array.push(j)
    }
  },
  methods: {
    getEchart1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart_d1'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '静置状态总览', // 标题
          top: '12px',
          left: '20px',
          textStyle: {
            color: '#F3953E',
            fontSize: '18'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // itemGap: 25,
          data: ['静置完成', '静置中'],
          align: 'right',
          top: 20,
          right: 20,
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: ['1号物料', '2号物料', '3号物料', '4号物料'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        // xAxis: {
        //   type: 'category',
        //   axisLine: {
        //     lineStyle: {
        //       color: '#fff'
        //     }
        //   }
        // },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '静置完成',
          type: 'bar',
          barWidth: 40,
          stack: '静置情况',
          data: [15, 20, 36, 0],
          // itemStyle: {
          //   normal: {color: '#FF8849'}
          // }
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside',
                formatter: function (params) {
                  if (params.value !== 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            }
          }
        }, {
          name: '静置中',
          type: 'bar',
          stack: '静置情况',
          data: [40, 0, 18, 0],
          // itemStyle: {
          //   normal: {color: '#3FBB49'}
          // }
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside',
                formatter: function (params) {
                  if (params.value !== 0) {
                    return params.value
                  } else {
                    return ''
                  }
                }
              }
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getEchart2 () {
      let data = this.arr5
      var option1 = {
        tooltip: {},
        dataset: {
          source: data
        },
        color: ['#0755F1', '#F6B042'],
        title: {
          text: '出入库数量对比', // 标题
          top: '12px',
          left: '20px',
          textStyle: {
            color: '#F3953E',
            fontSize: '18'
          }
        },
        legend: {
          // itemGap: 25,
          data: ['入库数', '出库数'],
          align: 'right',
          top: 20,
          right: 20,
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          // 设置坐标轴字体颜色和宽度
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: {
              normal: {
                barBorderRadius: 15,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#F18349' // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: '#F5AC41' // 60% 处的颜色
                }, {
                  offset: 1,
                  color: '#F9CB48' // 100% 处的颜色
                }], false)
              }
            }
          },
          {
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 15,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  // color: '#8AD46F' // 0% 处的颜色
                  color: '#1268f3' // 0% 处的颜色
                }, {
                  offset: 0.6,
                  // color: '#5AC990' // 60% 处的颜色
                  color: '#08a4fa' // 60% 处的颜色
                }, {
                  offset: 1,
                  // color: '#5BBCB8' // 100% 处的颜色
                  color: '#01ccfe' // 100% 处的颜色
                }], false)
              }
            }
          }
        ]
      }
      var echart1 = document.getElementById('echart_d2')
      var myChart1 = echarts.init(echart1)
      myChart1.setOption(option1)
    }
    // setHeight () {
    //   let cwidth = document.getElementById('content_block_1').offsetWidth
    //   let cheight = document.getElementById('content_block_1').offsetHeight
    //   let el1 = document.getElementById('echart_d1')
    //   let el2 = document.getElementById('echart_d2')
    //   el1.style.width = cwidth
    //   el1.style.height = cheight
    //   el2.style.width = cwidth
    //   el2.style.height = cheight
    // }
  }
}
</script>

<style lang="stylus" scoped>
.goods_shelves
  height 7.4rem
  margin .2rem .1rem .1rem .1rem
  padding .1rem
  border .02rem solid #2e67ba
  box-shadow #419df7 0px 0px .1rem
  overflow hidden
  .tags
    height .25rem
    .tag
      float left
      width .6rem
      height .25rem
      font-size .14rem
      line-height .25rem
      text-align center
      border-radius 3px
      margin-right .2rem
.tag1, .green
  background-color #67c23a
.tag2, .gray
  background-color #909399
.tag3, .orange
  background-color #ffc200
.tag4, .red
  background-color #ff0000
.yard-wrap
  height 6.95rem
  width 100%
  padding .1rem 0
.yard_group
  width 100%
  height 3.175rem
  clear both
.yard_group_ul
  float left
  display grid
  grid-gap 0
  justify-items center
  align-items center
  border-top .01rem solid #ffffff
  border-left .01rem solid #ffffff
  margin-top -.01rem
  overflow hidden
.yard_group_ul_1
  // width 18.26rem
  width 100%
  grid-template-columns repeat(29, 100% / 29)
  grid-template-rows repeat(3, 3.175rem / 3)
.yard_group_ul_2
  // width 16.19rem
  width 100%
  grid-template-columns repeat(29, 100% / 29)
  grid-template-rows repeat(3, 3.175rem / 3)
.yard_group_cell
  display inline-block
  width 100%
  height calc(3.175rem / 3)
  border-right .01rem solid #ffffff
  border-bottom .01rem solid #ffffff
.yard_group_p
  height calc(3.175rem / 3)
  p
    font-size 12px
    line-height calc(3.175rem / 6)
    -webkit-text-size-adjust none
    text-align center
    white-space nowrap
    // transform scale(0.66)
.corridor_1
  display:flex;
  align-items:center;
  justify-content:center;
  width calc(100% - 18.26rem)
  height 3.6rem
  float right
  text-align center
  p
    font-size .18rem
.corridor_2
  width 100%
  font-size .18rem
  line-height .4rem
  text-align center
.corridor_3
  width calc(100% - 16.19rem)
.echarts_container
  width 100%
  height calc(100% - 8.45rem)
  padding .1rem
  margin-bottom .1rem
.echarts_item
  float left
  width calc((100% - .3rem) / 3)
  height 100%
  background-color rgb(4 30 66)
  overflow hidden
  h2
    font-size .14rem
    line-height .3rem
    background center left / .15rem .15rem url(../assets/images/tip.png) no-repeat
    padding-left .2rem
.item2
  margin 0 .15rem
.echart_item
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.scroll_tab
  li
    float left
    width 20%
    font-size .14rem
    line-height .3rem
.scroll_container
  width 100%
  height calc(100% - .6rem)
  overflow hidden
.content-block-scroll-ul
  li
    div
      float left
      width 20%
      font-size .14rem
      line-height .3rem
      color red
.title3
  color #F3953E
  margin 12px 0 0 20px
  font-size 18px
.c-box3
  margin-left 20px
</style>
