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

<template>
  <el-col :span="24" class="conferenceRoomStatistics modular" style="padding:10px 20px 0;pointer-event: auto;cursor: pointer;" @click.native="hyClick()">
    <el-col :span="13" class="title" style="margin-left:0" >会议室统计</el-col>
    <el-col :span="12" class="conferenceRoomStatisticsLeft">
      <el-col class="rowN" style="margin-top: 45px;">
        <el-image :src="conferenceRoom" fit="scale-down" />
        <el-col class="name">会议室总数</el-col>
        <!-- <el-col class="num">21<span> 间</span></el-col> -->
        <el-col class="num">{{data.roomTotal}}<span> 间</span></el-col>
      </el-col>
      <el-col class="rowN" >
        <el-image :src="conferenceRoom" fit="scale-down" />
        <el-col class="name">在用会议室</el-col>
        <!-- <el-col class="num">0<span> 间</span></el-col> -->
        <el-col class="num">{{data.roomInUse}}<span> 间</span></el-col>
      </el-col>
    </el-col>
    <div :span="12" style="position: relative;;z-index:10;top:0px;">
      <p class="titleHy">会议室昨日使用情况</p>
      <pie :resData="data" style="margin-top:-10%"/>
    </div>
  </el-col>
</template>
<script>
import axios from 'axios'
import conferenceRoom from "@/assets/images2/会议室统计icon.png";
import pie from "@/components2/conferenceRoomStatistics/pie.vue";
export default {
  name: "conferenceRoomStatistics",
  components: {
  	pie,
  },
  data() {
    return {
      conferenceRoom: conferenceRoom,
      data:{
        roomInUse: undefined,
        attendeeIsSign: undefined,
        attendeeTotal: undefined,
        roomTotal: undefined
      }
    };
  },
  mounted() {
    this.init()
    this.timing()
  },
  methods: {
    init(){
      axios({
        method: 'get',
        url: 'https://smartpark.caih.com/hyxt/api/thirdparty/meetingRoom/summary',
      }).then(res =>{
        if(res.data){
          this.data = res.data
        }
      }).catch(err =>{
      })
    },
    timing(){
      setInterval(() =>{
        this.init()
      },1000 * 60 * 5)
    },
    hyClick(){
      this.$emit("postMsg","会议室")
    }

  },
};
</script>
<style lang="scss" scopet>
@import '@/assets/styles/common.scss';
.conferenceRoomStatisticsLeft {
  width: 50%;
  display: inline-block;
  .rowN {
    margin-top: 28px;
    vertical-align: middle;
    .el-image {
      width: 24px;
      vertical-align: middle;
      float: left;
    }
    .name {
      font-size: 16px;
      margin: 0 12px 0;
      width: auto;
      float: left;
      color:$white2;
    }
    .num {
      font-size: 24px;
      font-family: "DINAlternate-Bold";
      font-weight: 700;
      width: auto;
      float: left;
      margin-top:-5px;
      color:$white;
      span{
        font-size: 16px;
      }
    }
  }
}
.titleHy{
  font-size: 20px;
  margin-top:0px;
}
</style>