初次提交
This commit is contained in:
292
src/views/new-screen-zz/components/SwiperTableAlarm.vue
Normal file
292
src/views/new-screen-zz/components/SwiperTableAlarm.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div
|
||||
class="table-wrapper"
|
||||
:style="{
|
||||
width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,
|
||||
|
||||
}"
|
||||
>
|
||||
<div v-if="showHeader" class="table-header">
|
||||
<span v-show="isSort" :style="{ width: '60px' }">序号</span>
|
||||
<span v-for="(it, i) in titles" :key="i" :style="{ width: widths[i] === 'auto' ? 'auto' : widths[i] + 'px' }" :class="{'span-auto': widths[i] === 'auto'}">{{ titles[i] }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-content"
|
||||
:style="{height:contentHeight+'px'}"
|
||||
>
|
||||
<swiper v-if="data.length > 0" ref="myBotSwiper" class="swiper" :options="swiperOption">
|
||||
<swiper-slide v-for="(row, rowIndex) in data" :key="rowIndex">
|
||||
<div
|
||||
class="table-row "
|
||||
:style="{ height: tabelHeight,'border-color':alarmList.find(i=>i.level === row.eventLevel)?alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}"
|
||||
@click="handleRowClick(row, rowIndex)"
|
||||
>
|
||||
<div class="tip-box" :style="{color:alarmList.find(i=>i.level === row.eventLevel) ? alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}">{{ alarmList.find(i=>i.level === row.eventLevel)? alarmList.find(i=>i.level === row.eventLevel).label :'' }}</div>
|
||||
<div
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
:title="row[columnIndex]"
|
||||
:style="{ width: widths[columnIndex] === 'auto' ? 'auto' : widths[columnIndex] + 'px', height: tabelHeight }"
|
||||
:class="{'span-auto': widths[columnIndex] === 'auto'}"
|
||||
>{{ column === 'timeStamp' ?parseTime( row[column]) : row[column] }}</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="data.length === 0" style="height:100%;text-align:center; margin-top:40px;font-size:14px;color:#999">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
export default {
|
||||
name: 'SwiperTable',
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
// 传入的表格数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 传入的表格头
|
||||
titles: {
|
||||
type: Array,
|
||||
default: () => ['事件标题', '创建时间', '信息来源', '分类', '状态', '上报人']
|
||||
},
|
||||
// 表格的列宽
|
||||
widths: {
|
||||
type: Array,
|
||||
default: () => ['246px', '348px', '224px', '214px', '214px', '214px']
|
||||
},
|
||||
// 表格的高度
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 是否展示表格头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格的行高
|
||||
tabelHeight: {
|
||||
type: String,
|
||||
default: '40px'
|
||||
},
|
||||
// 字段
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => ['title', 'createTime', 'info', 'type', 'status', 'upper']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alarmList: [{
|
||||
level: 1,
|
||||
label: '事故',
|
||||
color: '#CF0000'
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
label: '故障',
|
||||
color: '#FDA934'
|
||||
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
label: '告警',
|
||||
color: '#0089FB'
|
||||
},
|
||||
{
|
||||
level: 4,
|
||||
label: '提示',
|
||||
color: '#0089FB'
|
||||
|
||||
},
|
||||
{
|
||||
level: 5,
|
||||
label: '告知',
|
||||
color: '#0089FB'
|
||||
|
||||
}
|
||||
],
|
||||
currentActiveRow: 0,
|
||||
swiperOption: {
|
||||
autoHeight: true,
|
||||
direction: 'vertical',
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
autoplayDisableOnInteraction: false
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
grabCursor: true,
|
||||
autoplayDisableOnInteraction: false,
|
||||
mousewheelControl: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myBotSwiper() {
|
||||
return this.$refs.myBotSwiper.$swiper
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.currentActiveRow = 0
|
||||
// if (val && val.length > 0) {
|
||||
// this.columns = []
|
||||
// for (const key in val[0]) {
|
||||
// this.columns.push(key)
|
||||
// }
|
||||
// // this.swiperStart()
|
||||
// }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
handleRowClick(it, i) {
|
||||
this.currentActiveRow = i
|
||||
const currentIt = this.data[i]
|
||||
this.$emit('change', currentIt)
|
||||
},
|
||||
// 控制表格停止滚动
|
||||
swiperStop() {
|
||||
this.myBotSwiper.autoplay.stop()
|
||||
},
|
||||
// 控制表格开始滚动
|
||||
swiperStart() {
|
||||
this.myBotSwiper.autoplay.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table-header {
|
||||
$height: 32px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9AD1FD;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
line-height: $height;
|
||||
&:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
span + span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table-row {
|
||||
width: calc(100% - 2px);
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #E6F4FE;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
div + div {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
&:nth-child(1) {
|
||||
width: 246px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 348px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 214px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip-box{
|
||||
font-size: 12px !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px !important; /* 133.333% */
|
||||
letter-spacing: 0.6px;
|
||||
writing-mode: tb-rl !important;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user