html
复制代码
<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>