<template>
  <div class="chanlian">
    <div class="chanlian__title">本月套料重量(吨)</div>
    <dv-scroll-ranking-board v-if="show" :config="config" />
  </div>
</template>

<script>
import {getGekuachaliang} from "@/api/kban";

export default {
  name: "MainChanLian",
  data () {
    return {
      show:false,
      config: {
        data: [],
        rowNum: 9
      },
      delay:null
    }
  },
  mounted() {
    // this.$socket.open()
    // this.wsSubscribe()
  },
  created(){
    this.getData();
    this.delay=setInterval(this.getData,30000)
  },
  sockets:{},
  methods:{
    getData(){
      getGekuachaliang().then(res=>{
        this.show=false
        const data=[]
        let total=0
        Object.keys(res.data).forEach(key=>{
          const item=res.data[key]
          data.push({name:item.BMSM,value:item.t})
          total+=1
        })
        this.config.data=data
        this.config.rowNum=total
        this.show=true
      })
    },
    clear(){
      clearInterval(this.delay)
    }
  }
}
</script>

<style scoped>
.chanlian{
  width: 369px;
  height: 688px;
  background: url('../../../assets/kban/clbg.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 62px;
  text-align: center;

  display: flex;
  flex-direction: column;
  padding: 0px 30px;

  .chanlian__title{
    width: 231px;
    height: 41px;
    background: url('../../../assets/kban/cltitle.png') no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    font-size: 20px;
    padding: 12px 26px;
    margin-left: 41px;
  }

  .ranking-board-title {
    font-weight: bold;
    height: 10px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .dv-scroll-ranking-board {
    flex: 1;
  }
}
</style>
