IIoT/src/views/bigScreen/home/components/SensorWarningStatistics.vue

<template>
  <div class="item warning-statistics">
    <div class="title">
      <span class="name">传感器预警统计</span>
      <span class="number">{{ total }}</span>
    </div>
    <div class="container">
      <div class="lf">
        <div class="head">
          <div class="head-item">
            <div class="number">{{ data.goafHdangerLevelSeriousNum }}</div>
            <div class="name">危急</div>
          </div>
          <div class="head-item">
            <div class="number">{{ data.goafHdangerLevelMajorNum }}</div>
            <div class="name">危险</div>
          </div>
          <div class="head-item">
            <div class="number">{{ data.goafHdangerLevelGeneralNum }}</div>
            <div class="name">威胁</div>
          </div>
          <div class="head-item">
            <div class="number">{{ data.goafHdangerLevelLowerNum }}</div>
            <div class="name">异常</div>
          </div>
        </div>
        <div class="status">
          <div class="status-item">
            <div class="name">待评审</div>
            <div class="number">{{ data.goafHdangerStatusToforreviewlNum }}</div>
          </div>
          <div class="status-item">
            <div class="name">待整改</div>
            <div class="number">{{ data.goafHdangerStatusTorectifyNum }}</div>
          </div>
          <div class="status-item">
            <div class="name">待验收</div>
            <div class="number">{{ data.goafHdangerStatusToacceptNum }}</div>
          </div>
          <div class="status-item">
            <div class="name">已完成</div>
            <div class="number">{{ data.goafHdangerStatusCompleteNum }}</div>
          </div>
        </div>
      </div>
      <div class="chart-cont">
        <el-progress type="circle" :percentage="rectify_rate" :width="120" color="#2affff" :stroke-width="8">
          <template>
            <span style="color:#fff;font-size: 20px;font-weight: bold;">{{ rectify_rate }}%</span>
          </template>
        </el-progress>
        <p>整改完成率</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SensorWarningStatistics',
  data() {
    return {
      data: {
        'goafHdangerLevelGeneralNum': 0,
        'goafHdangerLevelLowerNum': 0,
        'goafHdangerLevelMajorNum': 0,
        'goafHdangerLevelSeriousNum': 0,
        'goafHdangerStatusCancelNum': 0,
        'goafHdangerStatusCompleteNum': 0,
        'goafHdangerStatusToacceptNum': 0,
        'goafHdangerStatusToforreviewlNum': 0,
        'goafHdangerStatusTorectifyNum': 0,
        'goafHdangerStatusTosubmitNum': 0
      },
      'rectify_rate': 0,
      'total': 0
    }
  },
  methods: {
    loadData(data) {
      const total = data.goafHdangerLevelGeneralNum + data.goafHdangerLevelLowerNum + data.goafHdangerLevelMajorNum + data.goafHdangerLevelSeriousNum
      const rectify_rate = total > 0 ? (data.goafHdangerStatusCompleteNum / total) : 0
      this.data = data
      this.total = total
      this.rectify_rate = parseFloat((rectify_rate * 100).toFixed(1))
    },
    linkTo() {
      this.$router.push({
        path: '/particulars/sensor',
        query: {
          id: '0'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
    height: 22vh !important;
    .chart-cont{
        p{
            color: #fff;
            margin-top: 12px;
            font-size: 14px;
        }
    }
}
</style>