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: '',

      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
      },
      lonId:'',
      latId:'',
      ditudata:{
        lonId:'',
        latId:'',
        data:[
          {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];
          //console.log(item.parkInfo.plName)
          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.data = tempData;
        this.$set(this.ditudata,'data',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

        this.tollTotal = 36
        this.tollsign = 28
        this.tollnosign = 8
      }).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.parkState)
        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){

        }else{
          this.initMAp();
          this.inoutmsgstatus = inoutdata.plName+'   '+inoutdata.carNumber +' '+inoutdata.parkState
        }
        // lonId:'',
        //   latId:'',
        //console.log(this.ditudata)
        this.$set(this.ditudata,'lonId',inoutdata.lonId)
        this.$set(this.ditudata,'latId',inoutdata.latId)
      }).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',80)
        this.$set(this.equipment,'PDATotal',90)
        this.$set(this.equipment,'pdaper',((80/90)*100).toFixed(2))

        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,'daozha',2)
        this.$set(this.equipment,'daozhaTotal',2)
        this.$set(this.equipment,'daozhaper',((2/2)*100).toFixed(2))
        //
        // this.$set(this.equipment,'ydp',data[3].onNum)
        // this.$set(this.equipment,'ydpTotal',data[3].num)
        // this.$set(this.equipment,'ydpper',ydpper)

        this.$set(this.equipment,'ydp',7)
        this.$set(this.equipment,'ydpTotal',9)
        this.$set(this.equipment,'ydpper',((7/9)*100).toFixed(2))


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