Vue Div数据面板Demo

<template>
  <div class="home-card">
    <div class="home-item s-corner" v-for="card in cards" :key="card.title">
      <div class="home-span">
        <span class="opname" :title="card.opname">{{card.opname}}</span>
        <span class="opcode" :title="card.opcode">{{card.opcode}}</span>
      </div>
      <div class="home-container">
        <!-- <img class="home-img" src="@/assets/images/static/ok.png" alt="操作成功" v-show="card.total.number > 9300 && card.total.number <= 9800" />
        <img class="home-img" src="@/assets/images/static/ng.png" alt="操作错误" v-show="card.total.number <= 9200" />
        <img class="home-img" src="@/assets/images/static/wait.png" alt="等待" v-show="card.total.number > 9800" />
        <img class="home-img" src="@/assets/images/static/warning.png" alt="报警" v-show="card.total.number > 9200 && card.total.number <= 9300" /> -->
        <el-button type="success" icon="el-icon-check" title="合格" class="el-button" circle v-show="card.total > 9300 && card.total <= 9800"></el-button>
        <el-button type="danger" icon="el-icon-close" title="不合格" class="el-button" circle v-show="card.total <= 9200"></el-button>
        <el-button type="info" icon="el-icon-refresh" title="等待" class="el-button" circle v-show="card.total > 9800"></el-button>
        <el-button type="warning" icon="el-icon-bell" title="警告" class="el-button" circle v-show="card.total > 9200 && card.total <= 9300"></el-button>
        <div class="home-right">
          <!-- <div style="margin: 0px 15px;width: 340px;word-wrap:break-word;font-size: 16px;font-weight: 500;"> -->
          <div class="opinfo" :title="card.opinfo">{{ card.opinfo }}</div>
        </div>
      </div>
      <div class="opstatus" :title="card.opstatus">{{ card.opstatus }}</div>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
export default {
  name: "Cards",
  components: {
    CountTo,
  },
  data() {
    return {
      cards: [],
    };
  },
  methods: {
    createData() {
      const { randomExtend } = this;

      this.cards = new Array(50).fill(0).map((foo, i) => ({
        title: "OpCode" + (i + i),
        opcode:"OpCode"+i,
        opname:"OpName"+i,
        //opinfo:"OpInfo:P6608004020#T24070320000116#V572018#/P6608004020#T24070320000116#V572018#/P6608004020#T24070320000116#V572018#/P6608004020#T24070320000116#V572018#"+i,
        opinfo:"OpInfo:P6608004020#T24070320000116#V572018#/"+i,
        opstatus:"工位状态说明/工位状态说明/工位状态说明/工位状态说明",
        total: [randomExtend(9000, 10000)],
        // total: {
        //   number: [randomExtend(9000, 10000)],
        //   content: "{nt}",
        //   textAlign: "right",
        //   style: {
        //     fill: "#ea6027",
        //     fontWeight: "bold",
        //   },
        // },
        // num: {
        //   number: [randomExtend(30, 60)],
        //   content: "{nt}",
        //   textAlign: "right",
        //   style: {
        //     fill: "#26fcd8",
        //     fontWeight: "bold",
        //   },
        // },
      }));
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    },
  },
  mounted() {
    const { createData } = this;

    createData();

    setInterval(this.createData, 30000);
  },
};
</script>

<style lang="less">
.home-card {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  .home-item {
    border: none;
    /*padding: 10px 0px;
    background-color: #304156;*/
    padding: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #fff;
    background: linear-gradient(95deg, #304156, #536976);border:solid 2.5px #333333;border-radius: 8px;
    .home-span {
      display: flex;
      justify-content: space-between;
      /*background-color: #536976;*/
      padding: 0px 10px;
    }
    .home-container {
      display: flex;
      align-items: center;
      padding: 0 10px;
      .home-img {
        display: inline-block;
        width: 60px;
        height: 60px;
        margin: 0;
        padding: 0;
      }
      .home-right {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }
    .opstatus {
      /*color: #2CE885;*/
      color: #A9C12B;
      font-size: 17px;
      font-weight: 600;
      font-family: YouYuan;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 26px;
      cursor: pointer;
      /*margin-top: 10px;
      background-color: #536976;*/
    }
    .opcode,.opname{
      margin-bottom: 10px;
      margin-top: 10px;
      font-family: YaHei;
      font-size: 16px;
      font-weight: 600;
      color: #ECB722;
    }
  }
}
</style>

<style>
.app-main {
  background-color: #1e293e !important;
  /* background-color: #304156 !important; */
}

.ring-charts {
  height: 55%;
}
.el-progress__text {
  color: #fff !important;
  font-weight: bolder;
  font-size: 25px !important;
}
.s-corner {/*荧光边框*/
   /*box-shadow: 0px 0px 5px #00bfff;
   background: linear-gradient(#00bfff,#00bfff) left top,
   linear-gradient(#00bfff,#00bfff) left bottom,
   linear-gradient(#00bfff,#00bfff) right top,
   linear-gradient(#00bfff,#00bfff) right bottom;
   background-size: 4px 4px;
   background-repeat: no-repeat;*/
   box-shadow: 0 0 1rem rgba(4, 164, 250, 0.5) inset;
}
.el-button{
  width: 80px;
  height: 80px;
  margin-left: 10px;
  font-size: 50px;
}
.opinfo{/*文本超出显示省略号*/
  margin: 0px 15px;
  width: 340px;
  word-wrap:break-word;
  font-size: 16px;
  font-weight: 500;
  height: 60px;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-line-clamp:3;/*显示3行*/
  -webkit-box-orient:vertical;
  display:-webkit-box;
  cursor: pointer;
}
/*childrenClassName 为子元素的类名*/
/*height 可以通过调整这个参数的大小来修改想要显示的行数*/
</style>