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>