<template>
|
<div class="containerTable">
|
<div class="tableHead">
|
<span>车牌号</span>
|
<span>车辆状态</span>
|
<span>车牌颜色</span>
|
<span>车辆位置</span>
|
</div>
|
<div class="tablecontent">
|
<vueSeamlessScroll :data="eventList" class="warp" :class-option="defaultOption" >
|
<div v-for="(item,index) in eventList" :class="{ 'tablecontentItem': index%2==0,'tablecontentItemJ': index%2==1 }">
|
<span>{{item.vehicleNo}}</span>
|
<span>{{item.vehicleStatus}}</span>
|
<span>{{item.licencePlateColor}}</span>
|
<span>{{item.location.length>5?item.location.substring(0,5):item.location}}</span>
|
</div>
|
</vueSeamlessScroll>
|
</div>
|
|
</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:{
|
GetCarYJState(){
|
axios_post("/emergency/parkCarList").then(response=>{
|
this.eventList=response.data;
|
})
|
|
|
}
|
|
},
|
|
mounted() {
|
this.GetCarYJState();
|
},
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.5, // 数值越大速度滚动越快
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 10000 // 单步运动停止的时间(默认值1000ms)
|
}
|
}
|
|
},
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerTable {
|
height: 100%;
|
width: 100%;
|
|
.tableHead {
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
background: #2B7CB5;
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 25px;
|
}
|
}
|
|
.tablecontent {
|
height: calc(100% - 100px);
|
width: 100%;
|
.warp{
|
height: 100%;
|
width: 100%;
|
overflow-y: scroll;
|
}
|
.tablecontentItem {
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 27px;
|
}
|
}
|
|
.tablecontentItemJ {
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
background-color: #08163B;
|
border: solid 1px #2B7CB5;
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 25%;
|
height: 100%;
|
color: #FFF;
|
font-size: 27px;
|
}
|
}
|
|
|
}
|
}
|
</style>
|
