DX-LargeScreen/src/components2/populationStatistics/index.vue

<template>
  <el-col :span="24" class="populationStatistics modular" style="padding:10px 20px 0;" v-loading="loading">
    <el-col class="title" style="margin-left:0;">今日人流量统计</el-col>
    <el-col class="subtitle"
      >今日人流量统计：<strong>{{
        populationStatisticsList.num
      }}</strong><span> 人/次</span></el-col
    >
    <echartsZXT
      v-if="status"
      :resData="populationStatisticsList.data"
      style="width: 100%; height: 100%;"
      alt="折线图"
    />
  </el-col>
</template>
<script>
import axios from 'axios'
import echartsZXT from "@/components2/populationStatistics/echartsZXT.vue";
export default {
  name: "populationStatistics",
  components: {
    echartsZXT,
  },
  data() {
    return {
      populationStatisticsList: {
        //今日流量
          num: undefined,
          data: [
            [],[]
          ],
      },
      status:false,
      loading:true
    };
  },
  watch: {},
  created(){
    this.init()
    this.timing()
  },
  mounted() {
    
  },
  methods: {
    async init(){
      await axios({
        method: 'get',
        url: 'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/yunUserRequest',
        timeout: 10000,
      }).then(res =>{
          let total = 0
          if(res.data){
            this.populationStatisticsList.data.num = 0
            this.populationStatisticsList.data[0] = []
            this.populationStatisticsList.data[1] = []
            for(let i = 0; i<res.data.length; i++){
              this.populationStatisticsList.data[0].push(res.data[i].access_time)
              this.populationStatisticsList.data[1].push(res.data[i].card_number)
              total += res.data[i].card_number
            }
            this.populationStatisticsList.num = total
            setTimeout(()=>{
              this.status = true
              this.loading = false
            },20)
            
          }
      }).catch(err =>{
      })
    },
    timing(){
      setInterval(() =>{
        this.init()
      },1000 * 60 * 5)
    }
  },
};
</script>

<style lang="scss" scoped>
.subtitle {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 16px;
  text-align: right;
  strong {
    font-size: 20px;
    font-family: "DINAlternate-Bold";
    font-weight: 700;

  }
}
</style>