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'
export default {
  name: 'VHome',
  components: {
    VHeader,
    VMap,
    VParking,
    VToll,
    VInout,
    VIncome,
    VBerth,
    VEquipment
  },
  data(){
    return {
      parkingTotal: 319706,
      rodeside: 2345,
      rodeclose: 23,
      tollTotal: 23454,
      tollsign: 12309,
      tollnosign: 2130,
      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:123213,
      barChartData:{
        seriesData:[2000,200,300],
        total:2500
      },
      bertotal:28839,
      pieChartData: {
        yData: [21321,13311],
        legendData: ['空余','占有']
      },
      equipment:{
        PDA:150,
        PDATotal:3000,
        berth:150,
        berthTotal:2300,
        daozha:150,
        daozhaTotal:1300,
        ydp:150,
        ydpTotal:300
      },
      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.$nextTick(function () {
    //   this.setmethod()
    // })
    var self = this
    var t =setInterval(()=>{
      self.parkingTotal  ++
      console.log(self.parkingTotal)
    },1000)
  },
  methods:{
    setmethod(){
      setInterval(()=>{
        this.parkingTotal ++
        console.log(this.parkingTotal)
      },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>