<template>
  <div class="app-tollmanBox">
    <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="tollmanTotal"></div>
        </div>
        <div class="bottomBox">
          <table class="tollmanTb">
            <tr>
              <td>
                <div class="onDutyImg eleVerHorCenter-tableCell"></div>
                <div class="onDutyInfo eleVerHorCenter-tableCell"><span>{{onDutyNum}}</span><div>值班</div> </div> </td>
              <td>
                <div class="noDutyImg eleVerHorCenter-tableCell"></div>
                <div class="noDutyInfo eleVerHorCenter-tableCell"><span>{{noDutyNum}}</span><div>未值班</div> </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../../api/common';
  import echarts from 'echarts'
    export default {
      name: "tollman",
      data() {
        return {
          demo:'',//示例 总数
          tollmanTotal:"",//收费员总数html
          onDutyNum:254,//值班
          noDutyNum:154,//未值班
          name: '折线图'
        }
      },
      mounted() {
        //this.createLine();
        //收费员总数

        this.axios.post('urban/intelligence/employee/queryEmployeeStaByOrgIds',{
          orgIds: this.GLOBAL.paramsvariables
        }).then((response)=>{
          let  data = response.data.data
          this.tollmanTotal = data.allTollCollector
          this.tollmanTotal = common.formatNumToStr(this.tollmanTotal);
          this.onDutyNum = data.signInTollCollector
          this.noDutyNum = data.unSignInTollCollector
        }).catch((response)=>{
          console.log(response);
        })
      },
      methods: {
        /*
         * 格式化会员总数
         * */
        formatNumToStr:function(){
          return common.formatNumToStr(this.$options.data().demo);
        },
      },

    }
</script>

<style scoped  lang="scss">
  .app-tollmanBox {
    width: 100%;
    .theme-card{
      height: 100%;
    }
  .tollmanTb{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .tollmanTb >tr>td{
    width: 50%;
    vertical-align: middle;
    text-align: center;
  }
  .onDutyImg{
    background: url(../../images/com/onDuty.svg) no-repeat;
    background-size: 100% 100%;
    /*width: 50%;*/
    /*height: 60%;*/
    display: inline-block;

    width:45%;
    height:0;
    padding-bottom: 40%;
    margin: auto;
  }
  .onDutyInfo,.noDutyInfo{
    display: inline-block;
  }
  .onDutyInfo >span{
    background-image: -webkit-linear-gradient(bottom, #00CAFE, #2772F4);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  .onDutyInfo >div,.noDutyInfo>div{
    font-size: 12px;text-align: left;
  }
  .noDutyImg{
    background: url(../../images/com/noDuty.svg) no-repeat;
    background-size: 100% 100%;
    /*width: 50%;*/
    /*height: 60%;*/
    display: inline-block;
    /*等比例压缩*/
    width:45%;
    height:0;
    padding-bottom: 40%;
    margin: auto;
  }
  .noDutyInfo>span{
    background-image: -webkit-linear-gradient(bottom, #FFBA00, #FF8100);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  }
</style>
