<template>
|
<div class="HJScrool">
|
<!-- <el-button @click="Delete()"> 删除</el-button> -->
|
<vueSeamlessScroll :data="EVList" class="warp" :class-option="defaultOption">
|
<div class="HJList" v-for="(item, i) in EVList" :key="i">
|
<div class="HJListLeft1">
|
<img src="../../../assets/image/Left/Environmental/空气质量预警图标.png" />
|
<span
|
:title="item.warningTitle">{{ item.warningTitle.length > 4 ? item.warningTitle.substring(0, 4) : item.warningTitle }}</span>
|
</div>
|
<div class="HJListLeft2">
|
<div class="HJListLeft21">
|
<span class="span1"><button class="span2"
|
@click="FlyToObj(item.lon, item.lat)">点位</button></span>
|
<span class="span3">{{ parseTime(item.warningDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
</div>
|
<div class="HJListLeft22">
|
<img src="../../../assets/image/Left/Environmental/位置.png" />
|
<span>{{ item.warningAddress }}</span>
|
</div>
|
</div>
|
</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 {
|
LoctionItem: null,
|
EVList: [
|
|
],
|
}
|
|
|
|
|
|
|
},
|
mounted() {
|
this.GetWarnList();
|
},
|
|
|
|
|
|
|
|
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)
|
}
|
}
|
|
},
|
|
methods: {
|
FlyToObj(long, lat) {
|
|
this.Delete();
|
// let long=120.55127;
|
// let lat=41.295515;
|
|
window.sgworld.Navigate.flyToPosition(long, lat, 2500, {
|
heading: 0,
|
pitch: -90,
|
roll: 0,
|
});
|
|
this.LoctionItem = sgworld.Analysis.createCircleScan({
|
lon: long,
|
lat: lat
|
},
|
300,
|
"#00ff00",
|
2000,
|
true
|
);
|
},
|
|
GetWarnList() {
|
axios_post("/environmental/environmentIndexWarnings").then(response => {
|
this.EVList = response.data;
|
console.log(this.EVList);
|
})
|
},
|
Delete() {
|
if (this.LoctionItem != null) {
|
this.LoctionItem.remove();
|
}
|
}
|
|
},
|
|
destroyed() {
|
this.Delete();
|
}
|
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.HJScrool {
|
height: 100%;
|
width: 100%;
|
|
.HJList {
|
margin-left: 2%;
|
height: 150px;
|
width: 96%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
border-bottom: dotted 1px #FFF;
|
|
.HJListLeft1 {
|
height: 70%;
|
width: 12%;
|
border: solid 1px #4E4E0E;
|
display: flex;
|
flex-direction: column;
|
text-align: center;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
font-size: 22px;
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.HJListLeft2 {
|
height: 90%;
|
width: 80%;
|
display: flex;
|
flex-direction: column;
|
color: #FFFFFF;
|
font-size: 18px;
|
|
.HJListLeft21 {
|
width: 100%;
|
height: 50%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.span1 {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
font-size: 22px;
|
font-weight: 600;
|
|
.span2 {
|
margin-left: 5%;
|
width: 25%;
|
height: 70%;
|
border: none;
|
background-color: #081E4A;
|
color: #FFFFFF;
|
border: solid 1px #0E5A89;
|
font-size: 25px;
|
}
|
}
|
|
.span3 {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
font-size: 22px;
|
}
|
}
|
|
.HJListLeft22 {
|
height: 50%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
font-size: 23px;
|
color: #FFF;
|
text-indent: 20px;
|
}
|
|
|
|
}
|
}
|
}
|
|
.warp {
|
|
height: 100%;
|
width: 100%;
|
overflow: hidden;
|
}
|
</style>
|
