laboratory_maintenance_app/pages/home/components/alarm.vue

<template>
  <view v-if="list.length > 0">
    <view class="work-title">设备报警</view>
    <view class="view_box">
      <view :style="transitionStyle">
        <view v-for="(item, index) in list" :key="index" class="alarm-box" @click="alarmImg()">
          <view class="alarm-left" :style="{ borderColor: item.color }">
            <i>{{ item.alarmName }}</i>
            <i>{{ item.levelNanme }}</i>
          </view>
          <view class="alarm-center">
            <text>{{ item.deviceName }}</text>
            <text>品牌:{{ item.brand }}</text>
            <text>型号:{{ item.model }}</text>
            <text>报警时间:{{ item.alarmTime }}</text>
            <view class="alarm-center-btn">一键报送</view>
          </view>
          <view class="alarm-right"></view>
        </view>
      </view>

    </view>

    <!-- <view class="view_box">
      <view :style="transitionStyle">
        <block v-for="(item, index) in list" :key="index">
          <view>
            -------------{{ item }}----------
          </view>
        </block>
      </view>
    </view> -->
  </view>

</template>
<script>
export default {
  data() {
    return {
      colorList: {
        特别严重: "rgba(189,49,36,1)",
        严重: "rgba(233,157,66,1)",
      },
      list: [],
      transitionStyle: ''
    };
  },
  mounted() {
    this.deviceList()
    // 示例 模拟接口请求
    // this.getList().then((res) => {
    //   console.log(res)
    //   this.list = [...res.data, ...res.data]

    // })
  },
  methods: {
    deviceList() {
      this.$u.api.deviceList().then(res => {
        if (res.code == 200) {
          let data_ = res.data
          data_.forEach(v => {
            if (v.alarmLevel == 1) {
              v.alarmName = '一级'
              v.levelNanme = '超级严重'

            }
            if (v.alarmLevel == 2) {
              v.alarmName = '二级'
              v.levelNanme = '严重'
            }
            v.color = this.colorList[v.levelNanme]
          });
          this.list = res.data
          // list赋值后调用初始化
          this.init()
        }
      })
    },
    alarmImg() {
      uni.previewImage({
        current: '', // 当前显示图片的 http 链接
        urls: [require('@/static/images/alarm_icon.png')]
      })
    },
    init() {
      // 主要通过 transition 的过度时间 控制 滚动速度
      setTimeout(() => {
        this.transitionStyle = 'transition: all 10s linear 0s;transform: translateY(-50%);'
        setInterval(() => {
          this.transitionStyle = ''
          setTimeout(() => {
            this.transitionStyle =
              'transition: all 10s linear 0s;transform: translateY(-50%);'
          }, 20)
        }, 8000)
      }, 20)
    },
    // 模拟接口请求
    getList() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            code: '200',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
          })
        }, 200)
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.work-title {
  color: rgba(16, 16, 16, 1);
  font-size: 32rpx;
  padding: 0 0 32rpx 36rpx;
}

.alarm-box {
  margin: 0 40rpx 32rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: row;

  .alarm-left {
    width: 160rpx;
    height: 160rpx;
    text-align: center;
    border: 16rpx solid rgba(189, 49, 36, 1);
    border-radius: 50%;
    margin: 36rpx 36rpx 36rpx 48rpx;

    i {
      display: block;
      text-align: center;

      &:nth-child(1) {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        padding-top: 30rpx;
      }

      &:nth-child(2) {
        color: rgba(190, 190, 190, 1);
        font-size: 26rpx;
      }
    }
  }

  .alarm-center {
    flex: 1;
    color: rgba(154, 154, 154, 1);
    font-size: 24rpx;
    position: relative;

    text {
      display: block;
      line-height: 40rpx;
      font-size: 24rpx;

      &:nth-child(1) {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        padding: 28rpx 0 8rpx 0;
      }

      &:nth-child(2) {}
    }

    .alarm-center-btn {
      width: 160rpx;
      height: 60rpx;
      line-height: 40rpx;
      border-radius: 8rpx;
      background-color: rgba(58, 98, 215, 0.16);
      color: rgba(58, 98, 215, 1);
      font-size: 28rpx;
      line-height: 60rpx;
      text-align: center;
      position: absolute;
      top: 28rpx;
      right: 40rpx;
      cursor: pointer;
    }
  }
}

.view_box {
  // background-color: #aaa2fb;
  height: 300rpx;
  overflow: hidden;
}
</style>