YNUtdPlatform/pages/workPlan/index/components/day-risk-view.vue

<template>
  <view class="day-risk">
    <h2>日风险概况</h2>
    <view class="data-container">
      <view class="left-content">
        <text>本月风险数</text>
        <text>{{ monthNum }}</text>
        <text>累计总数： {{ monthNum }}</text>
      </view>
      <view class="left-right">
        <text>本周风险数</text>
        <text>{{ weekNum }}</text>
        <text>累计总数： {{ weekAmount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getTitleRiskApi } from '../../../../api/workPlan/homePage'
export default {
  data() {
    return {
      monthNum: 0,
      monthAmount: 9520,
      weekNum: 0,
      weekAmount: 0
    }
  },
  methods: {
    async getRiskNumData() {
      const res = await getTitleRiskApi()
      console.log('风险数据---', res)

      if (res.resMsg == '数据获取成功') {
        res.obj.list.forEach(e => {
          if (e.type == 'm') {
            this.monthNum = e.num
          }
          if (e.type == 'w1') {
            this.weekNum = e.num
          }
          if (e.type == 'w2') {
            this.weekAmount = e.num
          }
        })
      }
    }
  },
  mounted() {
    this.getRiskNumData()
  }
}
</script>

<style lang="scss" scoped>
.day-risk {
  h2 {
    padding: 18rpx 0;
    font-size: 34rpx;
  }
  .data-container {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 26rpx;
    view {
      width: 49%;
      height: 180rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      text {
        text-align: left;
        padding-left: 20rpx;
      }

      text:nth-child(2) {
        font-weight: bold;
        font-size: 36rpx;
      }
    }
    .left-content {
      background: url('../../../../static/images/workPlan/month_img.png') no-repeat;
      background-size: 100% 100%;
    }
    .left-right {
      background: url('../../../../static/images/workPlan/week_img.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>