<template>
|
<div
|
id="mapContent"
|
v-loading="loading"
|
element-loading-text="请稍等"
|
element-loading-background="rgba(0, 0, 0, 0.6)"
|
>
|
<div v-if="noneData" class="noneData">当前区域设备没有风场</div>
|
<div class="top">
|
<span
|
v-for="(item, index) in params"
|
:key="index"
|
class="left"
|
:class="{ click: changeColor === index }"
|
@click="change(index)"
|
>{{ item }}</span
|
>
|
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
|
<span class="right">{{ times }}秒</span>
|
<span class="dropDown">
|
<img
|
class="realTime_top"
|
:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
|
alt=""
|
@click="turnState"
|
/>
|
<span class="text_Time">{{ dateFormat }}</span>
|
<img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
|
</span>
|
</div>
|
<div class="topDate" style="height: 60px">
|
<div class="jdt" id="eventPro">
|
<div class="mouseDiv">
|
<span class="inText"></span>
|
<div class="sjDiv"></div>
|
</div>
|
<div class="mouseDiv2">
|
<span class="inText2"></span>
|
<div class="sjDiv2"></div>
|
</div>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<li></li>
|
</div>
|
<div class="timeDiv" style="position: relative">
|
<ul id="timeUl">
|
<li style="width: 0.83%"></li>
|
<li></li>
|
<li></li>
|
<li>03</li>
|
<li></li>
|
<li></li>
|
<li>06</li>
|
<li></li>
|
<li></li>
|
<li>09</li>
|
<li></li>
|
<li></li>
|
<li>12</li>
|
<li></li>
|
<li></li>
|
<li>15</li>
|
<li></li>
|
<li></li>
|
<li>18</li>
|
<li></li>
|
<li></li>
|
<li>21</li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<!-- -->
|
<li></li>
|
<li></li>
|
<li>03</li>
|
<li></li>
|
<li></li>
|
<li>06</li>
|
<li></li>
|
<li></li>
|
<li>09</li>
|
<li></li>
|
<li></li>
|
<li>12</li>
|
<li></li>
|
<li></li>
|
<li>15</li>
|
<li></li>
|
<li></li>
|
<li>18</li>
|
<li></li>
|
<li></li>
|
<li>21</li>
|
<li></li>
|
<li></li>
|
<li></li>
|
<!-- -->
|
<li></li>
|
<li></li>
|
<li>03</li>
|
<li></li>
|
<li></li>
|
<li>06</li>
|
<li></li>
|
<li></li>
|
<li>09</li>
|
<li></li>
|
<li></li>
|
<li>12</li>
|
<li></li>
|
<li></li>
|
<li>15</li>
|
<li></li>
|
<li></li>
|
<li>18</li>
|
<li></li>
|
<li></li>
|
<li>21</li>
|
<li></li>
|
<li></li>
|
<li>00</li>
|
</ul>
|
<div
|
style="
|
display: flex;
|
width: 100%;
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
"
|
class="dayDiv"
|
>
|
<p class="p1"></p>
|
<p style="position: relative">
|
<span
|
class="borderLine"
|
style="
|
position: absolute;
|
left: 0;
|
border-left: 1px solid rgba(255, 255, 255, 1);
|
height: 47px;
|
bottom: 0;
|
"
|
></span>
|
<span class="p2"></span>
|
<span
|
class="borderLine"
|
style="
|
position: absolute;
|
right: 0;
|
border-right: 1px solid rgba(255, 255, 255, 1);
|
height: 47px;
|
bottom: 0;
|
"
|
></span>
|
</p>
|
<p class="p3"></p>
|
</div>
|
</div>
|
</div>
|
<regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
|
<div
|
:style="{ background: 'url(' + bg + ') no-repeat' }"
|
class="buttom-left"
|
/>
|
<el-dialog
|
title="污染报警查询"
|
:visible.sync="alarmTableVisible"
|
width="80%"
|
@mouseover.native="mouseOver"
|
@mouseleave.native="mouseLeave"
|
>
|
<div class="topSelect">
|
<div>
|
<el-date-picker
|
v-model="dateValue"
|
style="width: 400px"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
/>
|
<el-select v-model="factorValue" placeholder="选择因子">
|
<el-option
|
v-for="item in factorOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-select v-model="alartValue" placeholder="选择报警类型">
|
<el-option
|
v-for="item in alertOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-button type="primary" @click="alertData(PageSize, currentPage)"
|
>查询</el-button
|
>
|
</div>
|
</div>
|
<el-table
|
:data="
|
gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
|
"
|
border
|
stripe
|
:cell-class-name="tableCellClassName"
|
height="400"
|
>
|
<el-table-column
|
property="alarmInfoId"
|
label="序号"
|
width="50"
|
align="center"
|
/>
|
<el-table-column property="alarm_time" label="报警时间" width="150" />
|
<el-table-column property="deviceName" label="站点名称" width="200" />
|
<el-table-column
|
property="index"
|
label="因子"
|
width="80"
|
align="center"
|
/>
|
<el-table-column
|
property="alarm_type"
|
label="报警类型"
|
width="200"
|
align="center"
|
/>
|
<el-table-column
|
property="alarm_information"
|
label="报警信息"
|
align="center"
|
/>
|
</el-table>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size="PageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalCount"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="alarmTableVisible = false"
|
>关 闭</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import 'leaflet/dist/leaflet.css'
|
import 'leaflet-velocity/dist/leaflet-velocity.css'
|
import L from 'leaflet'
|
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
|
import 'leaflet-velocity/dist/leaflet-velocity'
|
import $ from 'jquery'
|
import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件
|
import { mapGetters } from 'vuex'
|
import { gcj02towgs84 } from '@/assets/json/transform'
|
export default {
|
components: { RegionalOverview },
|
props: {
|
jumpData: Array,
|
weidu: Number,
|
jingdu: Number,
|
monitorPointId: Number,
|
monitorPointIds: Array,
|
},
|
data() {
|
return {
|
timerKey: '', // 用于重新渲染子组件
|
map: null,
|
code: [],
|
latlng: [],
|
noneData: false,
|
params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
|
changeColor: 0,
|
times: 1,
|
sensorKey: 'a34002',
|
keys: [],
|
bg: require('@/assets/images/tl_PM10.png'),
|
windState: 1,
|
windStateText: '风场图',
|
keyData: [],
|
lats: [],
|
lngs: [],
|
accountId: this.$store.state.accountId,
|
orgId: this.$store.state.orgId,
|
coordinates: [],
|
markerObject: [],
|
loading: true,
|
ws: null,
|
lockReconnect: false, // 是否真正建立连接
|
timeout: 58 * 1000, // 30秒一次心跳
|
timeoutObj: null, // 心跳心跳倒计时
|
serverTimeoutObj: null, // 心跳倒计时
|
timeoutnum: null, // 断开 重连倒计时,
|
jingduNew: this.jingdu,
|
weiduNew: this.weidu,
|
alartValue: 'all',
|
dateValue: '',
|
factorValue: 'all',
|
// 总数据
|
gridData: [],
|
// 默认显示第几页
|
currentPage: 1,
|
// 总条数，根据接口获取数据长度(注意：这里不能为空)
|
totalCount: 0,
|
// 个数选择器（可修改）
|
pageSizes: [10, 20, 30, 40],
|
// 默认每页显示的条数（可修改）
|
PageSize: 20,
|
factorOptions: [
|
{
|
label: '全部因子',
|
value: 'all',
|
},
|
{
|
label: 'PM10',
|
value: 'PM10',
|
},
|
{
|
label: 'PM2.5',
|
value: 'PM2.5',
|
},
|
{
|
label: 'SO2',
|
value: 'SO2',
|
},
|
{
|
label: 'NO2',
|
value: 'NO2',
|
},
|
{
|
label: 'CO',
|
value: 'CO',
|
},
|
{
|
label: 'O3',
|
value: 'O3',
|
},
|
],
|
alertOptions: [
|
{
|
label: '全部报警类型',
|
value: 'all',
|
},
|
{
|
label: '超限',
|
value: 'overrun',
|
},
|
{
|
label: '突然高',
|
value: 'sudden',
|
},
|
{
|
label: '超过国控站点100%',
|
value: 'state100',
|
},
|
{
|
label: '超过国控站点150%',
|
value: 'state150',
|
},
|
{
|
label: '超过国控站点250%',
|
value: 'state250',
|
},
|
{
|
label: '超过市区均值100%',
|
value: 'city100',
|
},
|
{
|
label: '超过市区均值150%',
|
value: 'city150',
|
},
|
{
|
label: '超过市区均值250%',
|
value: 'city250',
|
},
|
],
|
currentDate: '',
|
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
|
showOrHidden: true,
|
dateFormat: '',
|
alarmTableVisible: false,
|
chooseTimeInfo: false, // 是否选择了时间点
|
chooseTime: false,
|
dateInfo: '', // 选择的日期
|
timeInfo: '', // 选择的时间
|
nyr: '', // 选择的年月日
|
}
|
},
|
computed: {
|
...mapGetters(['regionCode']),
|
},
|
watch: {
|
dateValue(n, o) {
|
// console.log(n)
|
// this.newDate()
|
},
|
regionCode(newCode, oldCode) {
|
this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
},
|
},
|
mounted() {
|
this.currentHour()
|
this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))
|
// 初始化地图容器
|
this.initMap()
|
|
// 事件代理
|
this.eventProxy()
|
},
|
created() {
|
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
|
this.jingduNew = newLL[1]
|
this.weiduNew = newLL[0]
|
// 初始化风场数据
|
this.windData()
|
this.change(0)
|
this.getParamsData()
|
this.windDir()
|
this.newDate()
|
this.alertData(this.PageSize, this.currentPage)
|
},
|
beforeDestroy() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
// console.log('timer定时器销毁成功')
|
}
|
if (this.timer2) {
|
// console.log(this.timer2)
|
clearInterval(this.timer2)
|
// console.log('timer2定时器销毁成功')
|
}
|
// 离开页面时关闭websocket
|
if (this.ws) {
|
// console.log('WS关闭')
|
this.ws.close()
|
}
|
},
|
methods: {
|
// 拿到某天的日期和星期
|
getDayXQ(day) {
|
var days = new Date().getDay() // 星期
|
var rq = '' // 日期
|
if (day === 'today') {
|
rq = this.newData(0)
|
} else if (day === 'yesterday') {
|
days = (days + 7 - 1) % 7
|
rq = this.newData(-1) // 昨天日期
|
} else if (day === 'beforeYea') {
|
days = (days + 7 - 2) % 7
|
rq = this.newData(-2) // 前天日期
|
}
|
switch (days) {
|
case 1:
|
days = '周一'
|
break
|
case 2:
|
days = '周二'
|
break
|
case 3:
|
days = '周三'
|
break
|
case 4:
|
days = '周四'
|
break
|
case 5:
|
days = '周五'
|
break
|
case 6:
|
days = '周六'
|
break
|
case 0:
|
days = '周日'
|
break
|
}
|
return `${rq}(${days})`
|
},
|
// 计算当天之前或者之后的日期
|
newData(day, info) {
|
var today = new Date()
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
today.setTime(targetday_milliseconds)
|
var tYear = today.getFullYear()
|
var tMonth = today.getMonth() + 1
|
tMonth = tMonth < 10 ? '0' + tMonth : tMonth
|
var tDate = today.getDate()
|
tDate = tDate < 10 ? '0' + tDate : tDate
|
if (info === 'nyr') {
|
return tYear + '-' + tMonth + '-' + tDate
|
} else {
|
return tMonth + '/' + tDate
|
}
|
},
|
// 事件代理
|
eventProxy() {
|
// 拿到今天的日期和星期
|
var ul = document.querySelector('#eventPro')
|
var lis = document.querySelectorAll('#eventPro>li')
|
var timeUl = document.querySelector('#timeUl')
|
var timeLis = document.querySelectorAll('#timeUl>li')
|
var mouseDiv = document.querySelector('.mouseDiv')
|
var mouseDiv2 = document.querySelector('.mouseDiv2')
|
var inText = document.querySelector('.inText')
|
var inText2 = document.querySelector('.inText2')
|
var p1 = document.querySelector('.p1')
|
var p2 = document.querySelector('.p2')
|
var p3 = document.querySelector('.p3')
|
p3.innerHTML = this.getDayXQ('today')
|
p2.innerHTML = this.getDayXQ('yesterday')
|
p1.innerHTML = this.getDayXQ('beforeYea')
|
var greenInfo = 0
|
var that = this
|
ul.onclick = (e) => {
|
var target = e.target
|
if (target.tagName.toLowerCase() === 'li') {
|
// 给所有的li颜色设为初始值
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
// var li = this.querySelectorAll('li')
|
// var index = Array.prototype.indexOf.call(li, target)
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'green'
|
if (lis[i] === target) {
|
// mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
mouseDiv2.style.left = 1.36986 * (i + 1) + '%'
|
mouseDiv2.style.transform = 'translateX(-50%)'
|
mouseDiv2.style.display = 'block'
|
var times = (i - 0 + 1) % 24
|
times = times > 9 ? times : '0' + times
|
inText2.innerHTML = times + ':00'
|
this.chooseTimeInfo = true // 选择时间点
|
this.chooseTime = true // 选择时间点
|
if ((i + 1) / 24 < 1) {
|
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
console.log(111, this.nyr)
|
} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
|
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
console.log(222, this.nyr)
|
} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
|
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
console.log(333, this.nyr)
|
} else {
|
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
console.log(444, this.nyr)
|
}
|
break
|
}
|
}
|
}
|
that.times = 1
|
that.getParamsData()
|
}
|
// timeUl绑定点击事件
|
timeUl.onclick = (e) => {
|
// 给所有的li颜色设为初始值
|
var target = e.target
|
if (target.tagName.toLowerCase() === 'li') {
|
for (let i = 0; i < timeLis.length; i++) {
|
if (timeLis[i] === target) {
|
greenInfo = i
|
// mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
mouseDiv2.style.left = 1.36986 * i + '%'
|
mouseDiv2.style.transform = 'translateX(-50%)'
|
mouseDiv2.style.display = 'block'
|
var times = i % 24
|
times = times > 9 ? times : '0' + times
|
inText2.innerHTML = times + ':00'
|
this.chooseTimeInfo = true // 选择时间点
|
this.chooseTime = true // 选择时间点
|
if (i / 24 < 1) {
|
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
console.log(111, this.nyr)
|
} else if (i / 24 < 2 && i / 24 >= 1) {
|
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
console.log(222, this.nyr)
|
} else if (i / 24 < 3 && i / 24 >= 2) {
|
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
console.log(333, this.nyr)
|
} else {
|
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
console.log(444, this.nyr)
|
}
|
break
|
}
|
}
|
for (let i = 0; i < lis.length; i++) {
|
if (i < greenInfo) {
|
lis[i].style.backgroundColor = 'green'
|
} else {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
}
|
// console.log('下边点击进来了', greenInfo, 'index')
|
}
|
that.times = 1
|
that.getParamsData()
|
}
|
// 鼠标移入移出事件
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].onmouseenter = function () {
|
// console.log('mouseenter', i)
|
// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
mouseDiv.style.transform = 'translateX(-50%)'
|
mouseDiv.style.left = 1.36986 * (i + 1) + '%'
|
mouseDiv.style.display = 'block'
|
var times = (i - 0 + 1) % 24
|
times = times > 9 ? times : '0' + times
|
inText.innerHTML = times + ':00'
|
// console.log(mouseDiv)
|
}
|
lis[i].onmouseleave = function () {
|
mouseDiv.style.display = 'none'
|
// console.log('移出事件', i)
|
}
|
}
|
for (let i = 0; i < timeLis.length; i++) {
|
timeLis[i].onmouseenter = function () {
|
// console.log('mouseenter', i)
|
// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
mouseDiv.style.left = 1.36986 * i + '%'
|
mouseDiv.style.transform = 'translateX(-50%)'
|
mouseDiv.style.display = 'block'
|
var times = i % 24
|
times = times > 9 ? times : '0' + times
|
inText.innerHTML = times + ':00'
|
// console.log(mouseDiv)
|
}
|
timeLis[i].onmouseleave = function () {
|
mouseDiv.style.display = 'none'
|
// console.log('移出事件', i)
|
}
|
}
|
},
|
// 当前小时默认值
|
currentHour() {
|
// const aData = new Date()
|
// const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
// const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
// const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
|
// const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
// this.dateFormat = currentDate.toString()
|
const aData = new Date()
|
const month =
|
aData.getMonth() < 9
|
? '0' + (aData.getMonth() + 1)
|
: aData.getMonth() + 1
|
const date =
|
aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
|
const hour = aData.getHours()
|
const currentDate =
|
aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
this.dateFormat = currentDate.toString()
|
},
|
// 日期格式化
|
newDate() {
|
var aData = new Date()
|
var month =
|
aData.getMonth() < 9
|
? '0' + (aData.getMonth() + 1)
|
: aData.getMonth() + 1
|
var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
this.currentDate = aData.getFullYear() + '-' + month + '-' + date
|
// console.log(this.currentDate)
|
this.dateValue = [this.currentDate, this.currentDate]
|
},
|
// 报警弹窗移入
|
mouseOver() {
|
this.map.scrollWheelZoom.disable()
|
},
|
// 报警弹窗移出
|
mouseLeave() {
|
this.map.scrollWheelZoom.enable()
|
},
|
// initWebpack() {
|
// // 拼写参数
|
// var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
|
// // 拼写URL
|
// var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
|
// socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
// this.ws = new WebSocket(socketUrl)
|
// this.ws.onopen = this.onopen
|
// this.ws.onmessage = this.onmessage
|
// this.ws.onclose = this.onclose
|
// this.ws.onerror = this.onerror
|
// },
|
// reconnect() { // 重新连接
|
// var that = this
|
// if (that.lockReconnect) {
|
// return
|
// }
|
// that.lockReconnect = true
|
// // 没连接上会一直重连，设置延迟避免请求过多
|
// that.timeoutnum && clearTimeout(that.timeoutnum)
|
// that.timeoutnum = setTimeout(function() {
|
// // 新连接
|
// that.initWebpack()
|
// that.lockReconnect = false
|
// }, 5000)
|
// },
|
// reset() { // 重置心跳
|
// var that = this
|
// // 清除时间
|
// clearTimeout(that.timeoutObj)
|
// clearTimeout(that.serverTimeoutObj)
|
// // 重启心跳
|
// that.start()
|
// },
|
// start() { // 开启心跳
|
// // console.log('开启心跳')
|
// var self = this
|
// self.timeoutObj && clearTimeout(self.timeoutObj)
|
// self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
|
// self.timeoutObj = setTimeout(function() {
|
// // 这里发送一个心跳，后端收到后，返回一个心跳消息，
|
// if (self.ws.readyState === 1) { // 如果连接正常
|
// self.ws.send('heartCheck')
|
// } else { // 否则重连
|
// self.reconnect()
|
// }
|
// self.serverTimeoutObj = setTimeout(function() {
|
// // 超时关闭
|
// self.ws.close()
|
// }, self.timeout)
|
// }, self.timeout)
|
// },
|
// onopen() {
|
// // console.log('连接开启')
|
// // 开启心跳
|
// this.start()
|
// },
|
// onmessage(msg) {
|
// var that = this
|
// if (JSON.parse(msg.data).名称) {
|
// that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
// } else {
|
// that.wsData1 = msg.data
|
// if (that.windState === 2) {
|
// for (let i = 0; i < that.keyData.length; i++) {
|
// // 更新风向标
|
// // 遍历出(通过mac匹配)要更新的风向标
|
// if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
|
// var blueIcon1 = L.icon({ // 设置图标样式
|
// iconUrl: require('@/assets/images/icoWind03.png'),
|
// iconSize: [30, 30],
|
// iconAnchor: [15, 25],
|
// className: 'iconWind'
|
// })
|
// // L.marker用来在地图中放置注记
|
// that.marker = L.marker([that.lats[i], that.lngs[i]], {
|
// icon: blueIcon1,
|
// rotationAngle: Number(JSON.parse(that.wsData1).风向)
|
// })
|
// if (i === 0) {
|
// that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
// that.map.addLayer(that.marker)
|
// } else {
|
// that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
// for (let j = 0; j < that.markerObject.length; j++) {
|
// if (that.coordinates[0] === that.markerObject[j].mac1) {
|
// that.map.removeLayer(that.markerObject[j].marker)
|
// that.map.addLayer(that.marker)
|
// } else if (that.coordinates[i] === that.markerObject[j].mac1) {
|
// that.map.removeLayer(that.markerObject[j].marker)
|
// that.map.addLayer(that.marker)
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// // 收到服务器信息，心跳重置
|
// this.reset()
|
// },
|
// onclose(e) {
|
// // console.log('连接关闭')
|
// // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
|
// // 重连
|
// this.reconnect()
|
// },
|
// onerror(e) {
|
// console.log('出现错误')
|
// // 重连
|
// this.reconnect()
|
// },
|
// ws方法
|
// wsStart() {
|
// var that = this
|
// // 拼写参数
|
// var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
|
// // 拼写URL
|
// var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
|
// // 替换http为WS
|
// // console.log(socketUrl)
|
// socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
// this.ws = new WebSocket(socketUrl)
|
// // if (this.ws) {
|
// // this.ws.close()
|
// // console.log('ws心跳关闭')
|
// // }
|
// // this.ws = new WebSocket(socketUrl)
|
// // console.log('ws心跳开启')
|
|
// this.ws.onopen = function() {
|
// // console.log('websocket开启成功')
|
// }
|
// 获得消息事件
|
// this.ws.onmessage = function(msg) {
|
// if (JSON.parse(msg.data).名称) {
|
// that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
// // console.log(that.wsData2)
|
// } else {
|
// that.wsData1 = msg.data
|
// // console.log(that.wsData1)
|
// if (that.windState === 2) {
|
// for (let i = 0; i < that.keyData.length; i++) {
|
// // 更新风向标
|
// // 遍历出(通过mac匹配)要更新的风向标
|
// if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
|
// var blueIcon1 = L.icon({
|
// iconUrl: require('@/assets/images/icoWind03.png'),
|
// iconSize: [30, 30],
|
// iconAnchor: [15, 25],
|
// className: 'iconWind'
|
// })
|
// that.marker = L.marker([that.lats[i], that.lngs[i]], {
|
// icon: blueIcon1,
|
// rotationAngle: Number(JSON.parse(that.wsData1).风向)
|
// })
|
// if (i === 0) {
|
// that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
// that.map.addLayer(that.marker)
|
// } else {
|
// that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
// for (let j = 0; j < that.markerObject.length; j++) {
|
// if (that.coordinates[0] === that.markerObject[j].mac1) {
|
// that.map.removeLayer(that.markerObject[j].marker)
|
// that.map.addLayer(that.marker)
|
// } else if (that.coordinates[i] === that.markerObject[j].mac1) {
|
// that.map.removeLayer(that.markerObject[j].marker)
|
// that.map.addLayer(that.marker)
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// },
|
// 百度经纬度转高德经纬度
|
bd09togcj02(bd_lon, bd_lat) {
|
var x_pi = (3.14159265358979324 * 3000.0) / 180.0
|
var x = bd_lon - 0.0065
|
var y = bd_lat - 0.006
|
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
|
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
|
var gg_lng = z * Math.cos(theta)
|
var gg_lat = z * Math.sin(theta)
|
return [gg_lat, gg_lng]
|
},
|
// /**
|
// * GCJ02 转换为 WGS84
|
// * @param lng
|
// * @param lat
|
// * @returns {*[]}
|
// */
|
// gcj02towgs84(lng, lat) {
|
// if (this.out_of_china(lng, lat)) {
|
// return [lat,lng]
|
// } else {
|
// var dlat = this.transformlat(lng - 105.0, lat - 35.0);
|
// var dlng = this.transformlng(lng - 105.0, lat - 35.0);
|
// var radlat = lat / 180.0 * PI;
|
// var magic = Math.sin(radlat);
|
// magic = 1 - ee * magic * magic;
|
// var sqrtmagic = Math.sqrt(magic);
|
// dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
// dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
// var mglat = lat + dlat;
|
// var mglng = lng + dlng;
|
// return [ lat * 2 - mglat,lng * 2 - mglng]
|
// }
|
// },
|
//
|
// transformlat(lng, lat) {
|
// var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
|
// ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
// ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
|
// ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
|
// return ret
|
// },
|
// transformlng(lng, lat) {
|
// var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
// ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
// ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
|
// ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
|
// return ret
|
// },
|
// /**
|
// * 判断是否在国内，不在国内则不做偏移
|
// * @param lng
|
// * @param lat
|
// * @returns {boolean}
|
// */
|
// out_of_china(lng, lat) {
|
// return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
|
// },
|
// 请求设备坐标,当前的
|
deviceMaker() {
|
// 遍历所有图层
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
const that = this
|
this.$request({
|
url: '/historyFiveMinutely/queryDeviceAndData',
|
method: 'get',
|
params: {
|
sensorCode: this.sensorKey,
|
organizationId: this.$store.state.orgId,
|
regionCode: this.$store.state.regionCode,
|
chooseTime: this.chooseTime,
|
time: this.nyr,
|
},
|
}).then((data) => {
|
// console.log('五分钟设备数据')
|
console.log(data, 'tata')
|
that.loading = false
|
this.markDeviceSite(data)
|
})
|
},
|
// 标记设备点
|
markDeviceSite(data) {
|
// data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]
|
// data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]
|
var keyData = data.data.devices
|
this.keyData = data.data.devices
|
// 遍历国控站位置
|
this.stateControlStation()
|
var group = L.layerGroup().addTo(this.map)
|
this.keys = []
|
for (let i = 0; i < keyData.length; i++) {
|
if (keyData[i].a34002) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
|
} else if (keyData[i].a34004) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
|
} else if (keyData[i].a21026) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
|
} else if (keyData[i].a21004) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
|
} else if (keyData[i].a21005) {
|
this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
|
} else if (keyData[i].a05024) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
|
} else if (keyData[i].a99054) {
|
this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
|
} else {
|
// for (let j = 0; j < keyData.length; j++) {
|
this.keys.push(JSON.parse('null'))
|
// }
|
}
|
// console.log(this.keys)
|
// const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)
|
// var lat = newL[0]
|
// this.lats[i] = newL[0]
|
// var lng = newL[1]
|
// this.lngs[i] = newL[1]
|
var lat = keyData[i].latitude
|
this.lats[i] = keyData[i].latitude
|
var lng = keyData[i].longitude
|
this.lngs[i] = keyData[i].longitude
|
// 对比各个key中的标准数据，标记展示不同的颜色
|
var colorNum = 7
|
if (keyData[i].a34002) {
|
var data = Math.floor(JSON.parse(keyData[i].a34002))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 50: {
|
colorNum = 1
|
break
|
}
|
case data <= 150: {
|
colorNum = 2
|
break
|
}
|
case data <= 250: {
|
colorNum = 3
|
break
|
}
|
case data <= 350: {
|
colorNum = 4
|
break
|
}
|
case data <= 420: {
|
colorNum = 5
|
break
|
}
|
case data > 420: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a34004) {
|
var data = Math.floor(JSON.parse(keyData[i].a34004))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 35: {
|
colorNum = 1
|
break
|
}
|
case data <= 75: {
|
colorNum = 2
|
break
|
}
|
case data <= 115: {
|
colorNum = 3
|
break
|
}
|
case data <= 150: {
|
colorNum = 4
|
break
|
}
|
case data <= 250: {
|
colorNum = 5
|
break
|
}
|
case data > 250: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21026) {
|
var data = Math.floor(JSON.parse(keyData[i].a21026))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 50: {
|
colorNum = 1
|
break
|
}
|
case data <= 150: {
|
colorNum = 2
|
break
|
}
|
case data <= 475: {
|
colorNum = 3
|
break
|
}
|
case data <= 800: {
|
colorNum = 4
|
break
|
}
|
case data <= 1600: {
|
colorNum = 5
|
break
|
}
|
case data > 1600: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21004) {
|
var data = Math.floor(
|
Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
|
)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 40: {
|
colorNum = 1
|
break
|
}
|
case data <= 80: {
|
colorNum = 2
|
break
|
}
|
case data <= 180: {
|
colorNum = 3
|
break
|
}
|
case data <= 280: {
|
colorNum = 4
|
break
|
}
|
case data <= 565: {
|
colorNum = 5
|
break
|
}
|
case data > 565: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21005) {
|
var data = JSON.parse(keyData[i].a21005).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 2: {
|
colorNum = 1
|
break
|
}
|
case data <= 4: {
|
colorNum = 2
|
break
|
}
|
case data <= 14: {
|
colorNum = 3
|
break
|
}
|
case data <= 24: {
|
colorNum = 4
|
break
|
}
|
case data <= 36: {
|
colorNum = 5
|
break
|
}
|
case data > 36: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a05024) {
|
var data = Math.floor(JSON.parse(keyData[i].a05024))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 160: {
|
colorNum = 1
|
break
|
}
|
case data <= 200: {
|
colorNum = 2
|
break
|
}
|
case data <= 300: {
|
colorNum = 3
|
break
|
}
|
case data <= 400: {
|
colorNum = 4
|
break
|
}
|
case data <= 800: {
|
colorNum = 5
|
break
|
}
|
case data > 800: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a99054) {
|
var data = JSON.parse(keyData[i].a99054).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 0.5: {
|
colorNum = 1
|
break
|
}
|
case data <= 1: {
|
colorNum = 2
|
break
|
}
|
case data <= 1.5: {
|
colorNum = 3
|
break
|
}
|
case data <= 2: {
|
colorNum = 4
|
break
|
}
|
case data <= 3: {
|
colorNum = 5
|
break
|
}
|
case data > 3: {
|
colorNum = 6
|
break
|
}
|
// default:
|
// break
|
}
|
}
|
|
var blueIcon = L.icon({
|
iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
|
// iconUrl: require('@/assets/icon/ico2.png'),
|
iconSize: [60, 60],
|
iconAnchor: [30, 48],
|
className: 'my-device',
|
})
|
// 添加标记到地图
|
L.marker([lat, lng], {
|
icon: blueIcon,
|
}).addTo(group)
|
// console.log(JSON.parse(this.keys[i]))
|
var myIcon = L.divIcon({
|
html: this.keys[i],
|
className: 'my-div-icon',
|
iconSize: [60, 60],
|
iconAnchor: [40, 40],
|
})
|
var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
|
// 给标记添加鼠标移入事件，mouseover事件会冒泡
|
var _this = this
|
marker.on('mouseover', function (e) {
|
this.noneData = false
|
// $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {
|
// var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
// // console.log(data)
|
// this.bindPopup(data).openPopup()
|
// })
|
_this
|
.$request({
|
url: '/historyFiveMinutely/queryPopDataByMac',
|
method: 'get',
|
params: {
|
mac: keyData[i].mac,
|
chooseTime: _this.chooseTime,
|
time: _this.nyr,
|
},
|
})
|
.then((res) => {
|
if (res.message == '操作目标不存在') {
|
var datafalse = '暂无五分钟数据'
|
this.bindPopup(datafalse).openPopup()
|
return
|
}
|
for (const key in res.data) {
|
var tempDecimal = res.data[key]
|
.replace(/[^\d.]/g, '')
|
.split('.')[1]
|
if (key !== '名称' && key !== '时间') {
|
if (Number(tempDecimal) === 0) {
|
res.data[key] =
|
parseInt(res.data[key]) + res.data[key].split(' ')[1]
|
} else {
|
res.data[key] =
|
Number(res.data[key].split(' ')[0]).toFixed(2) +
|
res.data[key].split(' ')[1]
|
}
|
// var num = res.data[key].split(' ')[0]
|
// res.data[key] = (num - 0).toFixed(3)
|
}
|
}
|
var data = JSON.stringify(res.data)
|
.replace(/,/g, `<br>`)
|
.replace(/{|}|"/g, '')
|
this.bindPopup(data).openPopup()
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
})
|
// 给标记点添加鼠标移出事件
|
marker.on('mouseout', function (e) {
|
this.noneData = false
|
this.bindPopup().closePopup()
|
})
|
}
|
},
|
// 给标记点添加移入移出事件
|
// moveInAndOut() {
|
//
|
// },
|
// 国控站经纬度
|
stateControlStation() {
|
// this.$axios.get('monitorPoint/queryStateControlStation', {
|
this.$request({
|
url: '/govMonitorPoint/queryStateControlStation',
|
method: 'get',
|
params: {
|
regionCode: 130900,
|
sensorCode: 'a34002',
|
},
|
})
|
.then((res) => {
|
// console.log('国控站信息')
|
// console.log(res)
|
var gkData = res.data
|
var group = L.layerGroup().addTo(this.map)
|
for (let i = 0; i < gkData.length; i++) {
|
var glat = gkData[i].latitude
|
var glng = gkData[i].longitude
|
var gIcon = L.icon({
|
iconUrl: require('@/assets/icon/gk.png'),
|
// iconUrl:require('@/assets/images/tl_PM10.png'),
|
iconSize: [55, 55],
|
iconAnchor: [13, 21],
|
className: 'my-device',
|
})
|
// 添加标记到地图
|
L.marker([glat, glng], {
|
icon: gIcon,
|
}).addTo(group)
|
var myIcon = L.divIcon({
|
html: gkData[i].data,
|
className: 'my-div-icon-g',
|
iconSize: 30,
|
})
|
L.marker([glat, glng], {
|
icon: myIcon,
|
}).addTo(group)
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 切换风场风向状态
|
toggleWindState() {
|
if (this.ws) {
|
this.ws.close()
|
}
|
if (this.windState === 2) {
|
this.windState = 1
|
this.windStateText = '风场图'
|
this.initData()
|
// console.log(this.windState)
|
} else if (this.windState === 1) {
|
this.windState = 2
|
this.windStateText = '风向标'
|
this.windDir()
|
// console.log(this.windState)
|
}
|
},
|
// 请求风向标
|
windDir() {
|
// console.log('加载风向')
|
// console.log('风向标ws请求开始')
|
// const that = this
|
// 遍历所有图层
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
// 执行生成设备点方法
|
this.deviceMaker()
|
// 执行ws方法
|
// this.wsStart()
|
// this.initWebpack()
|
// console.log('这是ws需要的三个参数')
|
// console.log(this.accountId, this.orgId, this.regionCode)
|
// this.timer2 = setInterval(() => {
|
// if (this.ws) {
|
// this.ws.close()
|
// console.log('ws心跳关闭')
|
// }
|
// // 执行ws方法
|
// this.wsStart()
|
// console.log('ws心跳开启')
|
// }, 60000)
|
},
|
// 获得父组件改变regionCode子组件请求api功能
|
getRegionApiRequest() {
|
// console.log(this.$store.state.regionCode)
|
// this.ws.close()
|
// console.log('ws关闭')
|
// 请求更新风场数据
|
this.getParamsData()
|
setTimeout(() => {
|
$.getJSON(
|
'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
|
{ monitorPointId: this.$store.state.monitorPointId },
|
(data) => {
|
// 遍历所有图层
|
// console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
|
// console.log(data)
|
// this.map.eachLayer(function(layer) {
|
// // 卸载之前的风场图层
|
// if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
// layer.remove()
|
// }
|
// })
|
this.map.setView([data[2], data[1]], 12)
|
// console.log('跳转成功')
|
}
|
)
|
}, 1000)
|
if (this.windState === 1) {
|
// this.ws.close()
|
this.initData()
|
// console.log('请求风场图')
|
} else if (this.windState === 2) {
|
this.windDir()
|
// console.log('请求风向标')
|
}
|
// 请求设备坐标
|
// this.deviceMaker()
|
// this.getParamsData()
|
},
|
// 子组件地图的跳转中心点方法
|
jumpMap(LngLat) {
|
// console.log('我是子组件方法')
|
// console.log(this.jumpData)
|
// console.log(LngLat)
|
this.map.setView(LngLat, 18)
|
},
|
// 请求更新风场数据
|
getParamsData() {
|
clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
this.currentHour()
|
this.times--
|
if (this.times === 0) {
|
// 时间点选择标记消失
|
if (!this.chooseTimeInfo) {
|
var mouseDiv2 = document.querySelector('.mouseDiv2')
|
mouseDiv2.style.display = 'none'
|
var lis = document.querySelectorAll('#eventPro>li')
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
this.chooseTime = false
|
// console.log('rgb000')
|
} else {
|
this.chooseTimeInfo = false
|
// console.log('else')
|
}
|
// console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
|
// clearInterval(this.timer)
|
if (this.windState === 1) {
|
// this.ws.close()
|
this.initData()
|
// console.log('请求风场图')
|
} else if (this.windState === 2) {
|
this.windDir()
|
// console.log('请求风向标')
|
}
|
setTimeout(() => {
|
this.change(this.changeColor)
|
this.times = 300
|
}, 100)
|
}
|
}, 1000)
|
},
|
// 初始化地图容器
|
initMap() {
|
// console.log('这是index传到map的经纬度')
|
// console.log(this.weidu)
|
// console.log(this.jingdu)
|
var map = L.map('mapContent', {
|
minZoom: 2,
|
maxZoom: 18,
|
center: [this.weiduNew, this.jingduNew],
|
zoom: 14,
|
zoomControl: false, // 缩放组件
|
attributionControl: false, // 去掉右下角logol
|
crs: L.CRS.EPSG3857, // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
|
})
|
// 定义图层样式
|
L.tileLayer(
|
'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
|
).addTo(map)
|
// L.tileLayer(
|
// 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
|
// ).addTo(map)
|
this.map = map // data上需要挂载
|
window.map = map
|
},
|
// 更改不同的值区间
|
change(index) {
|
this.changeColor = index
|
var pr = ''
|
switch (index) {
|
case 0:
|
pr = 'a34002'
|
this.bg = require('@/assets/images/tl_PM10.png')
|
break
|
case 1:
|
pr = 'a34004'
|
this.bg = require('@/assets/images/tl_PM2.5.png')
|
break
|
case 2:
|
pr = 'a21026'
|
this.bg = require('@/assets/images/tl_SO2.png')
|
break
|
case 3:
|
pr = 'a21004'
|
this.bg = require('@/assets/images/tl_NO2.png')
|
break
|
case 4:
|
pr = 'a21005'
|
this.bg = require('@/assets/images/tl_CO.png')
|
break
|
case 5:
|
pr = 'a05024'
|
this.bg = require('@/assets/images/tl_O3.png')
|
break
|
case 6:
|
pr = 'a99054'
|
this.bg = require('@/assets/images/tl_TVOCNew.png')
|
break
|
}
|
this.sensorKey = pr
|
// 请求设备坐标
|
// this.toggleWindState()
|
if (this.windState === 1) {
|
this.initData()
|
} else if (this.windState === 2) {
|
this.windDir()
|
}
|
},
|
// 请求风场图接口
|
initData() {
|
// console.log('加载风场')
|
// const that = this
|
// 请求更新风场数据
|
// console.log(this.monitorPointId)
|
// 遍历所有图层
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
this.deviceMaker()
|
// console.log('请求风场之前')
|
// $.ajaxSettings.async = false
|
// for (let i = 0; i < this.monitorPointIds.length; i++) {
|
this.windData()
|
// }
|
},
|
// 风场图数据
|
windData() {
|
this.$request({
|
url: '/monitorPoint/getWindData',
|
method: 'get',
|
params: {
|
monitorPointIds: this.monitorPointIds.toString(),
|
chooseTime: this.chooseTime,
|
time: this.nyr,
|
},
|
})
|
.then((res) => {
|
// console.log('新风场数据')
|
// console.log(res)
|
// if (res.data[0][0].data.length === 0) {
|
// this.noneData = true
|
// }
|
// 生成风场实例
|
// var data2 = res.data[0]
|
// data2[1].header.parameterNumberName = 'northward_wind'
|
// data2[0].header.parameterUnit = 'm.s-1'
|
// data2[1].header.parameterUnit = 'm.s-1'
|
// data2[0].header.dx = 0.00234842479
|
// data2[1].header.dx = 0.00234842479
|
// data2[0].header.dy = 0.0018464922
|
// data2[1].header.dy = 0.0018464922
|
// console.log(data2, 'data2')
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {
|
// 显示信息配置
|
// velocityType: 'Global Wind',
|
velocityType: 'GBR Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data',
|
},
|
data: res.data[0], // 数据 格式可参照
|
// data: data2,
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: [
|
'#A2D839',
|
'#7EB530',
|
'#6E9F26',
|
'#4E7522',
|
'#345B1B',
|
'#186303',
|
'#175103',
|
'#053F03',
|
],
|
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
|
})
|
velocityLayer.addTo(this.map) // 添加到图上
|
// console.log('风场数据')
|
// console.log(res.data[0])
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 将页码，及每页显示的条数以参数传递提交给后台
|
alertData(n1, n2) {
|
// 这里使用axios，使用时请提前引入
|
this.$request({
|
url: '/alarmInfo/getDataByConditionWithoutPage',
|
method: 'get',
|
params: {
|
organization_id: this.$store.state.orgId,
|
// 每页显示的条数
|
// size: n1,
|
// 显示第几页
|
// current: n2,
|
startTime: this.dateValue[0],
|
endTime: this.dateValue[1],
|
index: this.factorValue,
|
alarmType: this.alartValue,
|
},
|
}).then((res) => {
|
// console.log('分页数据')
|
// console.log(res)
|
var tempData = res.data
|
// console.log(tempData)
|
for (let i = 0; i < tempData.alarmInfos.length; i++) {
|
tempData.alarmInfos[i].alarmInfoId = i + 1
|
}
|
// 将数据赋值给tableData
|
this.gridData = tempData.alarmInfos
|
// 将数据的长度赋值给totalCount
|
this.totalCount = tempData.alarmInfos.length
|
})
|
},
|
// 分页
|
// 每页显示的条数
|
handleSizeChange(val) {
|
// 改变每页显示的条数
|
this.PageSize = val
|
// 注意：在改变每页显示的条数时，要将页码显示到第一页
|
this.currentPage = 1
|
},
|
// 显示第几页
|
handleCurrentChange(val) {
|
// 改变默认的页数
|
this.currentPage = val
|
// console.log(val)
|
},
|
// 单元格样式
|
tableCellClassName({ row, column, rowIndex, columnIndex }) {
|
for (const key in row) {
|
if (key === column.property) {
|
const code = column.property
|
if (code === 'alarm_type') {
|
// console.log(row[key])
|
if (row[key] === 0 || row[key] === '' || row[key] === null) {
|
return ''
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {
|
return 'yellow'
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {
|
return 'orange'
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {
|
return 'red'
|
}
|
}
|
}
|
}
|
return ''
|
},
|
turnState() {
|
// console.log(this.showOrHidden)
|
if (this.showOrHidden === true) {
|
this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
|
} else {
|
this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
|
}
|
this.showOrHidden = !this.showOrHidden
|
},
|
closeAlarmTableVisible() {
|
this.$store.state.alarmTableVisible = false
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
html,
|
body,
|
#mapContent {
|
width: 100%;
|
height: 100%;
|
}
|
// .topSelect{
|
// display: flex;
|
// margin-bottom: 20px;
|
// padding: 20px 15px 0 15px;
|
// display: flex;
|
// justify-content: space-between;
|
// span:first-child{
|
// flex: 1;
|
// }
|
// }
|
.noneData {
|
position: absolute;
|
color: #000;
|
background: #fff;
|
z-index: 999;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%);
|
padding: 20px 50px;
|
/* opacity: 0.5; */
|
font-size: 28px;
|
/* border-radius: 10px; */
|
border: 2px solid #ff7f50;
|
}
|
.topDate {
|
position: absolute;
|
top: 50px;
|
width: 100%;
|
padding: 15px 10px 3px 10px;
|
z-index: 999;
|
//background: #ccc;
|
background: rgba(204, 204, 204, 0.8);
|
box-shadow: 1px 1px 5px #666;
|
cursor: pointer;
|
}
|
.mouseDiv,
|
.mouseDiv2 {
|
position: absolute;
|
left: 0;
|
background-color: #009845;
|
width: 36px;
|
height: 22px;
|
border-radius: 5px;
|
top: -34px;
|
display: none;
|
text-align: center;
|
line-height: 22px;
|
padding: 1px;
|
color: white;
|
}
|
.sjDiv,
|
.sjDiv2 {
|
width: 0px;
|
height: 0px;
|
border: 10px solid transparent;
|
border-top-color: #009845;
|
position: absolute;
|
left: 0;
|
right: 0;
|
margin: auto;
|
top: 100%;
|
z-index: -1;
|
}
|
.mouseDiv2 {
|
background-color: #2b2b2b;
|
}
|
.sjDiv2 {
|
border-top-color: #2b2b2b;
|
}
|
.jdt {
|
height: 5px;
|
width: 100%;
|
display: flex;
|
position: relative;
|
}
|
.timeDiv {
|
width: 100%;
|
float: left;
|
}
|
.topDate .timeDiv:nth-child(3) {
|
border-left: 1px solid white;
|
border-right: 1px solid white;
|
}
|
.topDate ul {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
}
|
.topDate li {
|
width: 1.36986%;
|
//padding: 0 2%;
|
box-sizing: border-box;
|
//transform: translateX(50%);
|
}
|
.topDate p {
|
text-align: center;
|
font-size: 16px;
|
margin: 0;
|
padding: 0;
|
}
|
.jdt li {
|
//box-sizing: border-box;
|
border-left: 1px solid white;
|
background-color: rgba(0, 0, 0, 0.3);
|
height: 100%;
|
width: 1.36986%;
|
list-style: none;
|
position: relative;
|
left: 0;
|
top: 0;
|
}
|
.dayDiv p {
|
width: 32.87664%;
|
text-align: center;
|
}
|
.top {
|
position: absolute;
|
top: 0px;
|
width: 100%;
|
padding: 5px 10px;
|
z-index: 999;
|
/* background: #ccc; */
|
background: rgba(204, 204, 204, 0.5);
|
//box-shadow: 1px 1px 5px #666;
|
}
|
.top > .left {
|
padding: 5px 10px;
|
border: 1px solid #aaa;
|
border-right: none;
|
background: #fff;
|
/* border-radius: 3px; */
|
cursor: pointer;
|
font-size: 16px;
|
float: left;
|
margin-top: 4px;
|
-webkit-transform-origin-x: 0;
|
/* -webkit-transform: scale(0.90); */
|
}
|
.top > .left:nth-child(1) {
|
border-radius: 5px 0 0 5px;
|
}
|
.top > .left:nth-last-child(2) {
|
border-radius: 0 5px 5px 0;
|
border-right: 1px solid #aaa;
|
}
|
.top > .left:hover {
|
background: #666;
|
color: #fff;
|
}
|
.click {
|
color: #fff;
|
background-color: #666 !important;
|
}
|
.top > .right {
|
position: fixed;
|
right: 410px;
|
top: 55px;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: green;
|
color: #fff;
|
float: right;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid #333;
|
opacity: 0.7;
|
}
|
|
.top > .dropDown {
|
width: 400px;
|
height: 51px;
|
line-height: 51px;
|
text-align: center;
|
color: #fff;
|
font-size: 18px;
|
position: fixed;
|
right: 0;
|
top: 50px;
|
background-color: rgba(15, 69, 103, 0.8);
|
}
|
.dropDown > .drop-icon {
|
vertical-align: middle;
|
width: 24px;
|
position: relative;
|
left: 14px;
|
top: -2px;
|
}
|
.realTime_top {
|
width: 120px;
|
float: left;
|
margin-top: 9px;
|
margin-left: 10px;
|
}
|
|
.text_Time {
|
float: left;
|
margin-left: 37px;
|
}
|
.my-div-icon {
|
font-size: 14px;
|
text-align: center;
|
padding-left: 20px;
|
padding-top: 6px;
|
font-family: '微软雅黑';
|
z-index: 10003;
|
/* -webkit-transform-origin-x: 0; */
|
/* -webkit-transform: scale(0.90); */
|
}
|
.my-div-icon-g {
|
font-size: 14px;
|
text-align: center;
|
padding-left: 20px;
|
padding-top: 11px;
|
font-family: '微软雅黑';
|
z-index: 10003;
|
/* -webkit-transform-origin-x: 0; */
|
/* -webkit-transform: scale(0.90); */
|
}
|
.iconWind {
|
z-index: 10002;
|
}
|
.my-device {
|
z-index: 999;
|
}
|
.windDir-icon {
|
z-index: 10001;
|
margin-top: 20px;
|
/* padding-left: 10px; */
|
/* padding-top: 30px; */
|
}
|
.leaflet-popup-content {
|
width: 235px !important;
|
font-size: 12px;
|
-webkit-transform-origin-x: 0;
|
z-index: 1000;
|
/* -webkit-transform: scale(0.90); */
|
/* font-family: ui-serif; */
|
}
|
.buttom-left {
|
/* background-image: url("@/assets/images/tl_PM10.png"); */
|
position: absolute;
|
bottom: 10px;
|
left: 10px;
|
width: 435px;
|
height: 36px;
|
z-index: 999;
|
border-radius: 3px;
|
}
|
.middle {
|
padding: 5px 10px;
|
border: 1px solid #aaa;
|
background: #fff;
|
border-radius: 3px;
|
cursor: pointer;
|
font-size: 16px;
|
float: left;
|
margin-top: 4px;
|
-webkit-transform-origin-x: 0;
|
margin-left: 20px;
|
}
|
.el-dialog__body {
|
padding: 10px 20px;
|
}
|
.el-dialog__footer {
|
padding: 0px 20px 15px;
|
}
|
.yellow {
|
background-color: #ffff00 !important;
|
color: #868600 !important;
|
}
|
.orange {
|
background-color: #ff7e00 !important;
|
color: #844100 !important;
|
}
|
.red {
|
background-color: #ff0000 !important;
|
color: #790000 !important;
|
}
|
.leaflet-marker-icon.leaflet-interactive {
|
pointer-events: auto;
|
margin-left: -45px;
|
margin-top: -40px;
|
}
|
</style>
|
