BJ_web_developers / lzsandtable

  <template>

    <div class="main-content">

      <v-header></v-header>
      <ul class="main-wrap">

        <li class="main-left">

          <div class="frame-wrap">

            <v-parking :total="parkingTotal" :rodeside="rodeside" :rodeclose="rodeclose"></v-parking>

          </div>

          <div class="frame-wrap frame-wrap-center">

            <v-toll :total="tollTotal" :tollsign="tollsign" :tollnosign="tollnosign"></v-toll>

          </div>

          <div class="frame-wrap">

            <v-inout :inoutmsg="inoutmsg" :inouttime="inouttime" :imgUrl="imgUrl"></v-inout>

          </div>

        </li>

        <li class="main-center">

          <v-map :mapdata="ditudata"></v-map>

        </li>

        <li class="main-right">

          <div class="frame-wrap">

            <v-income :total="incometotal" :barChartData="barChartData"></v-income>

          </div>

          <div class="frame-wrap frame-wrap-center">

            <v-berth :total="bertotal" :pieChartData="pieChartData"></v-berth>

          </div>

          <div class="frame-wrap">

            <v-equipment :equipment="equipment"></v-equipment>

          </div>

        </li>

      </ul>
    </div>

  </template>
  
  <script>

  import VHeader from '../components/VHeader'
  import VMap from '../components/VMap'

  import VParking from '../components/VParking'

  import VToll from '../components/VToll'

  import VInout from '../components/VInout'

  import VIncome from '../components/VIncome'

  import VBerth from '../components/VBerth'

  import VEquipment from '../components/VEquipment'

  
  import { parkAddress, tollAddress, incomeAddress, berthAddress, equipmentAddress } from '../utils/api'
  

  export default {

    name: 'VHome',
    components: {
      VHeader,

      VMap,

      VParking,

      VToll,

      VInout,

      VIncome,

      VBerth,
      VEquipment

    },
    data(){
      return {

        parkingTotal: 0,
        rodeside: 0,
        rodeclose: 0,
        tollTotal: 0,
        tollsign: 0,
        tollnosign: 0,

        inoutmsg: '万达广场停车场1  京A231231',
        inouttime: '08:00',
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg',

        incometotal:0,

        barChartData:{

          seriesData:[0,0,0],
          total:1

        },

        bertotal:0,

        pieChartData: {

          yData: [0,0],

          legendData: ['空余','占有']
        },
        equipment:{
          PDA:150,
          PDATotal:3000,

          pdaper:100,

          berth:150,
          berthTotal:2300,

          berthper:100,

          daozha:150,
          daozhaTotal:1300,

          daozhaper:100,

          ydp:150,

          ydpTotal:300,
          ydpper:100

        },
        ditudata:[
          {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
          {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
          {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
        ]
  
      }
    },
    mounted(){

      //this.setmethod()
      this.initView();
      //this.setmethod()
  

  
    },
    methods:{

      initView(){
        parkAddress({//停车场
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data
          this.parkingTotal = data.allNum
          this.rodeside = data.lcNum
          this.rodeclose = data.fbNum
        }).catch((response)=>{
          console.log(response);
        })
        tollAddress({//收费员
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data
          this.tollTotal = data.allTollCollector
          this.tollsign = data.signInTollCollector
          this.tollnosign = data.unSignInTollCollector
        }).catch((response)=>{
          console.log(response);
        })
  
        incomeAddress({//收入
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data
          this.incometotal = data.totalPay
          this.barChartData = {
            seriesData:[data.aliPay,data.wxPay,data.otherPay],
            total:1
          }
  
        }).catch((response)=>{
          console.log(response);
        })
  
        berthAddress({//泊位
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data
          this.bertotal = data.allBerthNum
          this.pieChartData = {
            yData: [data.freeBerthNum,data.isOccupyBertnNum],
  
          }
  
        }).catch((response)=>{
          console.log(response);
        })
  
        equipmentAddress({//设备
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data

          console.log(data)
          if(data[0].onNum == 0){
            var PDAper = 0
          }else{
            var PDAper = ((data[0].onNum/data[0].num)*100).toFixed(2)
          }
  
          if(data[1].onNum == 0){
            var berthper = 0
          }else{
            var berthper = ((data[1].onNum/data[1].num)*100).toFixed(2)
          }

          if(data[2].onNum == 0){
            var daozhaper = 0
          }else{
            var daozhaper = ((data[1].onNum/data[1].num)*100).toFixed(2)
          }
  
          if(data[2].onNum == 0){
            var ydpper = 0
          }else{
            var ydpper = ((data[1].onNum/data[1].num)*100).toFixed(2)
          }
  
  

          this.$set(this.equipment,'PDA',data[0].onNum)

          this.$set(this.equipment,'PDATotal',data[0].num)
          this.$set(this.equipment,'pdaper',PDAper)

          this.$set(this.equipment,'berth',data[1].onNum)
          this.$set(this.equipment,'berthTotal',data[1].num)
          this.$set(this.equipment,'berthper',berthper)

  
          this.$set(this.equipment,'daozha',data[2].onNum)
          this.$set(this.equipment,'daozhaTotal',data[2].num)
          this.$set(this.equipment,'daozhaper',berthper)
  
          this.$set(this.equipment,'ydp',data[3].onNum)
          this.$set(this.equipment,'ydpTotal',data[3].num)
          this.$set(this.equipment,'ydpper',berthper)

          // this.equipment = {
          //   PDA:data[0].onNum,
          //   PDATotal:data[0].num,
          //   berth:150,
          //   berthTotal:2300,
          //   daozha:150,
          //   daozhaTotal:1300,
          //   ydp:150,
          //   ydpTotal:300
          // }
          console.log(this.equipment)
  
        }).catch((response)=>{
          console.log(response);
        })
  
  
  
  
      },

      setmethod(){

        setInterval(()=>{

          this.parkingTotal++
          this.rodeside++

        },1000)
      }

    }

  }
  </script>
  

  <style scoped lang="scss">
    .main-content{
      width: 100%;
      height: 100%;
    }
    .main-wrap{
      height: calc(100% - 65px);
      padding: 10px 10px;
      li{
        float: left;
        height: 100%;
      }
    }
    .main-left,.main-right{

      width: 25%;
    }
    .main-center{
      width: calc(50% - 20px);
      margin: 0 10px;
      border:1px solid #1679de;
    }

    .frame-wrap-center{
      margin: 10px 0;
    }
    .frame-wrap{
      height: calc((100% - 20px)/3);

      background: url("../images/content/frame-wrap.png");
      background-size: 100% 100%;

      overflow: hidden;

      /*border-image-source: url("../images/content/frame-wrap.png");*/
      /*border-image-slice: 3 16 11 3 fill;*/
      /*border-width: 3px 18px 11px 3px;*/
      /*border-style: solid;*/
      /*background-clip: border-box;*/

    }

  
  </style>