BJ_web_developers / lzsandtable

  <template>
      <div class="theme-wrap">

          <card-title> <span>泊位信息</span></card-title>

          <div class="theme-body">

              <account-num :totalnum="total">

                  <span>总计</span>
              </account-num>

              <ul class="income-echart">
                 <li>
                     <pie-echart :chart-data="pieChartData"></pie-echart>
                 </li>

                 <li class="berth-inf">

                     <p><span class="free-berth">{{pieChartData.yData[0]|filterTotal}}</span><span>空余</span></p>
                     <p><span class="buss-berth">{{pieChartData.yData[1]|filterTotal}}</span><span>占有</span></p>

                 </li>

              </ul>

          </div>
      </div>
  </template>
  
  <script>
  import CardTitle from './base/CardTitle'
  import AccountNum from './base/AccountNum'

  import PieEchart from './base/PieEchart'

  export default {
    name: 'VBerth',
    components: {
      CardTitle,
      AccountNum,

      PieEchart

    },

    props:['total','pieChartData'],

    data() {
      return {

        // pieChartData: {
        //   yData: [1,1],
        //   legendData: ['空余','占有']
        // },

      }
    },
    mounted(){
      //this.drawBar();
    },
    methods: {

    }
  }
  </script>
  
  <style scoped lang="scss">
      .theme-wrap {
          height: 100%;
      }
      .theme-body {
          height: calc(100% - 30px);
          margin-left: 20px;
      }
      .income-echart{
          height: 70%;

          display: flex;
          >li{
              flex: 1;
          }

          .berth-inf{
              p{
                  height: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding-right: 20px;
              }
              .free-berth{
                  @include fontStyle(24px);

                  color: $fontBlue;

              }
              .buss-berth{
                  @include fontStyle(24px);

                  color: $fontOrange;

              }
          }

      }
  
  </style>