lanju-front/src/views/kanban/exception/cards.vue

<template xmlns:fontSize="http://www.w3.org/1999/xhtml">
  <div>
    <div id="cards" style="height: 20vh">
      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data1" :key="card.title">
        <div class="card-header">
          <div class="card-header-left">{{ card.title }}</div>
<!--          <div class="card-header-right">{{ card.i }}</div>-->
        </div>
        <div class="card-box">
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房模式</div>
            <div class="footer-detail">
              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
                   {{ getTagModel(card.model) }}
              </span>
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">门前数量</div>
            <div class="footer-detail">
              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
                   {{ getTagText(card.dollyNumber) }}
              </span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房温度</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">保持时长</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
            </div>
          </div>
        </div>
      </div>
    </div>


    <div id="cardss" style="height: 20vh">
      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data2" :key="card.title">
        <div class="card-header">
          <div class="card-header-left">{{ card.title }}</div>
<!--          <div class="card-header-right">{{ (i + 9) }}</div>-->
        </div>
        <div class="card-box">
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房模式</div>
            <div class="footer-detail">
              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
                   {{ getTagModel(card.model) }}
              </span>
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">门前数量</div>
            <div class="footer-detail">
             <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
                   {{ getTagText(card.dollyNumber) }}
              </span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房温度</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">保持时长</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
            </div>
          </div>
        </div>
      </div>
    </div>


    <div id="cardsss" style="height: 20vh">
      <div style="height: 20vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data3" :key="card.title">
        <div class="card-header">
          <div class="card-header-left">{{ card.title }}</div>
<!--          <div class="card-header-right">{{ (i + 9) }}</div>-->
        </div>
        <div class="card-box">
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房模式</div>
            <div class="footer-detail">
              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
                   {{ getTagModel(card.model) }}
              </span>
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">门前数量</div>
            <div class="footer-detail">
             <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
                   {{ getTagText(card.dollyNumber) }}
              </span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">烘房温度</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">保持时长</div>
            <div class="footer-detail">
              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cards from "./cards";

export default {
  name: 'Cards',
  props: ['dataProp'],

  data() {
    return {
      cards: [],
      cardss: [],
      cardsss: [],
    }
  },
  methods: {

    getTagText(value) {
      // 根据值返回要显示的文字
      if (value === '0') {
        return '无车';
      } else if (value === '1') {
        return '有车';
      }
    },

    getTextColor(value){
      if (value === '0') {
        return '#26fcd8';
      } else if (value === '1') {
        return '#ea6027';
      }
    },

    getTagModel(value){
      // 根据值返回要显示的文字
      if (value === '0') {
        return '手动';
      } else if (value === '1') {
        return '自动';
      }
    },
    createData () {

      // this.cards = new Array(8).fill(0).map((foo, i) => ({
      //   title: '烘房' + (i + 1),
      //
      // }));

      this.cardss = new Array(8).fill(0).map((foo, i) => ({
        title: '烘房' + (i + 9),
      }));
      this.cardsss = new Array(8).fill(0).map((foo, i) => ({
        title: '烘房' + (i + 9),
      }));
    },


  },
  mounted() {

    const { createData } = this
     createData()
    //  setInterval(this.createData, 3000)
  }
}
</script>

<style lang="less">
#cards ,#cardss , #cardsss{
  display: flex;
  justify-content: space-between;

  margin-bottom: 12px;

  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border: 2px solid rgba(1, 153, 209, .5);
    width: 19%!important;
    // display: flex;
    // flex-direction: column;
  }

  .card-header {
    display: flex;
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      padding-left: 20px;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
</style>