项目需要一个报警列表,数据要上下滚动,鼠标移入就停止,移入在展示详情,超出部门出现省略号,之前想的用框架,dataV里面有类似框架,但是感觉太大了,想着还是自己写一个吧
废话少说直接上代码
<div class="container">
<div class="headerDisFlex marTop footerHome">
<div class="footer-right headerDisFlex disFlex" @click="sirenClick">
<div class="fixation-104 relative" v-if="visible">
<div class="zxl-head">报警列表</div>
<el-row class="title">
<el-col :span="6">鸡舍名</el-col>
<el-col :span="8">报警内容</el-col>
<el-col :span="6">开始报警时间</el-col>
<el-col :span="4">报警时长</el-col>
</el-row>
<div class="zxl-hr"></div>
<div class="warnData">
<div
class="con relative"
:style="{
'--warnnum':
warnings.length > 4 ? warnings.length * -36 + 'px' : '0px',
'--warntime': warnings.length * 2 + 's',
}"
>
<el-row v-if="warnings.length == 0">
<el-col class="t-center">暂无报警,栏舍状态良好 \^o^/</el-col>
</el-row>
<el-row
v-for="(item, i) in warnings"
:key="i"
@click.native="alarmNow"
>
<el-col :span="4" :title="item.fenceValue">{{
item.fenceValue
}}</el-col>
<el-col class="orange" :span="8" :title="item.warnDetail">{{
item.warnDetail
}}</el-col>
<el-col style="text-align: center" :span="8">{{
item.startTime
}}</el-col>
<el-col class="orange" :span="4">{{ item.duration }}</el-col>
</el-row>
<template v-if="warnings.length > 4">
<el-row
v-for="(item, i) in warnings"
:key="'copy-' + i"
@click.native="alarmNow"
>
<el-col :span="4" :title="item.fenceValue">{{
item.fenceValue
}}</el-col>
<el-col class="orange" :span="8" :title="item.warnDetail">{{
item.warnDetail
}}</el-col>
<el-col style="text-align: center" :span="8">{{
item.startTime
}}</el-col>
<el-col class="orange" :span="4">{{ item.duration }}</el-col>
</el-row>
</template>
</div>
</div>
<div id="triangle-down"></div>
</div>
<el-button slot="reference" v-if="dawtaListlenght > 0"
>报警提示:
<span style="color: #ffffff"
>当前<span style="color: #e2b331"> {{ dawtaListlenght }} </span
>个报警栏舍</span
>
</el-button>
<el-button slot="reference" v-show="dawtaListlenght == 0">{{
footerTitle
}}</el-button>
<!-- </el-popover> -->
<i class="el-icon-arrow-up" v-show="visibleJiantou"></i>
<i class="el-icon-arrow-down" v-show="visibleDow"></i>
<!-- <audio id="music" src=""></audio> -->
</div>
</div>
</div>
data() {
// 这里存放数据
return {
visibleJiantou: false,
visibleDow: true,
activeIndex: 0,
visible: false, //报警弹窗
warnings: [
{
fenceValue: "小红",
warnDetail: "18",
data: "2022-1-1",
},]
methods: {
//点击报警轮播
sirenClick() {
this.visible = !this.visible;
this.visibleDow = !this.visibleDow;
this.visibleJiantou = !this.visibleJiantou;
},
},
<style scoped lang="scss">
/* @import url(); 引入公共css类 */
//轮播
.relative {
position: relative;
}
.headerDisFlex {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.zxl-head {
color: #fff;
font-size: 18px;
margin-bottom: 6px;
}
.title {
color: #7ba5d4;
font-size: 14px;
}
.zxl-hr {
border: none;
border-top: 1px solid #7ba5d4;
margin-top: 8px;
}
.warnData {
max-height: 146px;
overflow: hidden;
.el-row {
padding: 8px 0;
border-bottom: 1px dashed rgba(68, 141, 226, 0.5);
.el-col {
color: #fff;
min-height: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.orange {
color: #d7551b;
text-align: center;
}
}
.con {
top: var(--warnnum);
animation: moveUp var(--warntime) linear infinite;
&:hover {
animation-play-state: paused;
}
}
@keyframes moveUp {
0% {
top: 0;
}
100% {
top: var(--warnnum);
}
}
}
.fixation-104 {
padding-left: 10px;
background-color: #323a62 !important;
border: 0;
position: absolute;
right: 0px;
bottom: 140%;
width: 100%;
border-radius: 4px;
z-index: 99;
}
.t-center {
text-align: center;
}
.footer-right {
width: 493px;
height: 33px;
top: 300px;
background: #323a62;
border: 1px solid #262d4d;
border-radius: 4px;
position: relative;
/deep/.el-button {
background: transparent;
border: 0;
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 7px;
color: #a4b1eb;
}
.el-icon-arrow-down:before {
color: #a4b1eb;
font-size: 18px;
}
}
</style>