TopCard.vue

<!--
 * @Author: your name
 * @Date: 2022-03-25 13:46:23
 * @LastEditTime: 2022-04-28 15:59:44
 * @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.vue
-->
<template>
  <div class="">
    <div class="top-card flex">
      <div
        class="box-card"
        v-for="(item, index) in cardList"
        :key="item.deviceName"
      >
        <div class="top flex">
          <div class="top-left">
            <span
              class="iconfont"
              :class="`icon-` + deviceIconList[index]"
            ></span>
            <span class="text">{{ item.deviceName }}</span>
          </div>
          <div class="top-right flex">
            <span class="text">总数</span>
            <span class="count">{{ item.count }}</span>
          </div>
        </div>

        <div class="middle flex">
          <div class="first">正常</div>
          <!-- 2是探测器，探测器只有报警，没有高低报 -->
          <template v-if="index != 2">
            <div>高报</div>
            <div>低报</div>
          </template>
          <template v-else>
            <div>报警</div>
          </template>
          <div class="last">离线数</div>
        </div>

        <div class="bottom flex">
          <div class="first" v-if="index != 2">8</div>
          <div class="first" v-if="index == 2">1238</div>
          <!-- 2是探测器，探测器只有报警，没有高低报 -->
          <template v-if="index == 0">
            <div>2</div>
            <div>1</div>
          </template>
          <template v-if="index == 1">
            <div>0</div>
            <div>0</div>
          </template>
          <template v-if="index == 2">
            <div>0</div>
          </template>
          <div class="last" v-if="index != 1">0</div>
          <div class="last" v-if="index == 1">1</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "charsData",
  props: {
    cardList: {
      type: Array,
    },
  },
  data() {
    return {
      deviceIconList: ["ylb", "llj", "tcq"],
    };
  },
};
</script>

<style lang="scss" scoped>
.top-card {
  margin-bottom: 22px;
  & > div {
    flex: 1;
    margin-right: 20px;
    height: 212px;
    background: #ffffff;
    box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #e6ebf5;
    box-sizing: border-box;
    // padding: 34px 40px 38px;
    padding: 34px 0 38px;
    .top {
      font-size: 20px;
      margin-bottom: 46px;
      padding: 0 40px;

      .top-left {
        color: #1890ff;
        .iconfont {
          font-size: 20px;
          margin-right: 4px;
        }
        .text {
          font-weight: 500;
        }
      }

      .top-right {
        padding-top: 5px;
        font-size: 16px;

        .text {
          font-size: 16px;
          font-weight: 500;
          margin-right: 2px;
          padding-top: 3px;
        }
        .count {
          color: #1890ff;
          font-size: 22px;
          letter-spacing: 1px;
        }
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .middle,
  .bottom {
    // justify-content: space-around;
    & > div {
      // flex: 1;
      text-align: center;
      font-size: 16px;
      flex: 1;
      &.first {
        // text-align: left;
      }
      &.last {
        // text-align: right;
      }
    }
  }
  .middle {
    margin-bottom: 20px;

    & > div {
      font-weight: 500;
    }
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>