BJ_web_developers / cityOperationCenter

  <template>
    <div class="app-berthBox">
      <div class="theme-card">
        <div class="title"><span>泊位</span></div>
        <div class="content">
          <div class="topBox eleVerHorCenter-flex">
            <span class="eleText">总计</span>
            <div class="eleMarginLeft" v-html="berthTotal"></div>
          </div>
          <div class="bottomBox eleVerHorCenter-flex">
            <div class="bottomBoxLeft"> <div class="berthPie"></div> </div>
            <div class="bottomBoxRight">
              <table class="havefreeTb">
                <tr><td> <div class="free">{{ free }}</div></td><td>  <div class="freeText">空余</div></td></tr>
                <tr><td> <div class="have">{{ have }}</div></td><td>  <div class="haveText">占有</div></td></tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import common from '../../api/common';
    import echarts from 'echarts'

    import { berthAddress, berthAddressDY } from '../../api/api'

    export default {
      name: "berth",
      data() {
        return {

          demo:'',//示例

          berthTotal:"",//泊位总数

          free:'',//空余
          have:'',//占有

          pieChart: {},
          name: '饼图',
          pieChartOption:{
            seriesData:[

              {name:"占有",value:''},
              {name:"空余",value:''}

            ]
          }
        }
      },
      mounted() {

        this.onLoad()

      },
      methods: {

        onLoad() {
          berthAddress({
            orgIds: this.GLOBAL.paramsvariables
          }).then((response)=>{
            let  data = response.data.data
            console.log(data)
            this.berthTotal = common.formatNumToStr(data.allBerthNum)
            this.free = data.freeBerthNum
            this.have = data.isOccupyBertnNum
  
            this.pieChartOption.seriesData[0].value = data.isOccupyBertnNum
            this.pieChartOption.seriesData[1].value = data.freeBerthNum
            let pieChartOption = this.pieChartOption
            //占有率
            this.pieChart=this.createPie(pieChartOption);
            window.addEventListener('resize', function() {
              this.pieChart.resize()
            }.bind(this));
          }).catch((response)=>{
            console.log(response);
          })

  
  
          this.$axios.all(
            [
              berthAddress({ orgIds: this.GLOBAL.paramsvariables}),
              berthAddressDY({ orgIds: this.GLOBAL.paramsvariables})
            ]
          )
          .then(this.$axios.spread((acctWX, acctDY) => {
            let WXdata = acctWX.data.data
            let DYdata = acctDY.data.data
            this.berthTotal = common.formatNumToStr(WXdata.allBerthNum+DYdata.allBerthNum)
            this.free = WXdata.freeBerthNum+DYdata.freeBerthNum
            this.have = WXdata.isOccupyBertnNum+DYdata.isOccupyBertnNum
            this.pieChartOption.seriesData[0].value = WXdata.isOccupyBertnNum+DYdata.isOccupyBertnNum
            this.pieChartOption.seriesData[1].value = WXdata.freeBerthNum+DYdata.freeBerthNum
            let pieChartOption = this.pieChartOption
            //占有率
            this.pieChart=this.createPie(pieChartOption);
            window.addEventListener('resize', function() {
              this.pieChart.resize()
            }.bind(this));
  
          }))
  

        },
        /*
         * 泊位占比
         * */

        createPie(pieChartOption){

          //debugger;

          let root=pieChartOption;

          let pieChart = echarts.init(document.querySelector('.app-berthBox .berthPie'));
          //占有率
          let zyPercent= (root.seriesData[0].value / (root.seriesData[0].value + root.seriesData[1].value));//注意顺序!!!

          console.log(zyPercent)

          let seriesData=root.seriesData;
          const option={
  //          grid: {
  //            top: '0%',left: '0%',
  //            right: '0%',bottom: '0%'
  //          },
            grid: {
              top: 13,left: 10,
              right: 10,bottom: 10,
              containLabel: true
            },
            title: { show:false },
            tooltip: {show:false},
            series: [{
              name: 'pie',type: 'pie',
              center: ['50%', '50%'],
              radius: ['75%', '90%'],
              hoverAnimation: false,
              color: ['#FFB704','#02ABFF'],//占有黄色
              label: {show:false},
              itemStyle: {
                normal: {
                  label: {show: false},
                  labelLine: {show: false},
                  shadowBlur: 40,
                  shadowColor: 'rgba(40, 40, 40,0.5)',
                }
              },
              data: seriesData
            },
            //内环
              {
                name: '', type: 'pie',
                clockWise: true,hoverAnimation: false,
                radius: ['90%', '90%'],
                label: { normal: { position: 'center' }},
                data: [{
                  value: 0,
                  label: {
                    normal: {

                      formatter: (zyPercent*100).toFixed(1) + '%',//小数点后一位

                      textStyle: {
                        color: '#fe8b53',
                        fontSize: 18,
                        fontWeight: 'normal'
                      }
                    }
                  }
                }, {
                  tooltip: {show: false},
                  label: {
                    normal: {
                      formatter: '\n占有',
                      textStyle: {
                        color: '#bbeaf9',fontSize: 12
                      }
                    }
                  }
                }]
              }
            ]
          };
          pieChart.setOption(option);
          return pieChart;
        }
      },
  
    }
  </script>
  
  <style scoped  lang="scss">
    .app-berthBox {
      width: 100%;
    .theme-card{
      height: 100%;
    }
    .berthPie{
      position: absolute;
      margin: 0 auto;
      top:0;
      bottom: 0;
      left:0;
      width: 100%;
      height: 100%;
    }
    .bottomBoxLeft,.bottomBoxRight{
      display: inline-block;
      width: 50%;
      height:100%;
      border:0px solid red;
      position: relative;
    }
    .havefreeTb{
      height:100%;width: 100%;
    }
    .havefreeTb td{
      text-align: center;
      vertical-align: middle;
    }
    .havefreeTb >tr> td:last-child{
      font-size: 12px;text-align: left;
    }
    /*空余*/
    .havefreeTb .free{
      background-image: -webkit-linear-gradient(bottom, #00CAFE, #2772F4);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size: 24px;
    }
    /*占有*/
    .havefreeTb .have{
      background-image: -webkit-linear-gradient(bottom, #FFBA00, #FF8100);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size: 24px;
    }
    .freeText,.haveText{
      margin-top:5px;
    }
    }
  </style>