CzItem.vue

<!--
 * @Author: your name
 * @Date: 2022-03-26 10:27:00
 * @LastEditTime: 2022-03-28 18:03:04
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
-->

<template>
  <div class="czitem flex" :class="{nopadding:changeStyle}">
    <div class="left">
      <div class="img">
        <div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
          {{ stateType[list.state]  }}
        </div>
        <img v-if="list.src" src="" alt="" />
        暂无图片
      </div>
      <div v-if="!changeStyle" v-unValue class="device-name zzz">{{ list.deviceName }}</div>
    </div>

    <div class="right">
      <div>
        温度：<span :class="{ active: list.a > 50 }">{{ list.a }}°C</span>
      </div>
      <div>
        水温：<span :class="{ active: list.b > 50 }">{{ list.b }}°C</span>
      </div>
      <div>
        压力：<span :class="{ active: list.c > 50 }">{{ list.c }}MPa</span>
      </div>
      <div>
        湿度：<span :class="{ active: list.d > 50 }">{{ list.d }}%</span>
      </div>
      <!--<div>
        水温：<span :class="{ active: list.e > 50 }">{{ list.e }}°C</span>
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  // 场站子组件
  props: {
    list: {
      type: Object,
    },
    // 从外部传一个值，来改变一些样式
    changeStyle:{
      type:Boolean,
      default:false,
    },
    stateType:{
      type:Object,
      default:()=>({"1":"正常",2:"报警"})
    }

  },
};
</script>

<style lang="scss" scoped>
.czitem {
  // min-width: 324px;
  width: 100%;
  min-height: 191px;
  padding: 14px 12px 18px 25px;
  box-sizing: border-box;
  // display: flex;
  .left {
    // margin-right: 48px;
    .img {
      width: 162px;
      height: 120px;
      border-radius: 4px;
      line-height: 120px;
      text-align: center;
      position: relative;
      box-sizing: border-box;
      border: 1px solid #e6ebf5;
      margin-bottom: 11px;
      .state {
        position: absolute;
        top: 0;
        left: 0;
        width: 162px;
        height: 28px;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 4px 4px 0px 0px;
        text-align: center;
        line-height: 28px;
        color: #06d7b1;
        font-size: 14px;
        &.active1 {
          color: #06d7b1;
        }
        &.active2 {
          color: #FF6C68;
        }
        &.active3 {
          color: #bbbbbb;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .device-name {
      font-size: 14px;
      color: #666666;
      font-weight: 500;
    }
  }
  .right {
    font-size: 14px;
    min-width: 80px;
    & > div {
      margin-bottom: 10px;
      span.active {
        color: red;
      }
    }
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}
.nopadding{
  padding-bottom:0 !important;
  min-height:170px;
}
</style>