<template>
|
<div class="containerJCZD">
|
<div class="tableTh">
|
<span>监测点</span>
|
|
<span>空气质量<br />状况
|
</span>
|
<!-- <span>首要<br />污染物</span> -->
|
<span>时间</span>
|
<span>PM2.5</span>
|
<span>PM10</span>
|
<span>CO</span>
|
<span>NO₂</span>
|
<span>O₃</span>
|
<span>SO₂</span>
|
<span class="loc">站点位置</span>
|
</div>
|
<vueSeamlessScroll :data="JCStationLiSt" class="warp" :class-option="defaultOption" >
|
<div :class="{ 'tableTh1': index%2==0,'tableTh2': index%2==1 }" v-for="(item,index) in JCStationLiSt">
|
<span class="span0">{{item.monitoringStationName}}</span>
|
<span v-if="item.pmTwoPointFiveLevel==='优'" style="color:#12C6AA">{{item.pmTwoPointFiveLevel}}</span>
|
<span v-else-if="item.pmTwoPointFiveLevel==='良'" style="color:#F6D602">{{item.pmTwoPointFiveLevel}}</span>
|
<span v-else-if="pmTwoPointFiveLevel=='轻度污染'" style="color:#E46E0F">{{item.pmTwoPointFiveLevel}}</span>
|
<span v-else style="color:#4EB2FF">{{item.pmTwoPointFiveLevel}}</span>
|
<span>{{parseTime(item.createTime,'{m}-{d} {h}:{i}')}}</span>
|
<!-- <span>{{item.SY}}</span> -->
|
<span>{{item.pmTwoPointFiveVal}}</span>
|
<span>{{item.pmZeroVal}}</span>
|
<span>{{item.carbonMonoxideVal}}</span>
|
<span>{{item.nitrogenDioxideVal}}</span>
|
<span>{{item.ozoneVal}}</span>
|
<span>{{item.sulfurDioxideVal}}</span>
|
<span class="loc">{{item.monitorLocation.length>6?item.monitorLocation.substring(0,6):item.monitorLocation}}</span>
|
</div>
|
</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{
|
JCStationLiSt:[
|
|
],
|
time3: null,
|
|
}
|
},
|
|
mounted() {
|
this.GetEveryStationData();
|
},
|
|
methods:{
|
//获取监测站点实时数据
|
GetEveryStationData() {
|
this.GetStationByTime();
|
let _that = this;
|
this.time3 = setInterval(function() {
|
_that.GetStationByTime();
|
}, 1000 * 60)
|
},
|
//站点实时数据 取30条数据
|
GetStationByTime(){
|
axios_post("/environmental/newestMonitoringData").then(response=>{
|
this.JCStationLiSt=response.data;
|
});
|
},
|
},
|
|
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 1, // 数值越大速度滚动越快
|
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)
|
}
|
}
|
|
},
|
|
destroyed() {
|
if (this.time3 != null) {
|
clearInterval(this.time3);
|
}
|
|
}
|
|
|
}
|
|
|
|
|
</script>
|
|
<style lang="less" scoped="scoped">
|
.containerJCZD{
|
height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
padding-right: 20px;
|
.tableTh{
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 18px;
|
color: #FFFFFF;
|
overflow-x:hidden ;
|
overflow-y: scroll;
|
background: linear-gradient(270deg,#010714 0%, #010714 100%);
|
box-shadow: 0px 0px 18.48px 5.52px rgba(77,177,255,0.52) inset;
|
span{
|
width: 10%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.loc{
|
width: 10%;
|
}
|
}
|
.tableTh1{
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 18px;
|
color: #4EB2FF;
|
span{
|
width: 10%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.span0{
|
color: #ffffff;
|
}
|
.loc{
|
width: 10%;
|
color: #FFFFFF;
|
}
|
}
|
|
.tableTh2{
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 18px;
|
color: #4EB2FF;
|
background: rgba(78,178,255,0.10);
|
span{
|
width: 10%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.span0{
|
color: #ffffff;
|
}
|
.loc{
|
width: 10%;
|
color: #FFFFFF;
|
}
|
}
|
.warp {
|
|
height:calc(100% - 100px);
|
width: 100%;
|
overflow: hidden;
|
}
|
|
|
}
|
|
::-webkit-scrollbar{width:6px;height:6px;
|
background-color: #00000040;
|
}
|
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,1);border-radius:10px;}
|
::-webkit-scrollbar-track{background-color:transparent; }
|
|
|
|
</style>
|
