<template>
  <div class="main">
    <div class="full_page">
      <!-- 左-->
      <div class="trade_left" style="width: 18%">
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="安全">
          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
        </display-board>
      </div>
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="质量">
          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
        </display-board>
      </div>
        <div style="height: 26%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="人员情况表">
            <div >
              <div style="height: 100px;width: 200px" ref="bar"></div>
            </div>
          </display-board>
        </div>
      </div>
      <!--中-->
      <div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
        <display-board  style="height: 76%">

        </display-board>
        <div style="display: flex; justify-content: space-between; height: 20%;">
        </div>
      </div>

      <!-- 右-->
      <div class="trade_right" style="width: 26%;;padding-left: 0.5rem">
        <div style="height: 33%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="汽运">

          </display-board>
        </div>
        <div style="height: 33%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="水运">

          </display-board>
        </div>
        <div style="height: 34%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="铁运">

          </display-board>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import * as echarts from "echarts";
export default {
  name: "SafeQuality",
  components: {
    DisplayBoard,
    WinnersList
  },
  data() {
      return {
        arSafeList:[{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
        arQualityList:[{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
        people_options:{

        }
      }
  },
  methods: {

    refreshData() {
        this.getPeopleInfos();
    },
    getPeopleInfos(){

      // var seriesBar = [];
      // seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
      // seriesBar.push(adapterSeriesDataBar(null, "出勤", [15]));
      // seriesBar.push(adapterSeriesDataBar(null, "请假", [8]));
      //
      // this.peopleInfoOption.series = seriesBar;
      // let barDom = this.$refs.bar;
      // let chart=echarts.init(barDom);
      // chart.setOption(this.peopleInfoOption);

    }
  },
  mounted() {
    setTimeout(() => {

      let barDom = this.$refs.bar;
      this.bar = echarts.init(barDom);

    }, 500);
    this.refreshData();
  },
  beforeDestroy() {

  },
  watch:{
    countDown(n,o){
      if (n === 1){
        this.refreshData();
      }
    },
  },
  props:{
    countDown:{
      type: Number
    }
  }
};
</script>

<style scoped>
</style>
