pco/sp-admin/sa-view-sp/console/com-sta-data.vue

<!-- 第一行统计数据 -->
<template>
  <el-row :gutter="14">
    <el-col :lg="4" :sm="8" :xs="24">
      <div class="sa-wnk">
        <img src="../../static/icon/icon-total.png">
        <div class="sa-wnk-tv">
          <p class="sa-wnk-title">今日入场车辆</p>
          <p class="sa-wnk-value">{{ car.todayInCar }}</p>
        </div>
      </div>
    </el-col>
    <el-col :lg="5" :sm="8" :xs="24">
      <div class="sa-wnk">
        <img src="../../static/icon/icon-car-leave.png">
        <div class="sa-wnk-tv">
          <p class="sa-wnk-title">今日离场车辆</p>
          <p class="sa-wnk-value">{{ car.outCar }}</p>
        </div>
      </div>
    </el-col>
    <el-col :lg="5" :sm="8" :xs="24">
      <div class="sa-wnk">
        <img src="../../static/icon/icon-car-in.png">
        <div class="sa-wnk-tv">
          <p class="sa-wnk-title">当前未出车辆</p>
          <p class="sa-wnk-value">{{ car.inCar }}</p>
        </div>
      </div>
    </el-col>
    <el-col :lg="5" :sm="8" :xs="24">
      <div class="sa-wnk">
        <img src="../../static/icon/icon-car-weight.png">
        <div class="sa-wnk-tv">
          <p class="sa-wnk-title">当前未出重车</p>
          <p class="sa-wnk-value">{{ car.weightCar }}</p>
        </div>
      </div>
    </el-col>
    <el-col :lg="5" :sm="8" :xs="24">
      <div class="sa-wnk">
        <img src="../../static/icon/icon-car-empty.png">
        <div class="sa-wnk-tv">
          <p class="sa-wnk-title">当前未出空车</p>
          <p class="sa-wnk-value">{{ car.emptyCar }}</p>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
module.exports = {

  data() {
    return {
      // 统计数据
      car: {
        todayInCar: 0,
        inCar: 0,
        outCar: 0,
        weightCar: 0,
        emptyCar: 0
      },
      timmer: null
    }
  },
  methods: {
    getCarStatics() {
      sa.ajaxNoLoading('/TbBusinessCar/staticsCar', function (resp) {
        this.car = resp.data;
      }.bind(this))
    },
	checkTimeout() {
	  sa.ajaxNoLoading('/AccAdmin/checkTimeout', function (resp) {
		  if(resp.code==405){
			  window.open('../../login.html');
		  }
	  }.bind(this))
	},

  },
  created() {
    this.getCarStatics();
    this.timmer = setInterval(() => {
      this.getCarStatics();
	  this.checkTimeout();
    }, 20000)
  },
  beforeDestroy() {
    if (this.timmer != null) {
      clearInterval(this.timmer);
    }
  }

}
</script>

<style scoped>
/* 第一行 */
.sa-wnk {
  background-color: #FFF;
  border: 1px #ddd solid;
  margin-bottom: 14px;
  min-height: 100px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}

.sa-wnk:hover {
  box-shadow: 0 0 20px #999;
}

.sa-wnk img {
  float: left;
  line-height: 100px;
  margin: 25px 0px 0 20px;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

.sa-wnk .sa-wnk-tv {
  float: left;
  margin-left: 10px;
  max-width: calc(100% - 100px);
}

.sa-wnk-title {
  margin-top: 25px;
  font-size: 16px;
}

.sa-wnk-value {
  margin-top: 4px;
  font-size: 24px;
  padding-bottom: 20px;
}
</style>