<template>
  <div class="page page-home" style="min-height: 100vh">
  

  <el-row :gutter="10" >
  <el-row style="margin-left:50px;margin-right:50px" type="flex" justify="end"  :gutter="10"  >
  <el-button   type="text">数据更新:{{ statData.updateTime}}</el-button>
  <el-button  icon='el-icon-refresh'  type="text">手动刷新</el-button>

  </el-row>
 
      <el-card style="margin-left:50px;margin-right:50px;margin-top:10px">
          
        <el-col :span="3" >
          <span style="font-size:20px"><b>{{ statData.deviceTotalCount}}</b></span>
            <el-row><span style="font-size:14px">昨日 {{ statData.deviceAddCount}}</span></el-row>
            <el-button  icon='el-icon-mobile' type="text">设备总数</el-button>
            <!-- <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">设备总数</span></el-row> -->
        </el-col>
         <el-col :span="3" >
          <el-row><span style="font-size:20px"><b>{{ statData.siteTotalCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">昨日 {{ statData.siteAddCount}}</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:13px">监控站点数</span></el-row>
        </el-col>
         <el-col :span="3" >
          <el-row><span style="font-size:20px"><b>{{ statData.deviceOnlineCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">昨日 {{ statData.deviceOnlineRatio}}</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">在线设备</span></el-row>
        </el-col>
         <el-col :span="3">
          <el-row><span style="font-size:20px"><b>{{ statData.deviceOfflineCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">在线率 {{ statData.deviceOfflineRatio*100}}%</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">离线设备</span></el-row>
        </el-col>
         <el-col :span="3" >
          <el-row><span style="font-size:20px"><b>{{ statData.deviceStopRatio}}</b></span></el-row>
            <el-row><span style="font-size:14px">停用率 {{ statData.deviceStopRatio}}</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">停用设备</span></el-row>
        </el-col>
         <el-col :span="3" >
          <el-row><span style="font-size:20px"><b>{{ statData.alarmTotalCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">昨日 {{ statData.alarmAddCount}}</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">今日告警次数</span></el-row>
        </el-col>
         <el-col :span="3" >
          <el-row><span style="font-size:20px"><b>{{ statData.pushTotalCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">昨日 {{ statData.pushAddCount}}</span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">今日消息推送</span></el-row>
        </el-col>
         <el-col :span="3" >
           <el-row><span style="font-size:14px">今日下发命令 <b>{{ statData.uploadMessageTotalCount}}</b></span></el-row>
            <el-row><span style="font-size:14px">今日下发命令 <b>{{ statData.downloadMessageTotalCount}}</b></span></el-row>
            <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">数据获取</span></el-row>
        </el-col>
        
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  computed: {
    userData() {
      return this.$store.state.userData.currUserName;
    },
  },
  created() {
      let query={year:2022,month:7,day:5}
      //查询今日设备统计
      this.loading=true;
     this.$post("/device/stat/list", query)
        .then((res) => {
          if (res.code == 1) {
            console.log("res",res)

            this.statData=res.data.data[0]

            console.log("statData",this.statData)


          }
          this.loading=false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
       
  },
  data() {
    return {
      loading: false,
      indexStatInfo: {},
      recordListLoading: false,
      statData: {},
      dayProjectList: [],
      pendList: [],
      weekPerDay: {
        xData: [],
        yData: [],
      },
      dict: {},
      value: new Date(),
    };
  },
};
</script>

