SD-party-school/src/components/SD-school/parking-lot/index.vue

<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
         停车场统计
      </el-col>
    </el-row>
    <el-row class="carNumber">
      <el-col class="carLot">
        <el-col>
          <img src="../../../assets/image/car2.png" alt="" />
        </el-col>
        <el-col class="carNumbderLot">
          <span class="green">{{resList && resList.totalNum || 0}}</span>
          <span>车位总数</span>
        </el-col>
      </el-col>
      <el-col class="carLot">
        <el-col>
          <img src="../../../assets/image/car1.png" alt="" />
        </el-col>
        <el-col class="carNumbderLot">
          <span class="yellow">{{resList && resList.tiatlFreeNum || 0}}</span>
          <span>空闲车位总数</span>
        </el-col>
      </el-col>
    </el-row>
    <el-row class="carLine">
      <div ref="echartD" style="width:100%;height:100%;"></div>
    </el-row>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import echartsGet from './echart'
import { parkingLotApi2 } from "@/plugins/api"
export default {
  props:['resInfo', 'websocket'],
  data() {
    return {
      resList: [],
	    resList2: [],
    };
  },
  watch: {
    "$store.state.windowWidth"() {
      echarts.init(this.$refs.echartD).resize();
    },
    resInfo(){
      this.getData()
    },
    websocket(){
      this.getData()
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    async getData(){
      if(this.websocket.data){
        this.resList=this.websocket.data
      }else{
        this.resList=this.resInfo
      }
        var myDate = new Date();
        let tYear = myDate.getFullYear();
        let tMonth = myDate.getMonth() + 1;
        let lastDay= new Date(tYear,tMonth,0).getDate()
        this.month = tMonth
        let day = myDate.getDate(); //获取当前日(1-31)
        let hours = myDate.getHours(); //获取当前小时数(0-23)
        let minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
        let seconds = myDate.getSeconds(); //获取当前秒数(0-59)
        // this.year = tYear + '年'
        if(tMonth<10){
          tMonth = '0' + tMonth
          this.monthParameter = tMonth
        }else{
          this.monthParameter = tMonth
        }
        if(day<10){
          day = '0' + day
        }else{
          day =  day
        }
        if(minutes<10){
          minutes = '0' + minutes
        }else{
          minutes =  minutes
        }
        if(seconds<10){
          seconds = '0' + seconds
        }else{
          seconds =  seconds
        }
        let startTime = tYear + '-' + tMonth + '-' + day + ' ' + "00:00:00"
        let endTime = tYear + '-' + tMonth + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        parkingLotApi2({startTime:startTime,endTime:endTime}).then(res =>{
          echarts.init(this.$refs.echartD).setOption(echartsGet(res.data))
        })
	},
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  }
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  font-family: Impact Regular, Impact Regular-Regular;
  .carLine {
    flex: 1;
    width: 100%;
  }
  .carNumber {
    height: 90px;
    padding: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > .el-col {
      flex: 1;
      height: 100%;
    }
    .carLot {
      display: flex;
      justify-content: center;
      .el-col {
        width: auto;
      }
      .carNumbderLot {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 10px;
        span {
          display: block;
        }
        & span:first-child{
          font-size: 28px;
        }
        & span:last-child{
          font-size: 16px;
          color: #DEF1FF;
        }
      }
    }
  }
}
</style>