<template>
  <div class="chart-wrap">
    <CardWrap2>
      <span slot="left">第一季度</span>
      <div slot="r1">计划 <span class="value">{{ arrMap[0] || 0 }}</span></div>
      <div slot="r2">完成 <span class="value">{{ arrMap[1] || 0 }}</span></div>
    </CardWrap2>
    <CardWrap2>
      <span slot="left">第二季度</span>
      <div slot="r1">计划 <span class="value">{{ arrMap[2] || 0 }}</span></div>
      <div slot="r2">完成 <span class="value">{{ arrMap[3] || 0 }}</span></div>
    </CardWrap2>
    <CardWrap2>
      <span slot="left">第三季度</span>
      <div slot="r1">计划 <span class="value">{{ arrMap[4] || 0 }}</span></div>
      <div slot="r2">完成 <span class="value">{{ arrMap[5] || 0 }}</span></div>
    </CardWrap2>
    <CardWrap2>
      <span slot="left">第四季度</span>
      <div slot="r1">计划 <span class="value">{{ arrMap[6] || 0 }}</span></div>
      <div slot="r2">完成 <span class="value">{{ arrMap[7] || 0 }}</span></div>
    </CardWrap2>
  </div>
</template>

<script>
import CardWrap2 from '@/views/dashboard-screen/chard-wrap/card-wrap2.vue'
import {chartDlbpds} from '@/api/dashboard-json'

export default {
  name: 'Dlbpds',
  components: {CardWrap2},
  data() {
    return {
      option: {},
      arrMap: []
    }
  },
  created() {
    this.getOption()
  },

  methods: {
    getOption() {
      chartDlbpds().then(res => {
        if (res?.code === 200) {
          const arrMap = []
          res.info.xaxis.forEach((item, index) => {
            arrMap.push(res.info.series[0].data[index], res.info.series[1].data[index])
          })
          this.arrMap = arrMap
        }
        window.console.log('1232421 电力变配电所', res)
      })
    }
  }

}
</script>

<style scoped lang="scss">

.chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .card-wrap {
    margin: 0 0.3vw;
  }
}
</style>
