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>
    <view style="width: 200rpx">今日风险</view>

    <!-- <MultiColorNoticeBar :speed="30" backgroundColor="#fff" @tap="onViewRiskDetails">
      <text style="color: red">重要通知：</text>
      <text style="color: blue">这是一条</text>
      <text style="color: green">多彩的</text>
      <text style="color: orange">滚动公告！</text>
      <text style="color: orange">滚动公告！</text>
      <text style="color: orange">滚动公告！</text>
      <text style="color: orange">滚动公告！</text>
    </MultiColorNoticeBar> -->

    <view @tap="onViewRiskDetails" style="width: 70%">
      <MultiColorNoticeBar
        :textArray="[
          `风险总数：${tfx} `,
          `可接受风险：${kjs} `,
          `低风险：${dfx} `,
          `中风险：${zfx} `,
          `高风险：${gfx} `,
          `特高风险：${tfx} `
        ]"
        :textStyle="[
          { color: '#000000' },
          { color: '#7dda76' },
          { color: '#7dda76' },
          { color: '#ffed51' },
          { color: '#bc2843' },
          { color: '#bc2843' }
        ]"
        :scrollSpeed="1"
      />
    </view>
    <!-- <view class="uni-notice-bar" >
      
    </view> -->
  </view>
</template>

<script>
import { getTitleRiskApi } from '../../../../api/workPlan/homePage'
import MultiColorNoticeBar from '../../../../components/MultiColorNoticeBar/index.vue'

export default {
  props: {
    // /* 提示内容 */
    // noticeContent: {
    //   type: String,
    //   default: '中风险：35   低风险：153  可接收风险：153 高风险：126'
    // },
    /* 是否显示关闭按钮 */
    showClose: {
      type: Boolean,
      default: false
    },
    /* 是否显示提示图标 */
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  components: {
    MultiColorNoticeBar
  },
  data() {
    return {
      kjs: 0,
      dfx: 0,
      zfx: 0,
      gfx: 0,
      tfx: 0,
      amount: 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
          }
        })

        this.amount = this.kjs + this.dfx + +this.zfx + this.gfx + this.tfx
      }
    },
    onViewRiskDetails() {
      uni.navigateTo({ url: '/pages/workPlan/workPlan/index' })
      // uni.navigateTo({ url: `/pages/workPlan/workPlan/index?day=${this.$moment().format('YYYY-MM-DD')}` })
    }
  },
  mounted() {
    this.getRiskNumData()
  }
}
</script>

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

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

  // .uni-notice-bar {
  //   flex: 1;
  // }

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