<template>
|
<div class="main_body">
|
<el-container style="height: 100%">
|
<el-aside width="300px" style="background-color: rgb(238, 241, 246); overflow-y: hidden">
|
<el-card class="box-card" style="width: 274px;margin: 13px auto">
|
<div slot="header" class="clearfix">
|
<div>
|
<img style="float: left;width: 20px;margin: 15px 0 0 18px" src="../../assets/images/uav/calendar.png" alt="">
|
<span style="display:inline-block;float: left;font-size: 16px;margin-left: 10px">无人机飞行日期</span>
|
</div>
|
</div>
|
<el-scrollbar v-if="asideData.dates.length > 0" style="height: 200px;overflow-x: hidden;" class="text item">
|
<div v-for="(item, index) in asideData.dates" class="per-date" :class="{active: asideData.activeKey === index}" @click="getTimeAreaData(item, index)">
|
<img style="float: left;width: 14px;margin: 18px 0 0 0" src="../../assets/images/uav/calendar.png" alt="">
|
<span style="display:inline-block;float: left;font-size: 14px;margin-left: 15px">{{ item }}</span>
|
</div>
|
</el-scrollbar>
|
<div v-else style="height: 180px;width: 274px;overflow-x: hidden;">
|
<div style="width: 272px;text-align: center;height: 180px;line-height: 140px;font-size: 14px;color: #5a5c60">
|
无飞行记录
|
</div>
|
</div>
|
</el-card>
|
<div style="width: 274px;margin: 13px auto;border-radius: 8px">
|
<el-collapse v-model="asideData.activeNames" accordion style="box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 0.1);" @change="handleChange">
|
<el-collapse-item v-for="(item1, index) in asideData.uavTimeFly" :key="index" :name="index" style="text-indent: 2em;">
|
<template slot="title"> <img style="position: relative;left: 18px" src="../../assets/images/uav/uav.png">
|
<span
|
style="display: inline-block; position: relative;left: 6px"
|
> {{ item1.name }}</span>
|
</template>
|
<el-scrollbar style="height: 200px;overflow-x: hidden;">
|
<div
|
v-for="(item, index) in item1.timeSlot"
|
class="per-date_area"
|
:class="{activeArea: asideData.activeAreaKey === index}"
|
@click="getFlyData(item, index)"
|
>
|
<div style="width: 100%;margin: 0 auto">
|
<span style="display: inline-block;">{{ item.startTime.substr(11, item.startTime.length) }}</span>
|
<span style="display: inline-block;">~</span>
|
<span style="display: inline-block;">{{ item.endTime.substr(11, item.startTime.length) }}</span>
|
</div>
|
</div>
|
</el-scrollbar>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
|
</el-aside>
|
<el-main>
|
<div
|
style="
|
position: fixed;
|
z-index: 20;
|
padding-left: 20px;
|
height: 75px;
|
line-height: 80px;
|
width: 100%;
|
font-size: 18px;
|
font-weight: bold;
|
background-color: rgba( 192,192,192, 0.4);"
|
>
|
<el-radio-group v-model="defautRadio.name" size="medium" @change="selectRedio">
|
<el-radio-button v-for="(item, key) in radio" :key="key" :label="item.name" />
|
</el-radio-group>
|
</div>
|
<div id="container" style="width:100%; height:100%;resize:both;z-index: 0" />
|
<div v-if="textShowFlag" id="text" class="textShow">
|
<div style="height: 32px; padding: .45rem 1.25rem;">
|
<span style="display: inline-block;border: 2px solid #1890ff;width:4px;height: 16px;position:relative;top:2px;border-radius: 10px" />
|
<span style="display:inline-block;height: 32px;line-height:32px;font-weight: 400;font-size: 16px;color: #808080;margin-left: 4px">详细数据</span>
|
<span style="float: right;display: inline-block;height: 32px;line-height: 32px;cursor: pointer" @click="textClose">
|
<img class="uav" src="../../assets/images/uav/close.png">
|
</span>
|
</div>
|
<hr class="hr">
|
<div v-for="(item, key, index) in keys" :key="index" class="per-text-data">
|
<span style="display:inline-block;font-size:14px;height: 27px;line-height: 27px;color: #808080">{{ item | sensorFilter }}:</span>
|
<span style="display:inline-block;margin-left:3px;color:#1890ff;height: 27px;line-height: 27px;font-size: 14px">{{ perPointData[item] }}</span>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
import { getToken } from '@/utils/auth'
|
import json from '@/assets/json/sensor.json'
|
|
export default {
|
filters: {
|
sensorFilter: function(value) {
|
if (!value) return ''
|
return json[value]
|
}
|
},
|
data() {
|
return {
|
// 侧边栏数据
|
asideData: {
|
dates: [], // 存放date数组
|
activeNames: [0],
|
uavTimeFly: [], // 存放无人机信息以及飞行时间区间
|
activeKey: 0,
|
activeAreaKey: 0
|
},
|
load: 1,
|
value: [],
|
map: null,
|
radio: [
|
{ code: 'a34004', name: 'PM2.5' },
|
{ code: 'a34002', name: 'PM10' },
|
{ code: 'a21026', name: 'SO2' },
|
{ code: 'a21004', name: 'NO2' },
|
{ code: 'a21005', name: 'CO' },
|
{ code: 'a05024', name: 'O3' },
|
{ code: 'a99054', name: 'TVOC' }
|
],
|
defautRadio: { code: 'a34004', name: 'PM2.5' },
|
Layler: null, // 存放图层
|
textMarkers: { code: '', markers: [] }, // 存放文本标注
|
levelSensor: [35, 75, 115, 150, 250],
|
perPointData: null, // 存放每个点的数据
|
keys: [], // 存放每个点的key值因子code
|
textShowFlag: false
|
}
|
},
|
mounted() {
|
this.getDate()
|
this.initMap()
|
// this.flyData()
|
},
|
methods: {
|
// 获取无人机以及时间区间
|
getTimeAreaData(item, index) {
|
this.asideData.activeAreaKey = -1
|
this.asideData.activeKey = index
|
axios.get('http://47.99.64.149:8081/uav/queryTimeSlot', {
|
params: {
|
organizationId: this.$store.state.orgId,
|
date: item
|
},
|
headers: {
|
token: getToken()
|
}
|
}).then(res => {
|
if (res.data.code === 0) {
|
this.asideData.uavTimeFly = res.data.data.vos
|
}
|
})
|
},
|
// 折叠面板监听
|
handleChange(val) {
|
console.log(val)
|
},
|
lnglatToG20(lnglat) {
|
lnglat = this.map.lngLatToGeodeticCoord(lnglat)
|
lnglat.x = AMap.Util.format(lnglat.x, 3)
|
lnglat.y = AMap.Util.format(lnglat.y, 3)
|
return lnglat
|
},
|
// 选中redio
|
selectRedio(item) {
|
this.map.remove(this.textMarkers.markers)
|
this.textMarkers.markers = []
|
this.map.remove(this.Layler)
|
this.addLayers(item)
|
},
|
// 初始化地图
|
initMap() {
|
var map = new AMap.Map('container', {
|
resizeEnable: true,
|
rotateEnable: true,
|
pitchEnable: true,
|
zoom: 20,
|
pitch: 80,
|
rotation: -15,
|
viewMode: '3D', // 开启3D视图,默认为关闭
|
buildingAnimation: true, // 楼块出现是否带动画
|
expandZoomRange: true,
|
zooms: [3, 20],
|
center: [120.9781494, 31.4265156]
|
})
|
this.map = map
|
},
|
getFlyData(item, index) {
|
this.textShowFlag = false
|
if (this.Layler !== null) {
|
this.map.remove(this.Layler)
|
}
|
if (this.textMarkers.markers.length > 0) {
|
this.map.remove(this.textMarkers.markers)
|
}
|
this.asideData.activeAreaKey = index
|
axios.get('http://47.99.64.149:8081/uav/queryDataByBatch', {
|
params: {
|
batch: item.batch
|
},
|
headers: {
|
token: getToken()
|
}
|
}).then(res => {
|
if (res.data.code === 0) {
|
this.value = []
|
for (let i = 0; i < res.data.data.vos.length; i++) {
|
this.value.push(JSON.parse(res.data.data.vos[i].value))
|
}
|
}
|
this.addLayers('PM2.5')
|
})
|
},
|
// 添加图层
|
addLayers(name) {
|
this.textMarkers.markers = []
|
let code = ''
|
for (let i = 0; i < this.radio.length; i++) {
|
if (name === this.radio[i].name) {
|
code = this.radio[i].code
|
}
|
}
|
if (code === 'a34004') {
|
this.levelSensor = [35, 75, 115, 150, 250]
|
} else if (code === 'a34002') {
|
this.levelSensor = [50, 150, 250, 350, 420]
|
} else if (code === 'a21026') {
|
this.levelSensor = [150, 500, 650, 800, 1600]
|
} else if (code === 'a21004') {
|
this.levelSensor = [100, 200, 700, 1200, 2340]
|
} else if (code === 'a21005') {
|
this.levelSensor = [5, 10, 35, 60, 90]
|
} else if (code === 'a05024') {
|
this.levelSensor = [160, 200, 300, 400, 800]
|
} else if (code === 'a99054') {
|
this.levelSensor = [1.5, 3, 5]
|
}
|
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 110, opacity: 1 })
|
var points3D = new AMap.Object3D.RoundPoints({
|
eventSupport: true
|
})
|
points3D.transparent = true
|
|
var lines = new AMap.Object3D.Line()
|
var lineGeo = lines.geometry
|
var geometry = points3D.geometry
|
for (let i = 0; i < this.value.length; i++) {
|
const obj = (this.value[i])
|
if (!(obj.flylon === undefined)) {
|
var center = this.lnglatToG20([parseFloat(obj.flylon), parseFloat(obj.flylat)])
|
if (i < this.value.length - 1) {
|
const obj1 = (this.value[i + 1])
|
if (!(obj1.flylon === undefined)) {
|
var center1 = this.lnglatToG20([parseFloat(obj1.flylon), parseFloat(obj1.flylat)])
|
// 连线
|
lineGeo.vertices.push(center.x, center.y, -(parseFloat(obj.flyhig)))
|
lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1)
|
lineGeo.vertices.push(center1.x, center1.y, -(parseFloat(obj1.flyhig)))
|
lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1)
|
}
|
}
|
// 随机高度。Z 轴正方向指向地下，因此这里设置高度要添加负号指向反方向
|
if (obj[code]) {
|
if (parseFloat(obj[code]) < this.levelSensor[0] && this.levelSensor[0] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0, 0.8941, 0, 0.6)
|
} else if (parseFloat(obj[code]) < this.levelSensor[1] && this.levelSensor[1] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 1, 0, 0.8)
|
} else if (parseFloat(obj[code]) < this.levelSensor[2] && this.levelSensor[2] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 0.4941, 0, 0.8)
|
} else if (parseFloat(obj[code]) < this.levelSensor[3] && this.levelSensor[3] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 0, 0, 0.8)
|
} else if (parseFloat(obj[code]) < this.levelSensor[4] && this.levelSensor[4] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0.6000, 0, 0.2980, 0.8)
|
} else {
|
if (this.levelSensor[5] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0.4941, 0.4941, 0.1373, 0.8)
|
} else {
|
continue
|
}
|
}
|
}
|
var A = new AMap.Text({
|
text: code === 'a21005' || code === 'a99054' ? parseInt(parseFloat(obj[code]) * 100) / 100 === 0 ? '0' : parseInt(parseFloat(obj[code]) * 100) / 100 : parseInt(obj[code]) === 0 ? '0' : parseInt(obj[code]),
|
position: [parseFloat(obj.flylon), parseFloat(obj.flylat)],
|
height: parseFloat(obj.flyhig),
|
verticalAlign: 'center',
|
map: this.map,
|
style: {
|
'background-color': 'rgba(0,0,0,0)',
|
'position': 'relative',
|
'top': '-18px',
|
'width': '32px',
|
'height': '32px',
|
'font-size': '12px',
|
'line-height': '32px',
|
'border-radius': '100%',
|
'border': 'none',
|
'text-align': 'center'
|
}
|
// 'border': 'none',
|
})
|
A.on('click', () => {
|
const keys = Object.keys(obj)
|
const newKeys = []
|
for (let j = 0; j < keys.length; j++) {
|
if (keys[j] === 'a34004') {
|
newKeys[0] = 'a34004'
|
}
|
if (keys[j] === 'a34002') {
|
newKeys[1] = 'a34002'
|
}
|
if (keys[j] === 'a21004') {
|
newKeys[3] = 'a21004'
|
}
|
if (keys[j] === 'a21026') {
|
newKeys[2] = 'a21026'
|
}
|
if (keys[j] === 'a21005') {
|
newKeys[4] = 'a21005'
|
}
|
if (keys[j] === 'a05024') {
|
newKeys[5] = 'a05024'
|
}
|
if (keys[j] === 'a99054') {
|
newKeys[6] = 'a99054'
|
}
|
if (keys[j] === 'flyhig') {
|
newKeys[7] = 'flyhig'
|
}
|
if (keys[j] === 'flylon') {
|
newKeys[8] = 'flylon'
|
}
|
if (keys[j] === 'flylat') {
|
newKeys[9] = 'flylat'
|
}
|
}
|
const array = Array.from(new Set(newKeys.concat(keys))) // [1,2,3,4,5]
|
this.keys = array
|
this.textShowFlag = true
|
this.perPointData = obj
|
})
|
this.textMarkers.code = obj
|
this.textMarkers.markers.push(A)
|
}
|
// geometry.pointAreas.push(0.3,0,0.7,0.5);
|
}
|
points3D.borderWeight = 3
|
object3Dlayer.add(lines)
|
object3Dlayer.add(points3D)
|
this.map.add(object3Dlayer)
|
this.Layler = object3Dlayer
|
},
|
// 关闭文本
|
textClose() {
|
this.textShowFlag = false
|
this.perPointData = null
|
},
|
// 获取组织下存在飞行记录的日期
|
getDate() {
|
axios.get('http://47.99.64.149:8081/uav/queryDate', {
|
params: {
|
organizationId: this.$store.state.orgId
|
},
|
headers: {
|
token: getToken()
|
}
|
}).then(res => {
|
this.asideData.dates = JSON.parse(JSON.stringify(res.data.data.datesStr))
|
if (this.asideData.dates.length > 0) {
|
this.getTimeAreaData(this.asideData.dates[0], 0)
|
setTimeout(() => {
|
if (this.asideData.uavTimeFly[0].timeSlot) {
|
this.getFlyData(this.asideData.uavTimeFly[0].timeSlot[0], 0)
|
}
|
}, 500)
|
}
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_body {
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.el-header, .el-footer {
|
background-color: #B3C0D1;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background-color: #D3DCE6;
|
color: #333;
|
text-align: left;
|
line-height: 52px;
|
}
|
|
/deep/ .el-input__inner {
|
height:40px;
|
}
|
/deep/ .el-picker-panel__body {
|
width: 280px;
|
}
|
.el-main {
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
body > .el-container {
|
margin-bottom: 40px;
|
}
|
|
.el-container:nth-child(5) .el-aside,
|
.el-container:nth-child(6) .el-aside {
|
line-height: 260px;
|
}
|
|
.el-container:nth-child(7) .el-aside {
|
line-height: 320px;
|
}
|
.el-radio-button--medium .el-radio-button__inner {
|
padding: 16px 20px;
|
font-size: 14px;
|
height: 38px;
|
border-radius: 0;
|
width: 80px;
|
}
|
.per-date {
|
height: 50px;line-height: 50px; border-bottom: 1px solid gainsboro;
|
color: #5a5c60;
|
padding-left: 20px;
|
}
|
.per-date:nth-last-child(1){
|
border-bottom: none;
|
}
|
.per-date:hover {
|
cursor:pointer;
|
}
|
.per-date_area{
|
height: 50px;
|
line-height: 50px;
|
border-bottom: 1px solid gainsboro;
|
color: #5a5c60;
|
}
|
.per-date_area:hover {
|
cursor:pointer;
|
}
|
.per-date_area:nth-child(1){
|
border-top: 1px solid #EBEEF5;
|
}
|
.per-date_area:nth-last-child(1){
|
border-bottom: none;
|
}
|
.uav {
|
position: relative;
|
}
|
.active {
|
background-color: #f5f7fa;
|
}
|
.activeArea {
|
background-color: #f5f7fa;
|
}
|
/*文本样式*/
|
.textShow {
|
//padding: .75rem 1.25rem;
|
margin-bottom: 1rem;
|
border-radius: .25rem;
|
position: fixed;
|
top: 11rem;
|
background-color: rgba(255,255,255,.8);
|
width: auto;
|
//height: 360px;
|
min-width: 22rem;
|
border-width: 0;
|
right: 1rem;
|
box-shadow: 0 2px 6px 0 rgba(34,24,21,.08);
|
//box_shadow: -1px 2px 8px 1px rgba(34,24,21,.08) !important
|
}
|
.hr {
|
position: relative;
|
top:2px
|
}
|
.per-text-data {
|
padding: 0 2.25rem;
|
}
|
.per-text-data:nth-last-child(1) {
|
padding-bottom: 8px;
|
}
|
/deep/.el-scrollbar__wrap {
|
overflow-x: hidden;
|
//overflow-y: hidden;
|
}
|
/deep/.el-collapse-item__header {
|
color: #5a5c60;
|
font-size: 16px;
|
}
|
/deep/.el-collapse-item__content {
|
padding-bottom: 5px;
|
}
|
/deep/.el-card__header {
|
padding: 2px 0;
|
text-align: center;
|
}
|
/deep/.el-card__body {
|
padding: 2px 0;
|
}
|
/deep/.amap-logo {
|
display: none!important;
|
}
|
/deep/.amap-copyright{
|
display: none!important;
|
}
|
</style>
|
