<template>
  <section>
    <t-header title="设备管理综合查询"></t-header>
    <div class="goods_shelves">
      <div class="yard-wrap">
        <div class="content_left">
          <div class="item_wrap item_wrap_3">
            <div class="tip_item">
              <p>每日开机时长</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="echart_wrap">
              <div id="echart_d2" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="item_wrap item_wrap_1">
            <div class="tip_item">
              <p>设备运行状态</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1">
                <li>事业部</li>
                <li>正常台数</li>
                <li>故障台数</li>
                <li>委外台数</li>
                <li>保养台数</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
                  <ul class="content-block-scroll-ul_1">
                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
                      <div>{{e.id}}</div>
                      <div>{{e.material_code}}</div>
                      <div>{{e.pcsn}}</div>
                      <div>{{e.workorder_qty}}</div>
                      <div>{{e.product_qty}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="item_wrap item_wrap_1">
            <div class="tip_item">
              <p>设备年计划保养状态</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1 scroll_tab_2">
                <li>事业部</li>
                <li>需保养台数</li>
                <li>已保养台数</li>
                <li>在保养台数</li>
                <li>未保养台数</li>
                <li>完成率(%)</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="array1" :class-option="defaultOption2">
                  <ul class="content-block-scroll-ul_1 content-block-scroll-ul_2">
                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
                      <div>{{e.id}}</div>
                      <div>{{e.material_code}}</div>
                      <div>{{e.pcsn}}</div>
                      <div>{{e.workorder_qty}}</div>
                      <div>{{e.product_qty}}</div>
                      <div>{{e.ee}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="content_center">
          <div class="center_wrap">
            <div class="item_wrap item_wrap_3">
              <div class="tip_item">
                <p>设备数量</p>
                <div class="tip_item_bg1"></div>
              </div>
              <div class="echart_wrap echart_wrap_1">
                <div class="echart_wrap_2">
                  <div class="echart_wrap_l">
                    <div class="num_items">
                      <div class="right_1_up_right_item">
                        <p class="right_1_up_p1">总设备台数</p>
                        <p class="right_1_up_p2">100<span></span></p>
                      </div>
                      <div class="right_1_up_right_item">
                        <p class="right_1_up_p1">在用台数</p>
                        <p class="right_1_up_p2">100<span></span></p>
                      </div>
                    </div>
                    <div class="echart_wrap_l_wrap">
                      <div id="echart_d4" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                  <div class="echart_wrap_r">
                    <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1" :key="i">
                      <div class="right_1_down_inner_3_l">
                        <span><i :style="{'background-color': e.color}"></i></span>
                        <span>{{e.material_spec}}</span>
                      </div>
                      <div class="right_1_down_inner_3_r">
                        <span>{{e.real_qty}}</span>
                        <span>个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item_wrap item_wrap_2">
              <div class="tip_item">
                <p>年保养计划监控</p>
                <div class="tip_item_bg1"></div>
              </div>
              <div class="grid_wrap grid_wrap_1">
                <ul class="scroll_tab_1">
                  <li>事业部</li>
                  <li>正常台数</li>
                  <li>故障台数</li>
                  <li>委外台数</li>
                  <li>保养台数</li>
                </ul>
                <div class="scroll_container_1">
                  <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
                    <ul class="content-block-scroll-ul_1">
                      <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
                        <div>{{e.id}}</div>
                        <div>{{e.material_code}}</div>
                        <div>{{e.pcsn}}</div>
                        <div>{{e.workorder_qty}}</div>
                        <div>{{e.product_qty}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_left">
          <div class="item_wrap item_wrap_3">
            <div class="tip_item">
              <p>年故障类别TOP10</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="echart_wrap">
              <div id="echart_d3" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="item_wrap item_wrap_4">
            <div class="tip_item">
              <p>近30天班组情况</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1">
                <li>事业部</li>
                <li>正常台数</li>
                <li>故障台数</li>
                <li>委外台数</li>
                <li>保养台数</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
                  <ul class="content-block-scroll-ul_1">
                    <li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
                      <div>{{e.id}}</div>
                      <div>{{e.material_code}}</div>
                      <div>{{e.pcsn}}</div>
                      <div>{{e.workorder_qty}}</div>
                      <div>{{e.product_qty}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
export default {
  name: 'DeviceManage',
  components: {
    THeader
  },
  data () {
    return {
      myCharts1: '',
      myCharts2: '',
      myCharts3: '',
      array1: [{id: '1dfk;kf;'}, {id: '1dfk;kf;'}, {id: '1dfk;kf;'}],
      colors: ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94'],
      arrR1: [{material_spec: 'aa', real_qty: '10', color: '#E0CA07'}, {material_spec: 'bb', real_qty: '20', color: '#007744'}, {material_spec: 'cc', real_qty: '30', color: '#C0C0C0'}, {material_spec: 'dd', real_qty: '40', color: '#B68845'}, {material_spec: 'ee', real_qty: '50', color: '#07E083'}]
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 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)
      }
    },
    defaultOption2 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 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.setEchart1()
    this.setEchart2()
    this.setEchart3()
  },
  methods: {
    setEchart1 () {
      let option = {
        grid: {
          top: 50,
          left: 25,
          right: 25,
          bottom: 0,
          containLabel: true
        },
        legend: {
          top: 0,
          right: 0,
          textStyle: {
            color: '#ffffff',
            fontSize: 16,
            lineHeight: 20
          },
          itemGap: 20,
          itemHeight: 8,
          data: ['a', 'b', 'c']
        },
        // dataZoom: [
        //   {
        //     show: false, // 为true滚动条出现
        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
        //     startValue: 0, // 从头开始。
        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
        //   }
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
              // align: 'center'
            },
            rotate: 50
          },
          data: ['2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: 'a',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#0E90FD',
                  width: 2.4
                }
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ], false)
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'b',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#33CCCC',
                  width: 2.4
                }
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(38,191,191,0.50)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.00)'
                  }
                ], false)
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'c',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#B68845',
                  width: 2.4
                }
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ], false)
              }
            },
            data: [120, 180, 91, 134, 190, 130, 310]
          }
        ]
      }
      let echart = document.getElementById('echart_d2')
      this.myCharts1 = this.$echarts.init(echart)
      this.myCharts1.setOption(option)
      // this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts1.resize()
      })
    },
    setEchart2 () {
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 25,
          bottom: 0,
          containLabel: true
        },
        // dataZoom: [
        //   {
        //     show: false, // 为true滚动条出现
        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
        //     startValue: 0, // 从头开始。
        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
        //   }
        // ],
        xAxis: {
          type: 'value',
          min: 0,
          max: 250,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
              // align: 'center'
            }
          },
          formatter: '{value}'
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: ['aa', 'bb']
        },
        series: [
          {
            type: 'bar',
            barWidth: '30',
            label: {
              show: true,
              position: 'right', // 位置
              color: '#A7D6F4',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c}' // 这里是数据展示的时候显示的数据
            },
            itemStyle: {
              normal: {
                color: '#33CCCC'
              }
            },
            data: ['120', '30']
          }
        ]
      }
      let echart = document.getElementById('echart_d3')
      this.myCharts2 = this.$echarts.init(echart)
      this.myCharts2.setOption(option)
      // this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts2.resize()
      })
    },
    setEchart3 () {
      let arr = []
      this.arrR1.map(el => {
        arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
      })
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '区域',
            type: 'pie',
            radius: ['70%', '95%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      let echart = document.getElementById('echart_d4')
      if (this.myCharts3 !== '') {
        this.myCharts3.dispose()
      }
      if (echart !== null) {
        this.myCharts3 = this.$echarts.init(echart)
        this.myCharts3.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts3.resize()
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.goods_shelves
  _wh(100%, calc(100% - .75rem))
  padding .3rem .3rem .4rem .3rem
  _bis('../assets/images/item_2.png', 100%, auto, center, bottom)
.yard-wrap
  _wh(100%, 100%)
  clear both
.content_left
  float left
  _wh(28%, 100%)
  border-top .03rem solid #0092df
  background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%)
  overflow hidden
.content_center
  float left
  _wh(calc(44% - .4rem), 100%)
  margin 0 .2rem
  padding .32rem .2rem .2rem .2rem
  overflow hidden
  _bis('../assets/images/item_1.png', 100%, 100%)
.center_wrap
  _wh(100%, 100%)
.item_wrap
  _wh(100%, 45%)
.item_wrap_1
  height 30%
.item_wrap_2
  height calc(60% - .25rem)
  margin-top .25rem
.item_wrap_3
  height 40%
.item_wrap_4
  height 60%
.tip_item
  position relative
  height .42rem
  padding 0 .2rem
  background linear-gradient(0deg, rgb(15, 44, 84) 0%, rgb(0, 8, 50) 100%)
  p
    display inline-block
    _font(.18rem, .25rem, #fff)
    border-bottom .01rem solid #53cdf9
    padding-top .06rem
.tip_item_bg1
  position absolute
  bottom 0.08rem
  left .2rem
  _wh(.05rem, .05rem)
  background-color #53cdf9
  transform rotate(45deg)
  box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.echart_wrap
  _wh(100%, calc(100% - .5rem))
  padding .2rem
.echart_wrap_1
  padding-bottom 0
.echart_wrap_2
  _wh(100%, 100%)
  _fj()
.grid_wrap
  _wh(calc(100% - .4rem), calc(100% - .7rem))
  margin .08rem .2rem .2rem .2rem
  border .01rem solid rgba(8,205,248,0.3)
.grid_wrap_1
  margin-left 0
  margin-right 0
  width 100%
.scroll_tab_1
  _wh(100%, .4rem)
  border-bottom .01rem solid rgba(8,205,248,0.3)
  li
    float left
    width 20%
    _font(.14rem,.4rem,#78B1DE,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    box-sizing border-box
.scroll_tab_2 li
  width calc(100% / 6)
.content-block-scroll-ul_1
  li
    _wh(100%, .44rem)
    border-bottom .01rem solid rgba(8,205,248,0.3)
    &:nth-child(even)
      background rgba(1,24,52,0.60)
      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    &:last-child
      border-bottom none
.content-block-scroll-ul_1
  li
    div
      float left
      _wh(20%, .44rem)
      _fj(center)
      _font(.14rem, .44rem, #fff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
.content-block-scroll-ul_2 li div
  width calc(100% / 6)
.num_items
  _wh(100%, .6rem)
  _fj()
.right_1_up_right_item
  _wh(1.7rem, .6rem)
  background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat
  _fj(space-evenly)
  flex-direction column
  &:nth-child(2)
    margin-left .2rem
.right_1_up_p1
  font-family "SourceHanSansCN"
  _font(.14rem, .14rem, #78B1DE, 700, center)
.right_1_up_p2
  font-family "SourceHanSansCN"
  _font(.18rem, .18rem, #fff, 700, center)
  span
    _font(.12rem, .18rem, #fff, 700, center)
    padding-left .1rem
.echart_wrap_l
  _wh(60%, 100%)
  padding-right .4rem
  background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat
.echart_wrap_l_wrap
  _wh(100%, calc(100% - .6rem))
  padding-top .2rem
.echart_wrap_r
  _wh(40%, 100%)
  padding-left .2rem
  _fj(,flex-start)
  flex-direction column
.right_1_down_inner_3_i
  _wh(100%, .4rem)
  _fj()
  background center bottom / 100% 100% url(../assets/images/item_5.png) no-repeat
.right_1_down_inner_3_l
  _wh(50%, 100%)
  overflow hidden
  clear both
  span
    display block
    float left
    &:nth-child(1)
      _wh(.0725rem, .4rem)
      margin-left .15rem
      _fj()
      overflow hidden
      i
        display block
        _wh(.0725rem, .0725rem)
        border-radius 100%
    &:nth-child(2)
      _wh(calc(100% - 0.2825rem), .4rem)
      font-family "SourceHanSansCN"
      _font(.14rem, .4rem, #fff,400,)
      margin-left .06rem
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
.right_1_down_inner_3_r
  _wh(50%, 100%)
  line-height .4rem
  overflow hidden
  text-align right
  span
    font-family "SourceHanSansCN"
    _font(.14rem, .4rem, #fff,700,)
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.18rem, .4rem, #00D5FF,700,)
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
</style>
