YNUtdPlatform/pages/workPlan/index/components/home-notice-bar.vue

<template>
  <view class="notice-container">
    <!-- <uni-notice-bar :showClose="showClose" :showIcon="showIcon" scrollable :text="noticeContent" /> -->
    <image class="warning-img" src="../../../../static/images/img-phase-two/index_news.png" mode=""></image>
    <text>今日风险</text>
    <view class="uni-notice-bar">
      <uni-notice-bar
        style="height: 100%"
        :speed="50"
        scrollable
        :text="noticeContent"
        :showClose="showClose"
        :showIcon="showIcon"
      ></uni-notice-bar>
    </view>
  </view>
</template>

<script>
import { getTitleRiskApi } from '../../../../api/workPlan/homePage'
export default {
  props: {
    // /* 提示内容 */
    // noticeContent: {
    //   type: String,
    //   default: '中风险：35   低风险：153  可接收风险：153 高风险：126'
    // },
    /* 是否显示关闭按钮 */
    showClose: {
      type: Boolean,
      default: false
    },
    /* 是否显示提示图标 */
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      kjs: 0,
      dfx: 0,
      zfx: 0,
      gfx: 0,
      tfx: 0
    }
  },
  computed: {
    noticeContent() {
      const amount = this.kjs + this.dfx + +this.zfx + this.gfx + this.tfx
      return `风险总数${amount}  可接受风险${this.kjs} 低风险${this.dfx} 中风险${this.zfx} 高风险${this.gfx} 特高风险${this.tfx}`
    }
  },
  methods: {
    async getRiskNumData() {
      const res = await getTitleRiskApi()
      console.log('风险数据---', res)

      if (res.resMsg == '数据获取成功') {
        res.obj.list.forEach(e => {
          if (e.type == '可1') {
            this.kjs = e.num * 1
          }
          if (e.type == '低1') {
            this.dfx = e.num * 1
          }
          if (e.type == '中1') {
            this.zfx = e.num * 1
          }
          if (e.type == '高1') {
            this.gfx = e.num * 1
          }
          if (e.type == '特高1') {
            this.tfx = e.num * 1
          }
        })
      }
    }
  },
  mounted() {
    this.getRiskNumData()
  }
}
</script>

<style lang="scss" scoped>
.notice-container {
  height: 56rpx;
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  box-shadow: 6rpx -8rpx 0 8rpx #f0f4f7;

  .warning-img {
    width: 48rpx;
    height: 48rpx;
  }

  .uni-notice-bar {
    flex: 1;
    height: 56rpx;
  }

  text {
    margin: 0 10rpx;
  }
}
</style>