BJ_web_developers / cityOperationCenter

  <template>
    <div class="app-deviceBox">
      <div class="theme-card">
        <div class="title"><span>设备</span></div>
        <div class="content">
          <table class="deviceTb">
            <tr>
              <td style="padding: 0 7px 0 15px;">
                <div class="deviceBg eleVerHorCenter-box">
                  <table class="PDAcontent">
                    <tr><td><span>{{PDANum}}</span> </td></tr>

                    <tr><td><div>{{PDAName}}</div></td></tr>

                  </table>
                </div>
                <div class="deviceBg eleVerHorCenter-box marginTop">
                  <table class="daoZhacontent">

                    <tr><td><span>{{daoZhaNum}}</span> </td></tr>
                    <tr><td><div>{{daoZhaName}}</div></td></tr>

                  </table>
                </div>
              </td>
              <td style="padding: 0 15px 0 7px;">
                <div class="deviceBg eleVerHorCenter-box">
                  <table class="diCicontent">
                    <tr><td><span>{{diCiNum}}</span> </td></tr>

                    <tr><td><div>{{diCiName}}</div></td></tr>

                  </table>
                </div>
                <div class="deviceBg eleVerHorCenter-box marginTop">
                  <table class="youDaocontent">
                    <tr><td><span>{{youDaoNum}}</span> </td></tr>

                    <tr><td><div>{{youDaoName}}</div></td></tr>

                  </table>
                </div>
              </td>
            </tr>
          </table>

        </div>
      </div>
    </div>
  </template>
  
  <script>

  import { deviceAddress } from '../../api/api'

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

          PDANum:'',//PDA数

          PDAName:'',

          diCiNum:'',//地磁数

          diCiName:'',

          daoZhaNum:'',//道闸数

          daoZhaName:'',

          youDaoNum:'',//诱导屏

          youDaoName:'',

          name: '设备'
        }
      },
      mounted() {

        this.onLoad()

      },
      methods: {

        onLoad() {
          deviceAddress({orgIds: this.GLOBAL.paramsvariables}).then((response)=>{
            let  data = response.data.data

            console.log(data)

            this.PDANum = data[0].num
            this.PDAName = data[0].deviceName
            this.diCiNum = data[1].num
            this.diCiName = data[1].deviceName
            this.daoZhaNum = data[2].num

            this.daoZhaName = data[2].deviceName
            this.youDaoNum = data[3].num

            if(this.youDaoNum == 0){
              this.youDaoNum = '-'
            }

            this.youDaoName = data[3].deviceName
          }).catch((response)=>{
            console.log(response);
          })
        }

      },
    }
  </script>
  
  <style scoped  lang="scss">
    .app-deviceBox {
      width: 100%;
    .theme-card{
      height: 100%;
    }
    .content{
      padding: 0px;
    }
    .marginTop{
      margin-top: 8% !important;
    }
    .deviceTb{
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }
    .deviceTb >tr >td{
      vertical-align: middle;
      text-align: center;
      width: 50%;
    }
    .deviceBg{
      background: url(../../images/com/deviceBg.svg) no-repeat;
      background-size: 100% 100%;
      width: 100%;
      /*height:85%;*/
      margin:0px auto;
      /*padding: 5px;*/
      height: 40%;
  
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
    .PDAcontent,.diCicontent,.daoZhacontent,.youDaocontent{
      margin: 0 auto;
    }
    .PDAcontent div,.diCicontent div,.daoZhacontent div,.youDaocontent div{
      font-size: 12px;
    }
    .PDAcontent span,.diCicontent span{
      background-image: -webkit-linear-gradient(bottom, #00CAFE, #2772F4);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size: 24px;
    }
    .daoZhacontent span,.youDaocontent span{
      background-image: -webkit-linear-gradient(bottom, #FFBA00, #FF8100);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size: 24px;
    }
    }
  </style>