src/view/VHome.vue

<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, mapAddress } 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);
      })
      mapAddress({//地图
        orgIds: this.GLOBAL.orignId
      }).then((response)=>{
        let  data = response.data.data
        console.log(response)
      }).catch((response)=>{
        console.log(response);
      })
      equipmentAddress({//设备
        orgIds: this.GLOBAL.orignId
      }).then((response)=>{
        let  data = response.data.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
        // }
      }).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>