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" :lonId="lonId" :latId="latId"></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, inoutAddress } 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,

        inoutmsgstatus:'',
        inoutmsg: '07:00',

        inouttime: '',

        lonId:'',
        latId:'',

        imgUrl: '',

        incometotal:0,

        barChartData:{

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

        },

        bertotal:0,

        pieChartData: {

          yData: [0,0],

          legendData: ['空余','占有']
        },
        equipment:{

          PDA:0,
          PDATotal:0,
          pdaper:0,
          berth:0,
          berthTotal:0,
          berthper:0,
          daozha:0,
          daozhaTotal:0,
          daozhaper:0,
          ydp:0,
          ydpTotal:0,
          ydpper:0

        },
        ditudata:[

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

        ]
  
      }
    },
    mounted(){

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

      this.initMAp();

      this.setmethod()

  
    },
    methods:{

      initMAp(){
        mapAddress({//地图
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data
          console.log(data)
          var tempData = [];
          for(var index in data){
            var item = data[index];
            if(item.parkInfo.lonId==null){
              continue;
            }
            var tempItem =
              {
                Name: item.parkInfo.plName,
                lonId: item.parkInfo.lonId,
                latId:item.parkInfo.latId,
                status: 0,
                freeBrethNum: item.realTimeInfoDTO.berthFreeNum,
                plBerthNum: item.realTimeInfoDTO.berthNum,
                plName: item.parkInfo.plName,
                plAddress: item.parkInfo.plAddress,
                income:(item.realTimeInfoDTO.allIncome/100).toFixed(2),
                arreageincome:(item.realTimeInfoDTO.escapeFee).toFixed(2)
              }
            tempData.push(tempItem);
  
  
          }
  
          this.ditudata = tempData;
          console.log(this.ditudata)
          // 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'}
          // ]
        }).catch((response)=>{
          console.log(response);
        })
      },

      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);
        })
  

        inoutAddress({//进出场

          orgIds: this.GLOBAL.orignId

        }).then((response)=>{
          let  data = response.data.data
          console.log(response)
          let inoutdata = data[0]

          console.log(inoutdata)

          if(inoutdata.parkState == 10){
            inoutdata.parkState = "进场"
            this.inouttime = inoutdata.parkInTime
            this.imgUrl = inoutdata.inCarUrl
          }else{
            inoutdata.parkState = "出场"
            this.inouttime = inoutdata.parkOutTime
            this.imgUrl = inoutdata.outCarUrl
          }
          this.inoutmsg = inoutdata.plName+'   '+inoutdata.carNumber +' '+inoutdata.parkState

          if(this.inoutmsgstatus === this.inoutmsg){
            // console.log('123')
            // this.lonId='103.9052876830101',
            //   this.latId='36.05714229337221',
            // this.ditudata=[
            //   {Name:'万达停车场1',lonId:'103.9052876830101',latId:'36.05714229337221',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1',income:123, arreageincome:123},
            //   // {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2',income:123, arreageincome:123},
            //   // {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3',income:123, arreageincome:123}
            // ]
            //this.initMAp();
  
          }else{
            this.initMAp();
            this.inoutmsgstatus = inoutdata.plName+'   '+inoutdata.carNumber +' '+inoutdata.parkState
          }
  

  
        }).catch((response)=>{
          console.log(response);
        })
  

        incomeAddress({//收入
          orgIds: this.GLOBAL.orignId
        }).then((response)=>{
          let  data = response.data.data

          this.incometotal = (data.totalPay/100).toFixed(0)

          this.barChartData = {

            seriesData:[(data.aliPay/100).toFixed(0),(data.wxPay/100).toFixed(0),(data.otherPay/100).toFixed(0)],
            total:(data.totalPay/100).toFixed(0)

          }

        }).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

          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[2].onNum/data[2].num)*100).toFixed(2)

          }
  

          if(data[3].onNum == 0){

            var ydpper = 0
          }else{

            var ydpper = ((data[3].onNum/data[3].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',daozhaper)

  
          this.$set(this.equipment,'ydp',data[3].onNum)
          this.$set(this.equipment,'ydpTotal',data[3].num)

          this.$set(this.equipment,'ydpper',ydpper)

          // 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.initView()

        },1000)
        // setInterval(()=>{
        //   this.initMAp();
        // },5000)

      }

    },
  

  }
  </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>