<template>
  <div class="en-safe">
      <div class="envir">
          <p class="info">环境</p>
           <div>
             <sgy-healthy-index width="65px" :colors="colors" :innerValue="innerValue"
              :outerValue="outerValue" :innerTdb="innerTdb" :innerRH="innerRH" :innerPM="innerPM" :innerC="innerC"></sgy-healthy-index>
           </div>
      </div>
      <!-- 安全 -->
      <div class="safe">
          <p class="info">安全</p>
          <p class="heal-index"> 安全综合评分</p>
          <div class="my-echarts">
              <i-Circle :percent="grade">
                <span class="demo-Circle-inner" style="font-size:32px">{{grade}}<i style="font-size: 14px;color: #8C94A9;">分</i> </span>
             </i-Circle>
          </div>
      </div>

  </div>
</template>

<script>
import axios from "axios";
var echarts = require("echarts");
import sgyHealthyIndex from "./SgyHealthyIndex.vue";
export default {
  components: {
    sgyHealthyIndex
  },

  mixins: [],

  props: {},

  data() {
    return {
      colors: ["#F78686", "#FABA53", "#73DA99", "#4A9EF9"],
      innerTdb: 0,
      innerRH: 0,
      innerPM: 0,
      innerC: 0,
      innerValue:55,
      outerValue:70,
      grade:0,
    };
  },

  computed: {},

  mounted() {
    this.getData();
    this.getSafetyMark();
  },

  methods: {
    //环境
    getData() {
      axios
        .get(`/enviroment/info-mng-backend/env/index?projectId=${this.$store.state.projectId}`)
        .then(res => {
          if (res.data.result == "success") {
            let data =  res.data.data
            this.innerTdb =data.indoorAverage.Tdb;
            this.innerRH = data.indoorAverage.RH;
            this.innerPM =data.indoorAverage.PM25;
            this.innerC = data.indoorAverage.CO2;
          }
        });
    },
    //安全
    getSafetyMark(){
      axios.get(`/equipment/info-mng-backend/safe/index?projectId=${this.$store.state.projectId}`).then(res=>{
        let data = res.data.data;
        this.grade = data.grade;
      })
    },
  }
};
</script>

<style scoped lang="less" >
.en-safe {
  min-width: 360px;
  //font-size: 14px;
  display: flex;
  flex-direction: column;
  .envir {
    border: 1px solid #ebecf0;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    .info {
      height: 50px;
      line-height: 50px;
      background: #f7f9fc;
      border: 0 solid #f2f2f2;
      padding-left: 20px;
      font-weight: bolder;
      font-size: 18px;
      color: #3b4254;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    > div {
      margin-bottom: 20px;
    }
  }
  .safe {
    border: 1px solid #ebecf0;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    flex:1;
    .info {
      height: 50px;
      line-height: 50px;
      background: #f7f9fc;
      border: 0 solid #f2f2f2;
      padding-left: 20px;
      font-weight: bolder;
      font-size: 18px;
      color: #3b4254;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .heal-index {
      padding-left: 20px;
      padding-top: 20px;
      color: #3b4254;
    }
    .my-echarts {
      text-align: center;
      padding: 20px 0 20px 0;
    }
  }
}
</style>
