<template>
  <div class="bottom-charts">
    <div>
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 headerTitle">全年物资收发折线图</span>
        </div>
      </div>
      <div class="bottom-charts-left">
        <bottomLeftLine ref="bll"/>
      </div>
    </div>
  </div>
</template>

<script>
import bottomLeftLine from '@/components/echart/bottom/bottomLeftLine'
import bottomRightBar from '@/components/echart/bottom/bottomRightBar'
import { getAction } from '@/api/manage'
export default {
  name: 'BottomCharts',
  components: {
    bottomLeftLine,
    bottomRightBar
  },
  data () {
    return {
      url: '/bigSunmmary/getGoodsByRecord'
    }
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    getData() {
      getAction(window._CONFIG['domianURL'] + this.url).then(res => {
        this.$refs.bll.draw(res.data)
      })
    }
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  // flex-direction: column;
  position: relative;

  .bottom-charts-left .bottom-charts-right {
    width: 50%;
  }
}
</style>
