<template>
|
<div class="containerScrool" ref="element">
|
<vueSeamlessScroll :data="eventList" class="warp" :class-option="defaultOption" >
|
<li class="left2msglist" v-for="item in eventList">
|
<div class="timg">
|
<img src="../../../assets/image/Left/Emergency/撞车.png" />
|
<span>{{item.vid.length>8?item.vid.substring(0,8):item.vid}}</span>
|
</div>
|
<div class="tmsg">
|
<div class="tmsg1">
|
<div class="tmsg11">
|
<span class="span1">{{item.atpName}}</span>
|
<button class="span2" >办结</button>
|
<!-- <button class="span2N"
|
v-if="item.eventState=='办理中'">{{item.eventState}}</button>-->
|
<span class="span3">{{parseTime(item.createTime,'{y}-{m}-{d} {h}:{i}')}}</span>
|
</div>
|
<div class="tmsg12">
|
<!-- <img src="../../../assets/image/Left/Emergency/上报人.png" />
|
<span class="span1">{{item.eventpeople}}</span> -->
|
<img src="../../../assets/image/Left/Emergency/位置.png" />
|
<span class="span2" style="width: 100%;">{{item.sps}}</span>
|
</div>
|
</div>
|
<div class="tmsg2">
|
<div class="tmsg21"></div>
|
<div class="tmsg22"></div>
|
</div>
|
</div>
|
</li>
|
|
</vueSeamlessScroll>
|
</div>
|
</template>
|
|
<script>
|
import {axios_get,axios_post } from '../../../until/request.js'
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
export default {
|
components: {
|
vueSeamlessScroll
|
},
|
data() {
|
return {
|
chart1: {},
|
chart1option: {},
|
eventList:[],
|
}
|
},
|
|
methods:{
|
GetCarWarn(){
|
axios_post("/emergency/parkCarWarning").then(response=>{
|
this.eventList=response.data
|
})
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
this.GetCarWarn();
|
|
},
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
|
}
|
}
|
|
},
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerScrool {
|
position: relative;
|
height:100%;
|
width: 100%;
|
.warp{
|
height: 100%;
|
width: 100%;
|
overflow-y: hidden;
|
}
|
}
|
|
|
|
|
.left2msglist {
|
|
height: 150px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: dotted 1px #FFFFFF;
|
|
.timg {
|
border: solid 1px #3B86C3;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 15%;
|
height: 80%;
|
|
span {
|
color: #FFFFFF;
|
font-size: 20px;
|
line-height: 40px;
|
}
|
}
|
|
.tmsg {
|
width: 80%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.tmsg1 {
|
|
height: 50%;
|
width: 100%;
|
|
.tmsg11 {
|
height: 100%;
|
width: 100%;
|
color: #FFFFFF;
|
font-size: 24px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.span1 {
|
width: 40%;
|
}
|
|
.span2 {
|
width: 150px;
|
height: 60%;
|
border: none;
|
background-color: #3D8FFF;
|
border-radius: 5px;
|
color: #FFFFFF;
|
}
|
|
.span2N {
|
width: 150px;
|
height: 60%;
|
border: none;
|
background-color: #FFD200;
|
border-radius: 5px;
|
color: #000000;
|
}
|
|
.span3 {
|
width: calc(60% - 200px);
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
}
|
|
.tmsg12 {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
// justify-content: space-between;
|
color: #FFFFFF;
|
font-size: 20px;
|
|
.span1 {
|
width: 30%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.span2 {
|
width: 70%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
}
|
}
|
}
|
}
|
}
|
|
|
</style>
|
