laboratory_maintenance_app/pages/home/components/alarm.vue

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="alarm-box">
      <view
        class="alarm-left"
        :style="`borderColor: ${colorList[item.alarmName]} `"
      >
        <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: [
        // {
        //   title1: "通风柜",
        //   title2: "德力西",
        //   title3: "FSAJ",
        //   title4: "2024-08-09",
        //   title5: "一级",
        //   title6: "特别严重",
        // },
        // {
        //   title1: "通风柜",
        //   title2: "德力西",
        //   title3: "FSAJ",
        //   title4: "2024-08-09",
        //   title5: "一级",
        //   title6: "严重",
        // },
      ],
    };
  },
  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 = '严重'
            }
          });
          this.list = res.data
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.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: 80rpx;
      right: 40rpx;
      cursor: pointer;
    }
  }
}
</style>