laboratory_maintenance_app/pages/home/components/alarm.vue

<template>
  <view v-if="list.length>0">
    <view class="work-title">设备报警</view>
    <view v-for="(item, index) in list" :key="index" class="alarm-box">
      <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>
</template>
<script>
export default {
  data() {
    return {
      colorList: {
        特别严重: "rgba(189,49,36,1)",
        严重: "rgba(233,157,66,1)",
      },
      list: [],
    };
  },
  mounted() {
    this.deviceList()
  },
  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
        }
      })
    }
  }
};
</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;
    }
  }
}
</style>