106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
|
<!--最新预警-->
|
||
|
|
<template>
|
||
|
|
<div class="latest-warning">
|
||
|
|
<div class="warning-data-list">
|
||
|
|
<vue-seamless-scroll
|
||
|
|
v-if="warningDataList.length"
|
||
|
|
ref="vueSeamless"
|
||
|
|
:data="warningDataList"
|
||
|
|
class="seamless-scroll"
|
||
|
|
:class-option="defaultOption"
|
||
|
|
>
|
||
|
|
<div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
|
||
|
|
<peak-warning-info-item :data-item="item"/>
|
||
|
|
</div>
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
|
|
import PeakWarningInfoItem from "@/components/peak-coal-monitoring/PeakWarningInfoItem";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "PeakLatestWarning",
|
||
|
|
components: {PeakWarningInfoItem, vueSeamlessScroll},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
warningDataList: [
|
||
|
|
{
|
||
|
|
indexCode: '001',
|
||
|
|
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||
|
|
warningName: '区域入侵',
|
||
|
|
site: 'xxx地区西门',
|
||
|
|
warningTime: '2023-12-12 12:32:45',
|
||
|
|
state: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
indexCode: '002',
|
||
|
|
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||
|
|
warningName: '区域入侵',
|
||
|
|
site: 'xxx地区西门',
|
||
|
|
warningTime: '2023-12-12 12:32:45',
|
||
|
|
state: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
indexCode: '003',
|
||
|
|
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||
|
|
warningName: '区域入侵',
|
||
|
|
site: 'xxx地区西门',
|
||
|
|
warningTime: '2023-12-12 12:32:45',
|
||
|
|
state: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
indexCode: '004',
|
||
|
|
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||
|
|
warningName: '区域入侵',
|
||
|
|
site: 'xxx地区西门',
|
||
|
|
warningTime: '2023-12-12 12:32:45',
|
||
|
|
state: 1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
defaultOption() {
|
||
|
|
return {
|
||
|
|
step: 0.3, // 数值越大速度滚动越快
|
||
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
||
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
@import "assets/styles/mixin";
|
||
|
|
|
||
|
|
.latest-warning {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.warning-data-list {
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 20px;
|
||
|
|
|
||
|
|
.seamless-scroll {
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.event-item {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|