<template>
  <section class="container">
    <t-header  title="压制生产看板"></t-header>
    <div class="content">
      <div class="zd-row yj_wraper">
        <div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
          <div class="zd-row jccenter yj_name">{{ e.device_code }}</div>
          <div class="yj_info_wraper">
            <div class="zd-row yj_info">
              <div class="yj_info_p2">压机状态:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">当前产品:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">泥料:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">当班产量:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">布料仓余量:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">缓存线泥料余量:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
            <div class="zd-row yj_info">
              <div class="yj_info_p2">当班合格率:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zd-row num_wraper">
        <div class="left_wrap">
          <div class="title_wrap_1">
            <p>成型工序</p>
          </div>
          <div class="item_wrap">
            <div class="zd-row num_wrap_1">
              <div class="echart_wrap">
                <div id="echart_d1" style="width: 100%; height: 100%"></div>
              </div>
              <div class="zd-row num_content">
                <div class="zd-row flexcol  jccenter num_item">
                  <div class="yj_info_p2">日计划量</div>
                  <div class="yj_info_p1">1000&nbsp;吨</div>
                </div>
                <div class="zd-row flexcol  jccenter num_item">
                  <div class="yj_info_p2">日完成量</div>
                  <div class="yj_info_p1">1000&nbsp;吨</div>
                </div>
              </div>
            </div>
            <div class="zd-row num_wrap_1">
              <div class="echart_wrap">
                <div id="echart_d2" style="width: 100%; height: 100%"></div>
              </div>
              <div class="zd-row num_content">
                <div class="zd-row flexcol  jccenter num_item">
                  <div class="yj_info_p2">月计划量</div>
                  <div class="yj_info_p1">1000&nbsp;吨</div>
                </div>
                <div class="zd-row flexcol  jccenter num_item">
                  <div class="yj_info_p2">月完成量</div>
                  <div class="yj_info_p1">1000&nbsp;吨</div>
                </div>
              </div>
            </div>
            <div class="zd-row num_wrap_2">
              <div class="zd-row pass_item">
                <p class="pass_p1">日合格率</p>
                <p class="pass_p2">20%</p>
              </div>
              <div class="zd-row pass_item">
                <p class="pass_p1">日合格率</p>
                <p class="pass_p2">20%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="left_wrap right_wrap">
          <div class="title_wrap_1 title_wrap_2">
            <p>缓存线泥料</p>
          </div>
          <div class="item_wrap">
            <div class="zd-row nl_wrap">
              <div class="zd-row cur_nl_wrap">
                <div class="yj_info_p2">当前缓存线泥料种类</div>
                <div class="yj_info_p1">20</div>
              </div>
              <div class="zd-row cur_nl_wrap cur_nl_wrap_1">
                <div class="yj_info_p2">当前缓存线泥料总重</div>
                <div class="yj_info_p1">20</div>
              </div>
            </div>
            <div class="data_wrap">
              <ul class="scroll_tab">
                <li>序号</li>
                <li>泥料编码</li>
                <li>泥料名称</li>
                <li>泥料重量</li>
                <li>排料时间</li>
                <li>停留时间</li>
              </ul>
              <div class="scroll_container">
                <vue-seamless-scroll :data="dataList2" :class-option="defaultOption1">
                  <ul class="scroll-ul">
                    <li v-for="(e, i) in dataList2" :key="i">
                    <div class="zd-row jccenter scroll-item">{{i+1}}</div>
                    <div class="zd-row jccenter scroll-item">{{e.material_code}}</div>
                    <div class="zd-row jccenter scroll-item">{{e.material_name}}</div>
                    <div class="zd-row jccenter scroll-item">{{e.qty}}</div>
                    <div class="zd-row jccenter scroll-item">{{e.time}}</div>
                    <div class="zd-row jccenter scroll-item">{{e.time1}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer></footer>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
export default {
  components: {
    THeader
  },
  data () {
    return {
      dataList1: [],
      dataList2: [{material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}, {material_code: 'jdjlfjlfj', material_name: '砥砺奋进浪费就', time: '2020-10-10', time1: '2020-10-10', qty: '100'}]
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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)
      }
    }
  },
  created () {
    for (let i = 0; i < 8; i++) {
      this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
    }
  },
  mounted () {
    this.setEchart1()
  },
  methods: {
    setEchart1 () {
      let value = 10
      let title = '%'
      let text = '完成率'
      let option = {
        title: [
          {
            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
            x: 'center',
            y: 'center',
            textStyle: {
              rich: {
                a: {
                  fontSize: 22,
                  color: '#00D9FF',
                  fontFamily: 'SourceHanSansCN',
                  foontWeight: '700'
                },
                b: {
                  fontSize: 14,
                  color: '#ffffff',
                  fontFamily: 'SourceHanSansCN',
                  foontWeight: '700',
                  padding: [10, 0, 0, 3]
                },
                c: {
                  color: '#FFFFFF',
                  fontSize: 12,
                  fontWeight: '700',
                  fontFamily: 'SourceHanSansCN',
                  padding: [10, 0, 0, 0]
                }
              }
            }
          }
        ],
        polar: {
          radius: ['85%', '100%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {name: '',
            type: 'bar',
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: '#0a2543'
            },
            data: [value],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: '#00dfff'
              }
            }
          }
        ]
      }
      if (document.getElementById('echart_d1') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('echart_d1'))
      let echart = this.$echarts.init(document.getElementById('echart_d1'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  position relative
  width 100%
  height 100%
.content
  width 100%
  height calc(100% - 1rem)
  padding .25rem .33rem .38rem .33rem
footer
  position absolute
  left 0
  bottom 0
  width 100%
  height .38rem
  background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
.yj_wraper
  width 100%
  height calc(55% - .15rem)
  margin-bottom .15rem
  padding .31rem .16rem .2rem .16rem
  background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
.yj_item
  width 11.6%
  background-color #001536
.yj_name
  height .45rem
  font-size .18rem
  line-height .18rem
  color #78B1DE
  letter-spacing .02rem
  text-align center
  font-weight 700
  background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
.yj_info_wraper
  height calc(100% - .45rem)
  padding .1rem
.yj_info
  height calc(100% / 7)
  background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
.yj_info_p1
  font-size: .18rem;
  line-height: .18rem;
  color: #FFFFFF;
  letter-spacing: 1.88px;
  text-align: center;
  font-weight: 700;
.yj_info_p2
  font-size: .14rem
  line-height: .14rem
  color: #84B0DA;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 700;
.num_wraper
  width 100%
  height 45%
.left_wrap
  width 30%
  height 100%
  margin-right .32rem
  background-color rgba(6,11,24,0.70)
.right_wrap
  width calc(70% - .32rem)
.title_wrap_1
  height .34rem
  background center bottom / 100% 100% url(../assets/images/screen1/bg_title_s.png) no-repeat
  padding-left .1rem
  p
    font-size: .18rem;
    line-height .34rem
    color: #FFFFFF;
    letter-spacing: 2px;
    text-shadow: 0 0 9px #159AFF;
    font-weight: 700;
    padding-left .28rem
    background left center / .22rem .22rem url(../assets/images/screen1/bg_title_tip.png) no-repeat
.title_wrap_2
  background-image url(../assets/images/screen1/bg_title_j.png)
.item_wrap
  height calc(100% - .34rem)
  padding .1rem .3rem .2rem .3rem
.num_wrap_1
  height calc(42% - .1rem)
  background bottom center / 100% 3px url(../assets/images/screen1/line_2.png) no-repeat
  pdding-bottom .1rem
  margin-bottom .1rem
.num_wrap_2
  height 16%
.echart_wrap
  width 1.1rem
  height 1.1rem
  background center / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
  padding .16rem
.num_content
  width calc(100% - 1.34rem)
  height 100%
.num_item
  width 45%
  height 55%
  background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
  .yj_info_p2
    margin-bottom .1rem
.pass_item
  width 48%
  height 100%
  background center / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
  padding 0 .1rem 0 .2rem
.pass_p1
  font-size .16rem
  color #fff
.pass_p2
  font-size .18rem
  color #00D5FF
.nl_wrap
  height .5rem
  margin .1rem 0 .14rem 0
.cur_nl_wrap
  width 45%
  height 100%
  background center / 100% 100% url(../assets/images/screen1/item_9.png) no-repeat
  padding 0 .3rem
  .yj_info_p2
    color #fff
    font-size .18rem
  .yj_info_p1
    font-size .24rem
    font-family 'YouSheBiaoTiHei'
.cur_nl_wrap_1
  background-image url(../assets/images/screen1/item_10.png)
.data_wrap
  height calc(100% - .74rem)
  border 1px solid rgba(8,205,248,0.3)
.scroll_tab
  width 100%
  height .4rem
  li
    float left
    width 18%
    font-size .14rem
    line-height .4rem
    color #78B1DE
    text-align center
    font-family 'SourceHanSansCN-Regular'
    &:nth-child(1)
      width 10%
.scroll_container
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.scroll-ul
  li
    width 100%
    height .44rem
    // border-bottom 1px solid rgba(122,159,224,0.17)
    box-shadow: inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    &:nth-child(even)
      background rgba(1,24,52,0.60)
  .scroll-item
    float left
    width 18%
    height .44rem
    font-size .14rem
    line-height .14rem
    color #fff
    text-align center
    font-family: 'SourceHanSansCN-Regular';
    overflow hidden
    &:nth-child(1)
      width 10%
</style>
