<template>
  <div>
    <titlesection title="道闸/诱导屏"></titlesection>
    <ul class="flexfm ydp-dz-wrap">
      <li>
        <div>
          <div class="bg-wrap">
            <p>123</p>
            <p>123</p>
          </div>
        </div>
        <div>
          <div class="bg-wrap">
            <p>123</p>
            <p>123</p>
          </div>
        </div>
      </li>
      <!--<allPieChart tag="li"></allPieChart>-->
      <li>
        <allPieChart :chart-data="lineChartData"/>
      </li>
    </ul>
  </div>
</template>

<script>
import titlesection from '../components/titlesection'
import allPieChart from '../components/allPieChart'
import { formatNum } from '../filters/filters'
import {fetchList} from '../api/api'

const lineChartData = {
  newVisitis: {
    yData: [100, 120, 161],
    xData: ['正常', '异常', '故障']
  }
}


export default {
  name: 'youdaopingsection',
  components: {
    titlesection,
    allPieChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  created() {
  },
  methods: {
    getList() {
      fetchList()
      .then(res => {
        console.log(res);

      });
    },
  }
}
</script>

<style lang="scss"  scoped>
  .ydp-dz-wrap{
    display: flex;
    li{
      height: 100%;
      flex: 1;
      &:nth-of-type(1)>div{
        height: 50%;
        .bg-wrap{
          width: 111px;
          height: 52px;
          position: relative;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background-color: #f00;
        }
      }
    }
  }
</style>
